[CSS Grid Layout] handle undefined RemainingSpace in computeUsedBreadthOfGridTracks...
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-auto-columns-rows-update.html
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <script>
5 if (window.testRunner)
6     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 </script>
8 <link href="resources/grid.css" rel="stylesheet">
9 <style>
10 .grid {
11     -webkit-grid-template-rows: 20px;
12     -webkit-grid-template-columns: 10px;
13     -webkit-grid-auto-rows: 30px;
14     -webkit-grid-auto-columns: 50px;
15     font: 10px/1 Ahem;
16 }
17 </style>
18 </head>
19 <script src="../../resources/check-layout.js"></script>
20 <script>
21 function updateAndCheck(gridElementID, defaultSizing, gridItemSize)
22 {
23     var gridElement = document.getElementById(gridElementID);
24     gridElement.style.webkitGridAutoRows = defaultSizing.rows;
25     gridElement.style.webkitGridAutoColumns = defaultSizing.columns;
26
27     var gridItem = gridElement.firstChild.nextSibling;
28     gridItem.setAttribute("data-expected-width", gridItemSize.width);
29     gridItem.setAttribute("data-expected-height", gridItemSize.height);
30
31     checkLayout("#" + gridElementID);
32 }
33
34 function updateGridAutoRowsColumns()
35 {
36     checkLayout('.grid');
37
38     // The constrained example is always sized to the min width so we don't test max width.
39     updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
40     updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '200px' });
41     updateAndCheck("constrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '20px' });
42     updateAndCheck("constrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(-webkit-max-content, 100px)' }, { 'width': '120px', 'height': '10px' });
43     updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(-webkit-max-content, 100px)' }, { 'width': '120px', 'height': '400px' });
44     updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '400px' });
45     updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'auto' }, { 'width': '60px', 'height': '400px' });
46     updateAndCheck("constrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '60px', 'height': '20px' });
47
48     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
49     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '200px' });
50     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '15px' });
51     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, -webkit-max-content)' }, { 'width': '120px', 'height': '15px' });
52     updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, -webkit-max-content)' }, { 'width': '120px', 'height': '15px' });
53     updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(10em, -webkit-max-content)' }, { 'width': '120px', 'height': '10px' });
54     updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20em, -webkit-max-content)' }, { 'width': '200px', 'height': '10px' });
55     updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120px', 'height': '10px' });
56
57     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
58     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '200px' });
59     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '15px' });
60     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(-webkit-min-content, 15px)', 'columns': 'minmax(-webkit-max-content, 100px)' }, { 'width': '120px', 'height': '15px' });
61     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(-webkit-max-content, 100px)' }, { 'width': '120px', 'height': '400px' });
62     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '400px' });
63     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'auto' }, { 'width': '60px', 'height': '400px' });
64     updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '60px', 'height': '20px' });
65 }
66
67 window.addEventListener("load", updateGridAutoRowsColumns, false);
68 </script>
69 <body>
70
71 <div>This test checks that grid-auto-{row|column} updates properly recomputes the grid items' sizes.</div>
72
73 <div class="constrainedContainer" style="position: relative">
74     <div class="grid" id="constrainedGrid" style="height: 100%">
75         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
76     </div>
77 </div>
78
79 <div class="unconstrainedContainer" style="position: relative">
80     <div class="grid" id="unconstrainedGrid">
81         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
82     </div>
83 </div>
84
85 <div class="constrainedContainer" style="position: relative;">
86     <div class="grid" id="constrainedGridUndefinedHeight">
87         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
88     </div>
89 </div>
90
91 </body>
92 </html>