OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
Julien - ping for review
2014/09/10 01:00:17
I couldn't spot what was different with the other
svillar
2014/09/10 15:03:09
The difference is that this test defines explicit
| |
2 <link href="resources/grid.css" rel="stylesheet"> | |
3 <style> | |
4 .indefiniteSizeGrid { | |
5 font: 10px/1 Ahem; | |
6 } | |
7 .gridWithPercent { | |
8 grid-template-columns: 25%; | |
9 grid-template-rows: 30%; | |
10 } | |
11 .gridWithPercentInMinOfMinMax { | |
12 grid-template-columns: minmax(20%, max-content); | |
13 grid-template-rows: minmax(100%, 15px); | |
14 } | |
15 .gridWithPercentInMinOfMinMax2 { | |
16 grid-template-columns: minmax(20%, 50px); | |
17 grid-template-rows: minmax(100%, max-content); | |
18 } | |
19 .gridWithPercentInMaxOfMinMax { | |
20 grid-template-columns: minmax(min-content, 25%); | |
21 grid-template-rows: minmax(0px, 1%); | |
22 } | |
23 .gridWithPercentInMaxOfMinMax2 { | |
24 grid-template-columns: minmax(20px, 25%); | |
25 grid-template-rows: minmax(min-content, 1%); | |
26 } | |
27 .gridWithPercentsInMinMax { | |
28 grid-template-columns: minmax(25%, 50%); | |
29 grid-template-rows: minmax(10%, 90%); | |
30 } | |
31 </style> | |
32 <script src="../../resources/check-layout.js"></script> | |
33 <body onload="checkLayout('.indefiniteSizeGrid');"> | |
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 <div style="position: relative;"> | |
36 <div class="indefiniteSizeGrid gridWithPercent" data-expected-width="30" dat a-expected-height="20"> | |
37 <div class="firstRowFirstColumn">XXX<br>XXX</div> | |
38 </div> | |
39 </div> | |
40 <div style="position: relative;"> | |
41 <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax" data-expected-w idth="30" data-expected-height="15"> | |
42 <div class="firstRowFirstColumn">XXX</div> | |
43 <div class="firstRowFirstColumn">XX XX</div> | |
44 </div> | |
45 </div> | |
46 <div style="position: relative;"> | |
47 <div class="indefiniteSizeGrid gridWithPercentInMinOfMinMax2" data-expected- width="30" data-expected-height="20"> | |
48 <div class="firstRowFirstColumn">XXX</div> | |
49 <div class="firstRowFirstColumn">XX XX</div> | |
50 </div> | |
51 </div> | |
52 <div style="position: relative;"> | |
53 <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax" data-expected-w idth="40" data-expected-height="20"> | |
54 <div class="firstRowFirstColumn">XXXX<br>X</div> | |
55 </div> | |
56 </div> | |
57 <div style="position: relative;"> | |
58 <div class="indefiniteSizeGrid gridWithPercentInMaxOfMinMax2" data-expected- width="20" data-expected-height="20"> | |
59 <div class="firstRowFirstColumn">XXXX<br>X</div> | |
60 </div> | |
61 </div> | |
62 <div style="position: relative;"> | |
63 <div class="indefiniteSizeGrid gridWithPercentsInMinMax" data-expected-width ="40" data-expected-height="40"> | |
64 <div class="firstRowFirstColumn">XXX<br>XX XX<br>XXXX</div> | |
65 </div> | |
66 </div> | |
67 </body> | |
OLD | NEW |