[CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns}
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-item-addition-track-breadth-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 .gridFixedContent {
10     -webkit-grid-definition-columns: 50px minmax(-webkit-min-content, 50px) minmax(-webkit-max-content, 50px) minmax(50px, -webkit-min-content);
11     -webkit-grid-definition-rows: 70px minmax(-webkit-max-content, 70px) minmax(50px, -webkit-min-content) minmax(65px, -webkit-max-content);
12 }
13
14 .sizedToGridArea {
15     font: 10px/1 Ahem;
16     /* Make us fit our grid area. */
17     width: 100%;
18     height: 100%;
19 }
20 </style>
21 <script src="../../resources/check-layout.js"></script>
22 <script>
23 function testPosition(gridElementID, content, position, size)
24 {
25     var gridItem = document.createElement("div");
26     gridItem.classList.add("sizedToGridArea");
27     gridItem.innerHTML = content;
28     gridItem.style.webkitGridColumn = position.column;
29     gridItem.style.webkitGridRow = position.row;
30     gridItem.setAttribute("data-expected-width", size.width);
31     gridItem.setAttribute("data-expected-height", size.height);
32     var gridElement = document.getElementById(gridElementID);
33     gridElement.appendChild(gridItem);
34     checkLayout("#" + gridElementID);
35 }
36
37 function updateImplicitGridColumn()
38 {
39     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });
40
41     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
42     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '30' });
43     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
44     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
45     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '5' }, { 'width': '50', 'height': '30' });
46
47     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '1' }, { 'width': '40', 'height': '70' });
48     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '2' }, { 'width': '40', 'height': '30' });
49     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '3' }, { 'width': '40', 'height': '50' });
50     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '4' }, { 'width': '40', 'height': '65' });
51     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '2', 'row': '5' }, { 'width': '40', 'height': '30' });
52
53     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '1' }, { 'width': '140', 'height': '70' });
54     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '2' }, { 'width': '140', 'height': '30' });
55     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '3' }, { 'width': '140', 'height': '50' });
56     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '4' }, { 'width': '140', 'height': '65' });
57     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '3', 'row': '5' }, { 'width': '140', 'height': '30' });
58
59     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '1' }, { 'width': '50', 'height': '70' });
60     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '2' }, { 'width': '50', 'height': '30' });
61     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '3' }, { 'width': '50', 'height': '50' });
62     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' });
63     testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' });
64
65     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '10', 'row': '15' }, { 'width': '130', 'height': '10' });
66
67     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
68     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '1' }, { 'width': '60', 'height': '70' });
69     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '1' }, { 'width': '130', 'height': '70' });
70     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '1' }, { 'width': '60', 'height': '70' });
71     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '1' }, { 'width': '130', 'height': '70' });
72
73     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' });
74     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '2' }, { 'width': '60', 'height': '70' });
75     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '2' }, { 'width': '130', 'height': '70' });
76     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '2' }, { 'width': '60', 'height': '70' });
77     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '2' }, { 'width': '130', 'height': '70' });
78
79     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
80     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '3' }, { 'width': '60', 'height': '50' });
81     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '3' }, { 'width': '130', 'height': '50' });
82     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '3' }, { 'width': '60', 'height': '50' });
83     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '3' }, { 'width': '130', 'height': '50' });
84
85     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
86     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '4' }, { 'width': '60', 'height': '65' });
87     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '4' }, { 'width': '130', 'height': '65' });
88     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '4' }, { 'width': '60', 'height': '65' });
89     testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '4' }, { 'width': '130', 'height': '65' });
90 }
91 window.addEventListener("load", updateImplicitGridColumn, false);
92 </script>
93 <body>
94
95 <p>This test checks that we properly recompute our grid tracks' sizes when we add more grid items.</p>
96
97 <div class="constrainedContainer">
98     <div class="grid gridFixedContent" id="constrainedGrid"></div>
99 </div>
100
101 <!-- Allow the extra logical space distribution to occur. -->
102 <div style="width: 1000px; height: 1000px">
103     <div class="grid gridFixedContent" id="unconstrainedGrid"><div class="sizedToGridArea">XXXXXX XXXXXX</div></div>
104 </div>
105
106 </body>
107 </html>