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