Chromium Code Reviews

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-removal-auto-placement-update.html

Issue 401473003: [CSS Grid Layout] Rename gridAutoFlow[Row|Column] to gridAutoFlow[Row|Column]Sparse (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Keep separation between sparse and dense in the tests Created 6 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff |
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-order-auto-flow-resolution.html ('k') | LayoutTests/fast/css-grid-layout/resources/grid.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <link href="resources/grid.css" rel="stylesheet"> 3 <link href="resources/grid.css" rel="stylesheet">
4 <style> 4 <style>
5 .grid { 5 .grid {
6 grid-template-columns: 50px 100px; 6 grid-template-columns: 50px 100px;
7 grid-template-rows: 50px 100px; 7 grid-template-rows: 50px 100px;
8 } 8 }
9 </style> 9 </style>
10 <script src="../../resources/check-layout.js"></script> 10 <script src="../../resources/check-layout.js"></script>
11 <script> 11 <script>
12 function testRemoval(gridElementID, autoFlowElementID, size) 12 function testRemoval(gridElementID, autoFlowElementID, size)
13 { 13 {
14 var gridElement = document.getElementById(gridElementID); 14 var gridElement = document.getElementById(gridElementID);
15 var autoFlowElement = document.getElementById(autoFlowElementID); 15 var autoFlowElement = document.getElementById(autoFlowElementID);
16 16
17 // Remove the white space and the first grid item. 17 // Remove the white space and the first grid item.
18 gridElement.removeChild(gridElement.firstChild); 18 gridElement.removeChild(gridElement.firstChild);
19 gridElement.removeChild(gridElement.firstChild); 19 gridElement.removeChild(gridElement.firstChild);
20 20
21 autoFlowElement.setAttribute("data-expected-width", size.width); 21 autoFlowElement.setAttribute("data-expected-width", size.width);
22 autoFlowElement.setAttribute("data-expected-height", size.height); 22 autoFlowElement.setAttribute("data-expected-height", size.height);
23 checkLayout("#" + gridElementID, document.getElementById("test-output")); 23 checkLayout("#" + gridElementID, document.getElementById("test-output"));
24 } 24 }
25 25
26 function testRemovals() 26 function testRemovals()
27 { 27 {
28 var testOutput = document.getElementById("test-output"); 28 var testOutput = document.getElementById("test-output");
29 checkLayout("#autoFlowColumnElement", testOutput); 29 checkLayout("#autoFlowColumnElement", testOutput);
30 testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '100' }); 30 testRemoval("gridAutoFlowColumnDense", "autoFlowColumnElement", { 'width': ' 100', 'height': '100' });
31 testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '50' }); 31 testRemoval("gridAutoFlowColumnDense", "autoFlowColumnElement", { 'width': ' 100', 'height': '50' });
32 testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '100' }); 32 testRemoval("gridAutoFlowColumnDense", "autoFlowColumnElement", { 'width': ' 50', 'height': '100' });
33 testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '50' }); 33 testRemoval("gridAutoFlowColumnDense", "autoFlowColumnElement", { 'width': ' 50', 'height': '50' });
34 34
35 checkLayout("#autoFlowRowElement", testOutput); 35 checkLayout("#autoFlowRowElement", testOutput);
36 testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'heig ht': '100' }); 36 testRemoval("gridAutoFlowRowDense", "autoFlowRowElement", { 'width': '100', 'height': '100' });
37 testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'heig ht': '50' }); 37 testRemoval("gridAutoFlowRowDense", "autoFlowRowElement", { 'width': '100', 'height': '50' });
38 testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'heigh t': '50' }); 38 testRemoval("gridAutoFlowRowDense", "autoFlowRowElement", { 'width': '50', ' height': '50' });
39 testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'heigh t': '50' }); 39 testRemoval("gridAutoFlowRowDense", "autoFlowRowElement", { 'width': '50', ' height': '50' });
40 40
41 checkLayout("#gridAutoFlowColumnWithAutoItems", testOutput); 41 checkLayout("#gridAutoFlowColumnWithAutoItems", testOutput);
42 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '100', 'height': '100' }); 42 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '100', 'height': '100' });
43 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '100', 'height': '50' }); 43 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '100', 'height': '50' });
44 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '50', 'height': '100' }); 44 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '50', 'height': '100' });
45 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '50', 'height': '50' }); 45 testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoIt ems", { 'width': '50', 'height': '50' });
46 46
47 checkLayout("#gridAutoFlowRowWithAutoAndFixedItems", testOutput); 47 checkLayout("#gridAutoFlowRowWithAutoAndFixedItems", testOutput);
48 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '100', 'height': '100' }); 48 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '100', 'height': '100' });
49 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '100', 'height': '50' }); 49 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '100', 'height': '50' });
50 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '100', 'height': '50' }); 50 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '100', 'height': '50' });
51 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '50', 'height': '50' }); 51 testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithA utoAndFixedItems", { 'width': '50', 'height': '50' });
52 } 52 }
53 window.addEventListener("load", testRemovals, false); 53 window.addEventListener("load", testRemovals, false);
54 </script> 54 </script>
55 <body> 55 <body>
56 56
57 <p>This test checks that the tracks' auto positions are recomputed after removin g a grid item.</p> 57 <p>This test checks that the tracks' auto positions are recomputed after removin g a grid item.</p>
58 58
59 <div class="unconstrainedContainer"> 59 <div class="unconstrainedContainer">
60 <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn"> 60 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense">
61 <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</di v> 61 <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</di v>
62 <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div > 62 <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div >
63 <div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div > 63 <div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div >
64 <div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div> 64 <div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
65 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement " data-expected-width="170" data-expected-height="50">XXXXX XXXXX XXXXX</div> 65 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement " data-expected-width="170" data-expected-height="50">XXXXX XXXXX XXXXX</div>
66 </div> 66 </div>
67 </div> 67 </div>
68 68
69 <div class="unconstrainedContainer"> 69 <div class="unconstrainedContainer">
70 <div class="grid gridAutoFlowRow" id="gridAutoFlowRow"> 70 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense">
71 <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</di v> 71 <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</di v>
72 <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div > 72 <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div >
73 <div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div> 73 <div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
74 <div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div > 74 <div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div >
75 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElement" d ata-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div> 75 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElement" d ata-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
76 </div> 76 </div>
77 </div> 77 </div>
78 78
79 <div class="unconstrainedContainer"> 79 <div class="unconstrainedContainer">
80 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnWithAutoItem s"> 80 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnWithAutoItem s">
(...skipping 12 matching lines...)
93 <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div> 93 <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
94 <div class="sizedToGridArea firstRowAutoColumn">XXXXX XXXXX XXXXX</div> 94 <div class="sizedToGridArea firstRowAutoColumn">XXXXX XXXXX XXXXX</div>
95 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWit hAutoAndFixedItems" data-expected-width="100" data-expected-height="100">XXXXX X XXXX XXXXX</div> 95 <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWit hAutoAndFixedItems" data-expected-width="100" data-expected-height="100">XXXXX X XXXX XXXXX</div>
96 </div> 96 </div>
97 </div> 97 </div>
98 98
99 <div id="test-output"></div> 99 <div id="test-output"></div>
100 100
101 </body> 101 </body>
102 </html> 102 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-order-auto-flow-resolution.html ('k') | LayoutTests/fast/css-grid-layout/resources/grid.css » ('j') | no next file with comments »

Powered by Google App Engine