| 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 |