[CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns}
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-item-removal-auto-placement-update.html
1 <!DOCTYPE html>
2 <html>
3 <script>
4 if (window.testRunner)
5     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
6 </script>
7 <link href="resources/grid.css" rel="stylesheet">
8 <style>
9 .grid {
10     -webkit-grid-definition-columns: 50px 100px;
11     -webkit-grid-definition-rows: 50px 100px;
12 }
13 </style>
14 <script src="../../resources/check-layout.js"></script>
15 <script>
16 function testRemoval(gridElementID, autoFlowElementID, size)
17 {
18     var gridElement = document.getElementById(gridElementID);
19     var autoFlowElement = document.getElementById(autoFlowElementID);
20
21     // Remove the white space and the first grid item.
22     gridElement.removeChild(gridElement.firstChild);
23     gridElement.removeChild(gridElement.firstChild);
24
25     autoFlowElement.setAttribute("data-expected-width", size.width);
26     autoFlowElement.setAttribute("data-expected-height", size.height);
27     checkLayout("#" + gridElementID);
28 }
29
30 function testRemovals()
31 {
32     checkLayout("#autoFlowColumnElement");
33     testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '100' });
34     testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '100', 'height': '50' });
35     testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '100' });
36     testRemoval("gridAutoFlowColumn", "autoFlowColumnElement", { 'width': '50', 'height': '50' });
37
38     checkLayout("#autoFlowRowElement");
39     testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'height': '100' });
40     testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '100', 'height': '50' });
41     testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'height': '50' });
42     testRemoval("gridAutoFlowRow", "autoFlowRowElement", { 'width': '50', 'height': '50' });
43
44     checkLayout("#gridAutoFlowColumnWithAutoItems");
45     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '100', 'height': '100' });
46     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '100', 'height': '50' });
47     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '50', 'height': '100' });
48     testRemoval("gridAutoFlowColumnWithAutoItems", "autoFlowRowElementWithAutoItems", { 'width': '50', 'height': '50' });
49
50     checkLayout("#gridAutoFlowRowWithAutoAndFixedItems");
51     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '100' });
52     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '50' });
53     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '100', 'height': '50' });
54     testRemoval("gridAutoFlowRowWithAutoAndFixedItems", "autoFlowRowElementWithAutoAndFixedItems", { 'width': '50', 'height': '50' });
55 }
56 window.addEventListener("load", testRemovals, false);
57 </script>
58 <body>
59
60 <p>This test checks that the tracks' auto positions are recomputed after removing a grid item.</p>
61
62 <div class="unconstrainedContainer">
63     <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn">
64         <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</div>
65         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
66         <div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div>
67         <div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
68         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowColumnElement" data-expected-width="170" data-expected-height="50">XXXXX XXXXX XXXXX</div>
69     </div>
70 </div>
71
72 <div class="unconstrainedContainer">
73     <div class="grid gridAutoFlowRow" id="gridAutoFlowRow">
74         <div class="sizedToGridArea secondRowSecondColumn">XXXXX XXXXX XXXXX</div>
75         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
76         <div class="sizedToGridArea firstRowFirstColumn">XXXXX XXXXX XXXXX</div>
77         <div class="sizedToGridArea secondRowFirstColumn">XXXXX XXXXX XXXXX</div>
78         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElement" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
79     </div>
80 </div>
81
82 <div class="unconstrainedContainer">
83     <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumnWithAutoItems">
84         <div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
85         <div class="sizedToGridArea autoRowSecondColumn">XXXXX XXXXX XXXXX</div>
86         <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
87         <div class="sizedToGridArea firstRowAutoColumn">XXXXX XXXXX XXXXX</div>
88         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWithAutoItems" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
89     </div>
90 </div>
91
92 <div class="unconstrainedContainer">
93     <div class="grid gridAutoFlowRow" id="gridAutoFlowRowWithAutoAndFixedItems">
94         <div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
95         <div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
96         <div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
97         <div class="sizedToGridArea firstRowAutoColumn">XXXXX XXXXX XXXXX</div>
98         <div class="sizedToGridArea autoRowAutoColumn" id="autoFlowRowElementWithAutoAndFixedItems" data-expected-width="100" data-expected-height="100">XXXXX XXXXX XXXXX</div>
99     </div>
100 </div>
101
102 </body>
103 </html>