| 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 { |
| 11 grid-rows: 20px; | 11 grid-rows: 20px; |
| 12 grid-columns: 10px; | 12 grid-columns: 10px; |
| 13 } | 13 } |
| 14 | 14 |
| 15 .gridAutoFixedFixed { | 15 .gridAutoFixedFixed { |
| 16 grid-auto-rows: 30px; | 16 grid-auto-rows: 30px; |
| 17 grid-auto-columns: 50px; | 17 grid-auto-columns: 50px; |
| 18 } | 18 } |
| 19 | 19 |
| 20 .gridAutoMinMax { | 20 .gridAutoMinMax { |
| 21 height: 1000px; | 21 height: 1000px; |
| 22 grid-auto-rows: minmax(10%, 15px); | 22 grid-auto-rows: minmax(10%, 15px); |
| 23 grid-auto-columns: minmax(30%, 100px); | 23 grid-auto-columns: minmax(30%, 100px); |
| 24 } | 24 } |
| 25 | 25 |
| 26 .gridAutoMinMaxContent { | 26 .gridAutoMinMaxContent { |
| 27 grid-auto-rows: -webkit-min-content; | 27 grid-auto-rows: min-content; |
| 28 grid-auto-columns: -webkit-max-content; | 28 grid-auto-columns: max-content; |
| 29 } | 29 } |
| 30 </style> | 30 </style> |
| 31 </head> | 31 </head> |
| 32 <script src="../../resources/check-layout.js"></script> | 32 <script src="../../resources/check-layout.js"></script> |
| 33 <body onload="checkLayout('.grid');"> | 33 <body onload="checkLayout('.grid');"> |
| 34 | 34 |
| 35 <div>This test checks that implicit rows / columns obey grid-auto-{rows|columns}
.</div> | 35 <div>This test checks that implicit rows / columns obey grid-auto-{rows|columns}
.</div> |
| 36 | 36 |
| 37 <div class="unconstrainedContainer" style="position: relative"> | 37 <div class="unconstrainedContainer" style="position: relative"> |
| 38 <div class="grid gridAutoFixedFixed"> | 38 <div class="grid gridAutoFixedFixed"> |
| 39 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da
ta-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX
</div> | 39 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da
ta-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX
</div> |
| 40 </div> | 40 </div> |
| 41 </div> | 41 </div> |
| 42 | 42 |
| 43 <div class="unconstrainedContainer" style="position: relative"> | 43 <div class="unconstrainedContainer" style="position: relative"> |
| 44 <div class="grid gridAutoMinMax"> | 44 <div class="grid gridAutoMinMax"> |
| 45 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da
ta-offset-y="20" data-expected-width="300" data-expected-height="100">XXXXX XXXX
XX</div> | 45 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da
ta-offset-y="20" data-expected-width="300" data-expected-height="100">XXXXX XXXX
XX</div> |
| 46 </div> | 46 </div> |
| 47 </div> | 47 </div> |
| 48 | 48 |
| 49 <div class="unconstrainedContainer" style="position: relative"> | 49 <div class="unconstrainedContainer" style="position: relative"> |
| 50 <div class="grid gridAutoMinMaxContent"> | 50 <div class="grid gridAutoMinMaxContent"> |
| 51 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da
ta-offset-y="20" data-expected-width="120" data-expected-height="10">XXXXX XXXXX
X</div> | 51 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da
ta-offset-y="20" data-expected-width="120" data-expected-height="10">XXXXX XXXXX
X</div> |
| 52 </div> | 52 </div> |
| 53 </div> | 53 </div> |
| 54 | 54 |
| 55 </body> | 55 </body> |
| 56 </html> | 56 </html> |
| OLD | NEW |