| 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 |