OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
2 <link href="resources/grid.css" rel="stylesheet"> | 3 <link href="resources/grid.css" rel="stylesheet"> |
3 <style> | 4 <style> |
4 .indefiniteSizeGrid { | 5 .grid { |
5 font: 10px/1 Ahem; | 6 font: 10px/1 Ahem; |
6 } | 7 } |
7 .gridWithPercent { | 8 .gridWithPercent { |
8 grid-auto-columns: 25%; | 9 grid-auto-columns: 25%; |
9 grid-auto-rows: 30%; | 10 grid-auto-rows: 30%; |
10 } | 11 } |
11 .gridWithPercentInMinOfMinMax { | 12 .gridWithPercentInMinOfMinMax { |
12 grid-auto-columns: minmax(20%, max-content); | 13 grid-auto-columns: minmax(20%, max-content); |
13 grid-auto-rows: minmax(100%, 15px); | 14 grid-auto-rows: minmax(100%, 15px); |
14 } | 15 } |
15 .gridWithPercentInMinOfMinMax2 { | 16 .gridWithPercentInMinOfMinMax2 { |
16 grid-auto-columns: minmax(20%, 50px); | 17 grid-auto-columns: minmax(20%, 50px); |
17 grid-auto-rows: minmax(100%, max-content); | 18 grid-auto-rows: minmax(100%, max-content); |
18 } | 19 } |
19 .gridWithPercentInMaxOfMinMax { | 20 .gridWithPercentInMaxOfMinMax { |
20 grid-auto-columns: minmax(min-content, 25%); | 21 grid-auto-columns: minmax(min-content, 25%); |
21 grid-auto-rows: minmax(0px, 1%); | 22 grid-auto-rows: minmax(0px, 1%); |
22 } | 23 } |
23 .gridWithPercentInMaxOfMinMax2 { | 24 .gridWithPercentInMaxOfMinMax2 { |
24 grid-auto-columns: minmax(20px, 25%); | 25 grid-auto-columns: minmax(20px, 25%); |
25 grid-auto-rows: minmax(min-content, 1%); | 26 grid-auto-rows: minmax(min-content, 1%); |
26 } | 27 } |
27 .gridWithPercentsInMinMax { | 28 .gridWithPercentsInMinMax { |
28 grid-auto-columns: minmax(25%, 50%); | 29 grid-auto-columns: minmax(25%, 50%); |
29 grid-auto-rows: minmax(10%, 90%); | 30 grid-auto-rows: minmax(10%, 90%); |
30 } | 31 } |
31 </style> | 32 </style> |
32 <script src="../../resources/check-layout.js"></script> | 33 <script src="../../resources/check-layout.js"></script> |
33 <body onload="checkLayout('.indefiniteSizeGrid');"> | 34 <body onload="checkLayout('.grid');"> |
34 <p>This test checks that percentages of indefinite sizes are treated as min-cont
ent (for the min track sizing function) or max-content (for the max track sizing
function).</p> | 35 <p>This test checks that percentages of indefinite sizes are treated as min-cont
ent (for the min track sizing function) or max-content (for the max track sizing
function).</p> |
35 <div style="position: relative;"> | 36 <div style="position: relative;"> |
36 <div class="indefiniteSizeGrid gridWithPercent" data-expected-width="30" dat
a-expected-height="20"> | 37 <div class="grid min-content gridWithPercent" data-expected-width="30" data-
expected-height="20"> |
37 <div class="firstRowFirstColumn">XXX<br>XXX</div> | 38 <div class="firstRowFirstColumn">XXX<br>XXX</div> |
38 </div> | 39 </div> |
39 </div> | 40 </div> |
40 <div style="position: relative;"> | 41 <div style="position: relative;"> |
41 <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax" data-expected-w
idth="30" data-expected-height="20"> | 42 <div class="grid min-content gridWithPercentInMinOfMinMax" data-expected-wid
th="30" data-expected-height="20"> |
42 <div class="firstRowFirstColumn">XXX</div> | 43 <div class="firstRowFirstColumn">XXX</div> |
43 <div class="firstRowFirstColumn">XX XX</div> | 44 <div class="firstRowFirstColumn">XX XX</div> |
44 </div> | 45 </div> |
45 </div> | 46 </div> |
46 <div style="position: relative;"> | 47 <div style="position: relative;"> |
47 <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax2" data-expected-
width="30" data-expected-height="20"> | 48 <div class="grid min-content gridWithPercentInMinOfMinMax2" data-expected-wi
dth="30" data-expected-height="20"> |
48 <div class="firstRowFirstColumn">XXX</div> | 49 <div class="firstRowFirstColumn">XXX</div> |
49 <div class="firstRowFirstColumn">XX XX</div> | 50 <div class="firstRowFirstColumn">XX XX</div> |
50 </div> | 51 </div> |
51 </div> | 52 </div> |
52 <div style="position: relative;"> | 53 <div style="position: relative;"> |
53 <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax" data-expected-w
idth="40" data-expected-height="20"> | 54 <div class="grid min-content gridWithPercentInMaxOfMinMax" data-expected-wid
th="40" data-expected-height="20"> |
54 <div class="firstRowFirstColumn">XXXX<br>X</div> | 55 <div class="firstRowFirstColumn">XXXX<br>X</div> |
55 </div> | 56 </div> |
56 </div> | 57 </div> |
57 <div style="position: relative;"> | 58 <div style="position: relative;"> |
58 <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax2" data-expected-
width="20" data-expected-height="20"> | 59 <div class="grid min-content gridWithPercentInMaxOfMinMax2" data-expected-wi
dth="20" data-expected-height="20"> |
59 <div class="firstRowFirstColumn">XXXX<br>X</div> | 60 <div class="firstRowFirstColumn">XXXX<br>X</div> |
60 </div> | 61 </div> |
61 </div> | 62 </div> |
62 <div style="position: relative;"> | 63 <div style="position: relative;"> |
63 <div class="indefiniteSizeGrid gridWithPercentsInMinMax" data-expected-width
="40" data-expected-height="40"> | 64 <div class="grid min-content gridWithPercentsInMinMax" data-expected-width="
40" data-expected-height="40"> |
64 <div class="firstRowFirstColumn">XXX<br>XX XX<br>XXXX</div> | 65 <div class="firstRowFirstColumn">XXX<br>XX XX<br>XXXX</div> |
65 </div> | 66 </div> |
66 </div> | 67 </div> |
67 </body> | 68 </body> |
OLD | NEW |