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 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
=stylesheet> | 9 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
=stylesheet> |
10 <style> | 10 <style> |
11 .gridMinContentFixed { | 11 .gridMinContentFixed { |
12 grid-columns: minmax(min-content, 40px) minmax(min-content, 40px); | 12 grid-definition-columns: minmax(min-content, 40px) minmax(min-content, 40px)
; |
13 grid-rows: 10px; | 13 grid-definition-rows: 10px; |
14 font: 10px/1 Ahem; | 14 font: 10px/1 Ahem; |
15 } | 15 } |
16 | 16 |
17 .gridFixedMinContent { | 17 .gridFixedMinContent { |
18 grid-columns: minmax(30px, min-content) minmax(30px, min-content); | 18 grid-definition-columns: minmax(30px, min-content) minmax(30px, min-content)
; |
19 grid-rows: 10px; | 19 grid-definition-rows: 10px; |
20 font: 10px/1 Ahem; | 20 font: 10px/1 Ahem; |
21 } | 21 } |
22 | 22 |
23 .gridFixedMaxContent { | 23 .gridFixedMaxContent { |
24 grid-columns: minmax(40px, max-content) minmax(40px, max-content); | 24 grid-definition-columns: minmax(40px, max-content) minmax(40px, max-content)
; |
25 grid-rows: 10px; | 25 grid-definition-rows: 10px; |
26 font: 10px/1 Ahem; | 26 font: 10px/1 Ahem; |
27 } | 27 } |
28 | 28 |
29 .gridFixedFixed { | 29 .gridFixedFixed { |
30 grid-columns: minmax(30px, 40px) minmax(30px, 40px); | 30 grid-definition-columns: minmax(30px, 40px) minmax(30px, 40px); |
31 grid-rows: 10px; | 31 grid-definition-rows: 10px; |
32 } | 32 } |
33 | 33 |
34 .gridAutoContent { | 34 .gridAutoContent { |
35 grid-columns: auto auto; | 35 grid-definition-columns: auto auto; |
36 grid-rows: 10px; | 36 grid-definition-rows: 10px; |
37 font: 10px/1 Ahem; | 37 font: 10px/1 Ahem; |
38 } | 38 } |
39 </style> | 39 </style> |
40 </head> | 40 </head> |
41 <script src="../../resources/check-layout.js"></script> | 41 <script src="../../resources/check-layout.js"></script> |
42 <body onload="checkLayout('.grid')"> | 42 <body onload="checkLayout('.grid')"> |
43 <body> | 43 <body> |
44 <p>This test checks that the grid element's preferred logical widths are properl
y computed with different combinations of minmax().</p> | 44 <p>This test checks that the grid element's preferred logical widths are properl
y computed with different combinations of minmax().</p> |
45 <div class="grid gridMinContentFixed min-content" data-expected-height="10" data
-expected-width="40"> | 45 <div class="grid gridMinContentFixed min-content" data-expected-height="10" data
-expected-width="40"> |
46 <div class="firstRowFirstColumn">XX XX XX</div> | 46 <div class="firstRowFirstColumn">XX XX XX</div> |
(...skipping 25 matching lines...) Expand all Loading... |
72 <div class="firstRowFirstColumn">XX XX XX</div> | 72 <div class="firstRowFirstColumn">XX XX XX</div> |
73 <div class="firstRowSecondColumn">XX XX XX</div> | 73 <div class="firstRowSecondColumn">XX XX XX</div> |
74 </div> | 74 </div> |
75 <div class="grid gridAutoContent max-content" data-expected-height="10" data-exp
ected-width="160"> | 75 <div class="grid gridAutoContent max-content" data-expected-height="10" data-exp
ected-width="160"> |
76 <div class="firstRowFirstColumn">XX XX XX</div> | 76 <div class="firstRowFirstColumn">XX XX XX</div> |
77 <div class="firstRowSecondColumn">XX XX XX</div> | 77 <div class="firstRowSecondColumn">XX XX XX</div> |
78 </div> | 78 </div> |
79 | 79 |
80 </body> | 80 </body> |
81 </html> | 81 </html> |
OLD | NEW |