OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script> | 4 <script> |
5 if (window.testRunner) | 5 if (window.testRunner) |
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); | 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
7 </script> | 7 </script> |
8 <link href="resources/grid.css" rel="stylesheet"> | 8 <link href="resources/grid.css" rel="stylesheet"> |
9 <style> | 9 <style> |
10 .grid { | 10 .grid { |
(...skipping 20 matching lines...) Expand all Loading... |
31 checkLayout("#" + gridElementID); | 31 checkLayout("#" + gridElementID); |
32 } | 32 } |
33 | 33 |
34 function updateGridAutoRowsColumns() | 34 function updateGridAutoRowsColumns() |
35 { | 35 { |
36 checkLayout('.grid'); | 36 checkLayout('.grid'); |
37 | 37 |
38 // The constrained example is always sized to the min width so we don't test
max width. | 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' }); | 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' }); | 40 updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns':
'minmax(10%, 100px)' }, { 'width': '1px', 'height': '200px' }); |
41 updateAndCheck("constrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15p
x)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '20px' }); | 41 updateAndCheck("constrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'co
lumns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '20px' }); |
42 updateAndCheck("constrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15p
x)', 'columns': 'minmax(-webkit-max-content, 100px)' }, { 'width': '120px', 'hei
ght': '10px' }); | 42 updateAndCheck("constrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'co
lumns': 'minmax(max-content, 100px)' }, { 'width': '120px', 'height': '10px' }); |
43 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns':
'minmax(-webkit-max-content, 100px)' }, { 'width': '120px', 'height': '400px' }
); | 43 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns':
'minmax(max-content, 100px)' }, { 'width': '120px', 'height': '400px' }); |
44 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns':
'minmax(10%, 100px)' }, { 'width': '1px', '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' }); | 45 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns':
'auto' }, { 'width': '60px', 'height': '400px' }); |
46 updateAndCheck("constrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { '
width': '60px', 'height': '20px' }); | 46 updateAndCheck("constrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { '
width': '60px', 'height': '20px' }); |
47 | 47 |
48 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns
': '50px' }, { 'width': '50px', 'height': '200px' }); | 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' }); | 49 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns
': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '200px' }); |
50 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 1
5px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '20px' }
); | 50 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', '
columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '20px' }); |
51 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 1
5px)', 'columns': 'minmax(10%, -webkit-max-content)' }, { 'width': '120px', 'hei
ght': '15px' }); | 51 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', '
columns': 'minmax(10%, max-content)' }, { 'width': '120px', 'height': '15px' }); |
52 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 1
5px)', 'columns': 'minmax(10%, -webkit-max-content)' }, { 'width': '120px', 'hei
ght': '15px' }); | 52 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', '
columns': 'minmax(10%, max-content)' }, { 'width': '120px', 'height': '15px' }); |
53 updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(10e
m, -webkit-max-content)' }, { 'width': '120px', 'height': '10px' }); | 53 updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(10e
m, max-content)' }, { 'width': '120px', 'height': '10px' }); |
54 updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20e
m, -webkit-max-content)' }, { 'width': '200px', 'height': '10px' }); | 54 updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20e
m, max-content)' }, { 'width': '200px', 'height': '10px' }); |
55 updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, {
'width': '120px', 'height': '10px' }); | 55 updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, {
'width': '120px', 'height': '10px' }); |
56 } | 56 } |
57 | 57 |
58 window.addEventListener("load", updateGridAutoRowsColumns, false); | 58 window.addEventListener("load", updateGridAutoRowsColumns, false); |
59 </script> | 59 </script> |
60 <body> | 60 <body> |
61 | 61 |
62 <div>This test checks that grid-auto-{row|column} updates properly recomputes th
e grid items' sizes.</div> | 62 <div>This test checks that grid-auto-{row|column} updates properly recomputes th
e grid items' sizes.</div> |
63 | 63 |
64 <div class="constrainedContainer" style="position: relative"> | 64 <div class="constrainedContainer" style="position: relative"> |
65 <div class="grid" id="constrainedGrid"> | 65 <div class="grid" id="constrainedGrid"> |
66 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da
ta-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX
</div> | 66 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da
ta-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX
</div> |
67 </div> | 67 </div> |
68 </div> | 68 </div> |
69 | 69 |
70 <div class="unconstrainedContainer" style="position: relative"> | 70 <div class="unconstrainedContainer" style="position: relative"> |
71 <div class="grid" id="unconstrainedGrid"> | 71 <div class="grid" id="unconstrainedGrid"> |
72 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da
ta-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX
</div> | 72 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da
ta-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX
</div> |
73 </div> | 73 </div> |
74 </div> | 74 </div> |
75 | 75 |
76 </body> | 76 </body> |
77 </html> | 77 </html> |
OLD | NEW |