OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <link href="resources/grid.css" rel="stylesheet"> | |
3 <style> | |
4 | |
5 .wrapper { | |
6 position: relative; | |
7 width: 100px; | |
8 height: 100px; | |
9 } | |
10 | |
11 .grid { | |
12 position: absolute; | |
13 font: 10px/1 Ahem; | |
14 } | |
15 | |
16 .topBottomLeftRight { | |
17 top: 0; | |
18 bottom: 0; | |
19 left: 0; | |
20 right: 0; | |
21 } | |
22 | |
23 .oneRowOneColumn { | |
24 grid-template-rows: 100%; | |
25 grid-template-columns: 100%; | |
26 } | |
27 | |
28 .twoRowsTwoColumns { | |
29 grid-template-rows: 25% 75%; | |
30 grid-template-columns: 60% 40%; | |
31 } | |
32 | |
33 </style> | |
34 <script src="../../resources/testharness.js"></script> | |
35 <script src="../../resources/testharnessreport.js"></script> | |
36 <script src="../../resources/check-layout-th.js"></script> | |
37 <body onload="checkLayout('.grid')"> | |
38 <div id="log"></div> | |
39 | |
40 <p>This test checks that percentage tracks are properly resolved for absolute po
sitioned grid containers.</p> | |
41 | |
42 | |
43 <div class="wrapper"> | |
44 <div class="grid oneRowOneColumn"> | |
45 <div class="firstRowFirstColumn" | |
46 data-offset-x="0" data-offset-y="0" data-expected-width="30" data-ex
pected-height="10"> | |
47 XXX | |
48 </div> | |
49 </div> | |
50 </div> | |
51 | |
52 <div class="wrapper"> | |
53 <div class="grid oneRowOneColumn topBottomLeftRight"> | |
54 <div class="firstRowFirstColumn" | |
55 data-offset-x="0" data-offset-y="0" data-expected-width="100" data-e
xpected-height="100"> | |
56 XXX | |
57 </div> | |
58 </div> | |
59 </div> | |
60 | |
61 <div class="wrapper"> | |
62 <div class="grid twoRowsTwoColumns"> | |
63 <div class="firstRowFirstColumn" | |
64 data-offset-x="0" data-offset-y="0" data-expected-width="30" data-ex
pected-height="10"> | |
65 XXX | |
66 </div> | |
67 <div class="firstRowSecondColumn" | |
68 data-offset-x="30" data-offset-y="0" data-expected-width="30" data-e
xpected-height="10"> | |
69 XXX | |
70 </div> | |
71 <div class="secondRowFirstColumn" | |
72 data-offset-x="0" data-offset-y="10" data-expected-width="30" data-e
xpected-height="10"> | |
73 XXX | |
74 </div> | |
75 <div class="secondRowSecondColumn" | |
76 data-offset-x="30" data-offset-y="10" data-expected-width="30" data-
expected-height="10"> | |
77 XXX | |
78 </div> | |
79 </div> | |
80 </div> | |
81 | |
82 <div class="wrapper"> | |
83 <div class="grid twoRowsTwoColumns topBottomLeftRight"> | |
84 <div class="firstRowFirstColumn" | |
85 data-offset-x="0" data-offset-y="0" data-expected-width="60" data-ex
pected-height="25"> | |
86 XXX | |
87 </div> | |
88 <div class="firstRowSecondColumn" | |
89 data-offset-x="60" data-offset-y="0" data-expected-width="40" data-e
xpected-height="25"> | |
90 XXX | |
91 </div> | |
92 <div class="secondRowFirstColumn" | |
93 data-offset-x="0" data-offset-y="25" data-expected-width="60" data-e
xpected-height="75"> | |
94 XXX | |
95 </div> | |
96 <div class="secondRowSecondColumn" | |
97 data-offset-x="60" data-offset-y="25" data-expected-width="40" data-
expected-height="75"> | |
98 XXX | |
99 </div> | |
100 </div> | |
101 </div> | |
102 | |
103 </body> | |
OLD | NEW |