OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <link href="resources/grid.css" rel="stylesheet"> | |
3 <link href="resources/grid-alignment.css" rel="stylesheet"> | |
4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet"> | |
5 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet"> | |
6 <style> | |
7 body { | |
8 margin: 0; | |
9 } | |
10 | |
11 .container { | |
12 position: relative; | |
13 } | |
14 | |
15 .grid { | |
16 font: 10px/1 Ahem; | |
17 grid-template-columns: 100px 25%; | |
18 grid-template-rows: 50% 150px; | |
19 } | |
20 .item { | |
21 width: 100%; | |
22 height: 100%; | |
23 } | |
svillar
2016/06/02 14:39:40
Do we really need this? We stretch by default.
jfernandez
2016/06/02 21:39:25
Yes, we need it because we don't allow (yet) stret
| |
24 </style> | |
25 <script src="../../resources/testharness.js"></script> | |
26 <script src="../../resources/testharnessreport.js"></script> | |
27 <script src="../../resources/check-layout-th.js"></script> | |
28 <body onload="checkLayout('.grid')"> | |
29 <div id="log"></div> | |
30 <p>This test checks that grid tracks are correctly sized when using percentage l engths and orthogonal flows.</p> | |
31 | |
32 <p>HORIZONTAL-TB container with VERTICAL-LR items.</p> | |
33 <div class="container"> | |
34 <div class="grid itemsStart contentStart fit-content" data-expected-width="1 20" data-expected-height="260"> | |
35 <div class="item firstRowFirstColumn verticalLR" data-offset-x="0" da ta-offset-y="0" data-expected-width="100" data-expected-height="110">X X X</div > | |
36 <div class="item firstRowSecondColumn verticalLR" data-offset-x="100" d ata-offset-y="0" data-expected-width="20" data-expected-height="110">X X X X X X</div> | |
37 <div class="item secondRowFirstColumn verticalLR" data-offset-x="0" da ta-offset-y="110" data-expected-width="100" data-expected-height="150">X X X X X X</div> | |
38 <div class="item secondRowSecondColumn verticalLR" data-offset-x="100" d ata-offset-y="110" data-expected-width="20" data-expected-height="150">X X X X X X X X X X X X</div> | |
39 </div> | |
40 </div> | |
41 | |
42 <p>HORIZONTAL-TB container with VERTICAL-RL items.</p> | |
43 <div class="container"> | |
44 <div class="grid itemsStart contentStart fit-content" data-expected-width="1 20" data-expected-height="260"> | |
45 <div class="item firstRowFirstColumn verticalRL" data-offset-x="0" da ta-offset-y="0" data-expected-width="100" data-expected-height="110">X X X</div > | |
46 <div class="item firstRowSecondColumn verticalRL" data-offset-x="100" d ata-offset-y="0" data-expected-width="20" data-expected-height="110">X X X X X X</div> | |
47 <div class="item secondRowFirstColumn verticalRL" data-offset-x="0" da ta-offset-y="110" data-expected-width="100" data-expected-height="150">X X X X X X</div> | |
48 <div class="item secondRowSecondColumn verticalRL" data-offset-x="100" d ata-offset-y="110" data-expected-width="20" data-expected-height="150">X X X X X X X X X X X X</div> | |
49 </div> | |
50 </div> | |
51 | |
52 <p>VERTICAL-LR container with HORIZONTAL-TB items.</p> | |
53 <div class="container"> | |
54 <div class="grid itemsStart contentStart verticalLR fit-content" data-expect ed-width="260" data-expected-height="120"> | |
55 <div class="item firstRowFirstColumn horizontalTB" data-offset-x="0" data-offset-y="0" data-expected-width="110" data-expected-height="100">X X X</ div> | |
56 <div class="item firstRowSecondColumn horizontalTB" data-offset-x="0" d ata-offset-y="100" data-expected-width="110" data-expected-height="20">X X X X X X</div> | |
57 <div class="item secondRowFirstColumn horizontalTB" data-offset-x="110" data-offset-y="0" data-expected-width="150" data-expected-height="100">X X X X X X</div> | |
58 <div class="item secondRowSecondColumn horizontalTB" data-offset-x="110" data-offset-y="100" data-expected-width="150" data-expected-height="20">X X X X X X X X X X X X</div> | |
59 </div> | |
60 </div> | |
61 | |
62 <p>VERTICAL-RL container with HORIZONTAL-TB items.</p> | |
63 <div class="container"> | |
64 <div class="grid itemsStart contentStart verticalRL fit-content" data-expect ed-width="260" data-expected-height="120"> | |
65 <div class="item firstRowFirstColumn horizontalTB" data-offset-x="150" data-offset-y="0" data-expected-width="110" data-expected-height="100">X X X</ div> | |
66 <div class="item firstRowSecondColumn horizontalTB" data-offset-x="150" data-offset-y="100" data-expected-width="110" data-expected-height="20">X X X X X X</div> | |
67 <div class="item secondRowFirstColumn horizontalTB" data-offset-x="0" d ata-offset-y="0" data-expected-width="150" data-expected-height="100">X X X X X X</div> | |
68 <div class="item secondRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="150" data-expected-height="20">X X X X X X X X X X X X</div> | |
69 </div> | |
70 </div> | |
71 </body> | |
OLD | NEW |