5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 <link href="resources/grid.css" rel="stylesheet">
10 grid-template-columns: 50px minmax(min-content, 50px) minmax(max-content, 50px) minmax(50px, min-content);
11 grid-template-rows: 70px minmax(max-content, 70px) minmax(50px, min-content) minmax(65px, max-content);
16 /* Make us fit our grid area. */
21 <script src="../../resources/check-layout.js"></script>
23 function testPosition(gridElementID, content, position, size)
25 var gridItem = document.createElement("div");
26 gridItem.classList.add("sizedToGridArea");
27 gridItem.innerHTML = content;
28 gridItem.style.gridColumn = position.column;
29 gridItem.style.gridRow = 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);
37 function updateImplicitGridColumn()
39 testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });
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' });
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' });
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' });
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' });
66 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });
68 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
69 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' });
70 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
71 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
72 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '1', 'row': '5' }, { 'width': '50', 'height': '30' });
74 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '1' }, { 'width': '40', 'height': '70' });
75 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '2' }, { 'width': '40', 'height': '70' });
76 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '3' }, { 'width': '40', 'height': '50' });
77 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '4' }, { 'width': '40', 'height': '65' });
78 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '2', 'row': '5' }, { 'width': '40', 'height': '30' });
80 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '1' }, { 'width': '140', 'height': '70' });
81 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '2' }, { 'width': '140', 'height': '70' });
82 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '3' }, { 'width': '140', 'height': '50' });
83 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '4' }, { 'width': '140', 'height': '65' });
84 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '3', 'row': '5' }, { 'width': '140', 'height': '30' });
86 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '1' }, { 'width': '50', 'height': '70' });
87 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '2' }, { 'width': '50', 'height': '70' });
88 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '3' }, { 'width': '50', 'height': '50' });
89 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' });
90 testPosition("constrainedGridUndefinedHeight", "XXXX XXXX XXXX", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' });
92 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '10', 'row': '15' }, { 'width': '130', 'height': '10' });
94 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
95 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '1' }, { 'width': '60', 'height': '70' });
96 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '1' }, { 'width': '130', 'height': '70' });
97 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '1' }, { 'width': '60', 'height': '70' });
98 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '1' }, { 'width': '130', 'height': '70' });
100 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' });
101 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '2' }, { 'width': '60', 'height': '70' });
102 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '2' }, { 'width': '130', 'height': '70' });
103 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '2' }, { 'width': '60', 'height': '70' });
104 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '2' }, { 'width': '130', 'height': '70' });
106 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
107 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '3' }, { 'width': '60', 'height': '50' });
108 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '3' }, { 'width': '130', 'height': '50' });
109 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '3' }, { 'width': '60', 'height': '50' });
110 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '3' }, { 'width': '130', 'height': '50' });
112 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
113 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '2', 'row': '4' }, { 'width': '60', 'height': '65' });
114 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '3', 'row': '4' }, { 'width': '130', 'height': '65' });
115 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '4', 'row': '4' }, { 'width': '60', 'height': '65' });
116 testPosition("unconstrainedGrid", "XXXXXX XXXXXX", { 'column': '5', 'row': '4' }, { 'width': '130', 'height': '65' });
118 window.addEventListener("load", updateImplicitGridColumn, false);
122 <p>This test checks that we properly recompute our grid tracks' sizes when we add more grid items.</p>
124 <div class="constrainedContainer">
125 <div class="grid gridFixedContent" id="constrainedGrid" style="height: 100%"></div>
128 <div class="constrainedContainer">
129 <div class="grid gridFixedContent" id="constrainedGridUndefinedHeight"></div>
132 <!-- Allow the extra logical space distribution to occur. -->
133 <div style="width: 1000px; height: 1000px">
134 <div class="grid gridFixedContent" id="unconstrainedGrid"><div class="sizedToGridArea">XXXXXX XXXXXX</div></div>