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: 50px 100px 150px 200px; | 7 grid-template-columns: 50px 100px 150px 200px; |
8 grid-template-rows: 50px 100px 150px 200px; | 8 grid-template-rows: 50px 100px 150px 200px; |
9 width: 500px; | 9 width: 500px; |
10 height: 500px; | 10 height: 500px; |
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
99 | 99 |
100 .offsetTopMinus60 { | 100 .offsetTopMinus60 { |
101 top: -60px; | 101 top: -60px; |
102 } | 102 } |
103 | 103 |
104 .offsetBottomMinus80 { | 104 .offsetBottomMinus80 { |
105 bottom: -80px; | 105 bottom: -80px; |
106 } | 106 } |
107 | 107 |
108 </style> | 108 </style> |
109 <script src="../../resources/check-layout.js"></script> | 109 <script src="../../resources/testharness.js"></script> |
| 110 <script src="../../resources/testharnessreport.js"></script> |
| 111 <script src="../../resources/check-layout-th.js"></script> |
110 <body onload="checkLayout('.grid')"> | 112 <body onload="checkLayout('.grid')"> |
| 113 <div id="log"></div> |
111 | 114 |
112 <p>This test checks the behavior of the absolutely positioned elements with a gr
id container as containing block.</p> | 115 <p>This test checks the behavior of the absolutely positioned elements with a gr
id container as containing block.</p> |
113 | 116 |
114 <div class="grid"> | 117 <div class="grid"> |
115 <div class="sizedToGridArea absolute autoRowAutoColumn" | 118 <div class="sizedToGridArea absolute autoRowAutoColumn" |
116 data-offset-x="15" data-offset-y="15" data-expected-width="530" data-exp
ected-height="530"> | 119 data-offset-x="15" data-offset-y="15" data-expected-width="530" data-exp
ected-height="530"> |
117 </div> | 120 </div> |
118 <div class="sizedToGridArea absolute firstRowFirstColumn" | 121 <div class="sizedToGridArea absolute firstRowFirstColumn" |
119 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-exp
ected-height="515"> | 122 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-exp
ected-height="515"> |
120 </div> | 123 </div> |
(...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
220 </div> | 223 </div> |
221 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows of
fsetLeft25 offsetBottom100" | 224 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows of
fsetLeft25 offsetBottom100" |
222 data-offset-x="190" data-offset-y="65" data-expected-width="365" dat
a-expected-height="350"> | 225 data-offset-x="190" data-offset-y="65" data-expected-width="365" dat
a-expected-height="350"> |
223 </div> | 226 </div> |
224 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Co
lumns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" | 227 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Co
lumns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" |
225 data-offset-x="145" data-offset-y="105" data-expected-width="350" da
ta-expected-height="350"> | 228 data-offset-x="145" data-offset-y="105" data-expected-width="350" da
ta-expected-height="350"> |
226 </div> | 229 </div> |
227 </div> | 230 </div> |
228 </div> | 231 </div> |
229 | 232 |
| 233 <div class="grid directionRTL"> |
| 234 <div class="sizedToGridArea absolute autoRowAutoColumn" |
| 235 data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-ex
pected-height="530"> |
| 236 </div> |
| 237 <div class="sizedToGridArea absolute firstRowFirstColumn" |
| 238 data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expe
cted-height="515"> |
| 239 </div> |
| 240 <div class="sizedToGridArea absolute secondRowFirstColumn" |
| 241 data-offset-x="0" data-offset-y="65" data-expected-width="515" data-expe
cted-height="465"> |
| 242 </div> |
| 243 <div class="sizedToGridArea absolute firstRowSecondColumn" |
| 244 data-offset-x="0" data-offset-y="15" data-expected-width="465" data-expe
cted-height="515"> |
| 245 </div> |
| 246 <div class="sizedToGridArea absolute secondRowSecondColumn" |
| 247 data-offset-x="0" data-offset-y="65" data-expected-width="465" data-expe
cted-height="465"> |
| 248 </div> |
| 249 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows" |
| 250 data-offset-x="0" data-offset-y="165" data-expected-width="365" data-exp
ected-height="350"> |
| 251 </div> |
| 252 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Column
s" |
| 253 data-offset-x="15" data-offset-y="165" data-expected-width="350" data-ex
pected-height="350"> |
| 254 </div> |
| 255 </div> |
| 256 |
| 257 <div class="grid directionRTL"> |
| 258 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows" |
| 259 data-offset-x="200" data-offset-y="65" data-expected-width="315" data-ex
pected-height="250"> |
| 260 </div> |
| 261 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2
Columns" |
| 262 data-offset-x="215" data-offset-y="65" data-expected-width="250" data-ex
pected-height="250"> |
| 263 </div> |
| 264 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" |
| 265 data-offset-x="350" data-offset-y="15" data-expected-width="165" data-ex
pected-height="165"> |
| 266 </div> |
| 267 <div class="sizedToGridArea absolute endSecondRowEndFirstColumn" |
| 268 data-offset-x="450" data-offset-y="15" data-expected-width="65" data-exp
ected-height="165"> |
| 269 </div> |
| 270 <div class="sizedToGridArea absolute endFirstRowEndSecondColumn" |
| 271 data-offset-x="350" data-offset-y="15" data-expected-width="165" data-ex
pected-height="65"> |
| 272 </div> |
| 273 <div class="sizedToGridArea absolute endFirstRowEndFirstColumn" |
| 274 data-offset-x="450" data-offset-y="15" data-expected-width="65" data-exp
ected-height="65"> |
| 275 </div> |
| 276 </div> |
| 277 |
| 278 <div class="grid directionRTL"> |
| 279 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn" |
| 280 data-offset-x="465" data-offset-y="15" data-expected-width="50" data-exp
ected-height="50"> |
| 281 </div> |
| 282 <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn" |
| 283 data-offset-x="465" data-offset-y="65" data-expected-width="50" data-exp
ected-height="100"> |
| 284 </div> |
| 285 <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn" |
| 286 data-offset-x="365" data-offset-y="15" data-expected-width="100" data-ex
pected-height="50"> |
| 287 </div> |
| 288 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" |
| 289 data-offset-x="365" data-offset-y="65" data-expected-width="100" data-ex
pected-height="100"> |
| 290 </div> |
| 291 <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Row
s2Columns" |
| 292 data-offset-x="15" data-offset-y="165" data-expected-width="350" data-ex
pected-height="350"> |
| 293 </div> |
| 294 <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Row
s" |
| 295 data-offset-x="215" data-offset-y="165" data-expected-width="150" data-e
xpected-height="350"> |
| 296 </div> |
| 297 </div> |
| 298 |
230 </body> | 299 </body> |
231 </html> | 300 </html> |
OLD | NEW |