OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <link href="resources/grid.css" rel="stylesheet"> | 3 <link href="resources/grid.css" rel="stylesheet"> |
4 <style> | 4 <style> |
5 | 5 |
6 .grid { | 6 .grid { |
7 grid-template-columns: 100px 200px; | 7 grid-template-columns: 100px 200px; |
8 grid-template-rows: 50px 150px; | 8 grid-template-rows: 50px 150px; |
9 width: 100%; | 9 width: 100%; |
10 height: 100%; | 10 height: 100%; |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
53 <script src="../../resources/testharnessreport.js"></script> | 53 <script src="../../resources/testharnessreport.js"></script> |
54 <script src="../../resources/check-layout-th.js"></script> | 54 <script src="../../resources/check-layout-th.js"></script> |
55 <body onload="checkLayout('.grid')"> | 55 <body onload="checkLayout('.grid')"> |
56 <div id="log"></div> | 56 <div id="log"></div> |
57 | 57 |
58 <p>This test checks the different size options for absolutely positioned grid it
ems.</p> | 58 <p>This test checks the different size options for absolutely positioned grid it
ems.</p> |
59 | 59 |
60 <div class="unconstrainedContainer"> | 60 <div class="unconstrainedContainer"> |
61 <div class="grid"> | 61 <div class="grid"> |
62 <div class="absolute autoRowAutoColumn sizedToGridArea" | 62 <div class="absolute autoRowAutoColumn sizedToGridArea" |
63 data-offset-x="15" data-offset-y="15" data-expected-width="1030" dat
a-expected-height="1030"> | 63 data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-
expected-height="1030"> |
64 </div> | 64 </div> |
65 <div class="absolute secondRowSecondColumn sizedToGridArea" | 65 <div class="absolute secondRowSecondColumn sizedToGridArea" |
66 data-offset-x="115" data-offset-y="65" data-expected-width="915" dat
a-expected-height="965"> | 66 data-offset-x="115" data-offset-y="65" data-expected-width="915" dat
a-expected-height="965"> |
67 </div> | 67 </div> |
68 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" | 68 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" |
69 data-offset-x="15" data-offset-y="15" data-expected-width="100" data
-expected-height="50"> | 69 data-offset-x="15" data-offset-y="15" data-expected-width="100" data
-expected-height="50"> |
70 </div> | 70 </div> |
71 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" | 71 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" |
72 data-offset-x="15" data-offset-y="15" data-expected-width="315" data
-expected-height="215"> | 72 data-offset-x="0" data-offset-y="0" data-expected-width="315" data-e
xpected-height="215"> |
73 </div> | 73 </div> |
74 </div> | 74 </div> |
75 </div> | 75 </div> |
76 | 76 |
77 <div class="unconstrainedContainer"> | 77 <div class="unconstrainedContainer"> |
78 <div class="grid"> | 78 <div class="grid"> |
79 <div class="absolute autoRowAutoColumn lengthSize" | 79 <div class="absolute autoRowAutoColumn lengthSize" |
80 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-
expected-height="20"> | 80 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-ex
pected-height="20"> |
81 </div> | 81 </div> |
82 <div class="absolute secondRowSecondColumn lengthSize" | 82 <div class="absolute secondRowSecondColumn lengthSize" |
83 data-offset-x="115" data-offset-y="65" data-expected-width="50" data
-expected-height="20"> | 83 data-offset-x="115" data-offset-y="65" data-expected-width="50" data
-expected-height="20"> |
84 </div> | 84 </div> |
85 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" | 85 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" |
86 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-
expected-height="20"> | 86 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-
expected-height="20"> |
87 </div> | 87 </div> |
88 <div class="absolute endSecondRowEndSecondColumn lengthSize" | 88 <div class="absolute endSecondRowEndSecondColumn lengthSize" |
89 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-
expected-height="20"> | 89 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-ex
pected-height="20"> |
90 </div> | 90 </div> |
91 </div> | 91 </div> |
92 </div> | 92 </div> |
93 | 93 |
94 <div class="unconstrainedContainer"> | 94 <div class="unconstrainedContainer"> |
95 <div class="grid"> | 95 <div class="grid"> |
96 <div class="absolute autoRowAutoColumn percentageSize" | 96 <div class="absolute autoRowAutoColumn percentageSize" |
97 data-offset-x="15" data-offset-y="15" data-expected-width="515" data
-expected-height="206"> | 97 data-offset-x="0" data-offset-y="0" data-expected-width="515" data-e
xpected-height="206"> |
98 </div> | 98 </div> |
99 <div class="absolute secondRowSecondColumn percentageSize" | 99 <div class="absolute secondRowSecondColumn percentageSize" |
100 data-offset-x="115" data-offset-y="65" data-expected-width="457.5" d
ata-expected-height="193"> | 100 data-offset-x="115" data-offset-y="65" data-expected-width="457.5" d
ata-expected-height="193"> |
101 </div> | 101 </div> |
102 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" | 102 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" |
103 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-
expected-height="10"> | 103 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-
expected-height="10"> |
104 </div> | 104 </div> |
105 <div class="absolute endSecondRowEndSecondColumn percentageSize" | 105 <div class="absolute endSecondRowEndSecondColumn percentageSize" |
106 data-offset-x="15" data-offset-y="15" data-expected-width="157.5" da
ta-expected-height="43"> | 106 data-offset-x="0" data-offset-y="0" data-expected-width="157.5" data
-expected-height="43"> |
107 </div> | 107 </div> |
108 </div> | 108 </div> |
109 </div> | 109 </div> |
110 | 110 |
111 <div class="unconstrainedContainer"> | 111 <div class="unconstrainedContainer"> |
112 <div class="grid"> | 112 <div class="grid"> |
113 <div class="absolute autoRowAutoColumn offsets" | 113 <div class="absolute autoRowAutoColumn offsets" |
114 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data
-expected-height="995"> | 114 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data
-expected-height="995"> |
115 </div> | 115 </div> |
116 <div class="absolute secondRowSecondColumn offsets" | 116 <div class="absolute secondRowSecondColumn offsets" |
117 data-offset-x="120" data-offset-y="80" data-expected-width="900" dat
a-expected-height="930"> | 117 data-offset-x="120" data-offset-y="80" data-expected-width="900" dat
a-expected-height="930"> |
118 </div> | 118 </div> |
119 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" | 119 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" |
120 data-offset-x="20" data-offset-y="30" data-expected-width="85" data-
expected-height="15"> | 120 data-offset-x="20" data-offset-y="30" data-expected-width="85" data-
expected-height="15"> |
121 </div> | 121 </div> |
122 <div class="absolute endSecondRowEndSecondColumn offsets" | 122 <div class="absolute endSecondRowEndSecondColumn offsets" |
123 data-offset-x="5" data-offset-y="15" data-expected-width="300" data-
expected-height="180"> | 123 data-offset-x="5" data-offset-y="15" data-expected-width="300" data-
expected-height="180"> |
124 </div> | 124 </div> |
125 </div> | 125 </div> |
126 </div> | 126 </div> |
127 | 127 |
128 <div class="unconstrainedContainer"> | 128 <div class="unconstrainedContainer"> |
129 <div class="grid directionRTL"> | 129 <div class="grid directionRTL"> |
130 <div class="absolute autoRowAutoColumn sizedToGridArea" | 130 <div class="absolute autoRowAutoColumn sizedToGridArea" |
131 data-offset-x="-15" data-offset-y="15" data-expected-width="1030" da
ta-expected-height="1030"> | 131 data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-
expected-height="1030"> |
132 </div> | 132 </div> |
133 <div class="absolute secondRowSecondColumn sizedToGridArea" | 133 <div class="absolute secondRowSecondColumn sizedToGridArea" |
134 data-offset-x="0" data-offset-y="65" data-expected-width="915" data-
expected-height="965"> | 134 data-offset-x="0" data-offset-y="65" data-expected-width="915" data-
expected-height="965"> |
135 </div> | 135 </div> |
136 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" | 136 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" |
137 data-offset-x="915" data-offset-y="15" data-expected-width="100" dat
a-expected-height="50"> | 137 data-offset-x="915" data-offset-y="15" data-expected-width="100" dat
a-expected-height="50"> |
138 </div> | 138 </div> |
139 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" | 139 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" |
140 data-offset-x="700" data-offset-y="15" data-expected-width="315" dat
a-expected-height="215"> | 140 data-offset-x="715" data-offset-y="0" data-expected-width="315" data
-expected-height="215"> |
141 </div> | 141 </div> |
142 </div> | 142 </div> |
143 </div> | 143 </div> |
144 | 144 |
145 <div class="unconstrainedContainer"> | 145 <div class="unconstrainedContainer"> |
146 <div class="grid directionRTL"> | 146 <div class="grid directionRTL"> |
147 <div class="absolute autoRowAutoColumn lengthSize" | 147 <div class="absolute autoRowAutoColumn lengthSize" |
148 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="20"> | 148 data-offset-x="980" data-offset-y="0" data-expected-width="50" data-
expected-height="20"> |
149 </div> | 149 </div> |
150 <div class="absolute secondRowSecondColumn lengthSize" | 150 <div class="absolute secondRowSecondColumn lengthSize" |
151 data-offset-x="865" data-offset-y="65" data-expected-width="50" data
-expected-height="20"> | 151 data-offset-x="865" data-offset-y="65" data-expected-width="50" data
-expected-height="20"> |
152 </div> | 152 </div> |
153 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" | 153 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" |
154 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="20"> | 154 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="20"> |
155 </div> | 155 </div> |
156 <div class="absolute endSecondRowEndSecondColumn lengthSize" | 156 <div class="absolute endSecondRowEndSecondColumn lengthSize" |
157 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="20"> | 157 data-offset-x="980" data-offset-y="0" data-expected-width="50" data-
expected-height="20"> |
158 </div> | 158 </div> |
159 </div> | 159 </div> |
160 </div> | 160 </div> |
161 | 161 |
162 <div class="unconstrainedContainer"> | 162 <div class="unconstrainedContainer"> |
163 <div class="grid directionRTL"> | 163 <div class="grid directionRTL"> |
164 <div class="absolute autoRowAutoColumn percentageSize" | 164 <div class="absolute autoRowAutoColumn percentageSize" |
165 data-offset-x="500" data-offset-y="15" data-expected-width="515" dat
a-expected-height="206"> | 165 data-offset-x="515" data-offset-y="0" data-expected-width="515" data
-expected-height="206"> |
166 </div> | 166 </div> |
167 <div class="absolute secondRowSecondColumn percentageSize" | 167 <div class="absolute secondRowSecondColumn percentageSize" |
168 data-offset-x="457.5" data-offset-y="65" data-expected-width="457.5"
data-expected-height="193"> | 168 data-offset-x="457.5" data-offset-y="65" data-expected-width="457.5"
data-expected-height="193"> |
169 </div> | 169 </div> |
170 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" | 170 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" |
171 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="10"> | 171 data-offset-x="965" data-offset-y="15" data-expected-width="50" data
-expected-height="10"> |
172 </div> | 172 </div> |
173 <div class="absolute endSecondRowEndSecondColumn percentageSize" | 173 <div class="absolute endSecondRowEndSecondColumn percentageSize" |
174 data-offset-x="858" data-offset-y="15" data-expected-width="157.5" d
ata-expected-height="43"> | 174 data-offset-x="873" data-offset-y="0" data-expected-width="157.5" da
ta-expected-height="43"> |
175 </div> | 175 </div> |
176 </div> | 176 </div> |
177 </div> | 177 </div> |
178 | 178 |
179 <div class="unconstrainedContainer"> | 179 <div class="unconstrainedContainer"> |
180 <div class="grid directionRTL"> | 180 <div class="grid directionRTL"> |
181 <div class="absolute autoRowAutoColumn offsets" | 181 <div class="absolute autoRowAutoColumn offsets" |
182 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data
-expected-height="995"> | 182 data-offset-x="5" data-offset-y="15" data-expected-width="1015" data
-expected-height="995"> |
183 </div> | 183 </div> |
184 <div class="absolute secondRowSecondColumn offsets" | 184 <div class="absolute secondRowSecondColumn offsets" |
185 data-offset-x="5" data-offset-y="80" data-expected-width="900" data-
expected-height="930"> | 185 data-offset-x="5" data-offset-y="80" data-expected-width="900" data-
expected-height="930"> |
186 </div> | 186 </div> |
187 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" | 187 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" |
188 data-offset-x="920" data-offset-y="30" data-expected-width="85" data
-expected-height="15"> | 188 data-offset-x="920" data-offset-y="30" data-expected-width="85" data
-expected-height="15"> |
189 </div> | 189 </div> |
190 <div class="absolute endSecondRowEndSecondColumn offsets" | 190 <div class="absolute endSecondRowEndSecondColumn offsets" |
191 data-offset-x="720" data-offset-y="15" data-expected-width="300" dat
a-expected-height="180"> | 191 data-offset-x="720" data-offset-y="15" data-expected-width="300" dat
a-expected-height="180"> |
192 </div> | 192 </div> |
193 </div> | 193 </div> |
194 </div> | 194 </div> |
195 | 195 |
196 </body> | 196 </body> |
OLD | NEW |