653a4fc28706753002c3dcd15a1a09b44b23c76b
[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': '20px' });
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
58 window.addEventListener("load", updateGridAutoRowsColumns, false);
59 </script>
60 <body>
61
62 <div>This test checks that grid-auto-{row|column} updates properly recomputes the grid items' sizes.</div>
63
64 <div class="constrainedContainer" style="position: relative">
65     <div class="grid" id="constrainedGrid">
66         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
67     </div>
68 </div>
69
70 <div class="unconstrainedContainer" style="position: relative">
71     <div class="grid" id="unconstrainedGrid">
72         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
73     </div>
74 </div>
75
76 </body>
77 </html>