| <html> |
| <head> |
| <style type="text/css"> |
| /* Make sure the console and the description don't interfere with the rest of the layout. */ |
| #description { |
| position: absolute; |
| top: 0px; |
| } |
| |
| #console { |
| position: absolute; |
| top: 100px; |
| } |
| |
| #divMain1 { |
| border: 2px solid blue; |
| width: 300px; |
| height: 226px; |
| -webkit-flow-into: flow1; |
| } |
| |
| #divMain2 { |
| border: 2px solid blue; |
| width: 211px; |
| height: 470px; |
| padding-left: 5px; |
| margin: 5px; |
| margin-left: 10px; |
| left: 40px; |
| -webkit-flow-into: flow2; |
| } |
| |
| .divText { |
| border: 1px solid green; |
| color: green; |
| } |
| |
| #divText1 { |
| width: 200px; |
| height: 150px; |
| position: relative; |
| left: 30px; |
| top: 10px; |
| } |
| |
| #divText2_1 { |
| border-color: #009999; |
| color: #009999; |
| margin: 10px; |
| width: 180px; |
| height: 140px; |
| } |
| |
| #divText2_2 { |
| width: 203px; |
| height: 270px; |
| } |
| |
| #divText2_3 { |
| margin: 4px; |
| width: 192px; |
| height: 105px; |
| position: relative; |
| top: 115px; |
| color: #777700; |
| border-color: #777700; |
| } |
| |
| #absoluteSpan { |
| position: absolute; |
| } |
| |
| #span { |
| position: relative; |
| top: 115px; |
| left: 24; |
| color: black; |
| font-size: 12px; |
| margin-left: 4px; |
| padding: 1px; |
| border: 1px solid black; |
| } |
| |
| #image { |
| border: 1px dashed red; |
| width: 15px; |
| position: relative; |
| top: 124px; |
| margin-left: 54px; |
| } |
| |
| #dummy1 { |
| width: 100px; |
| height: 25px; |
| border: 1px solid black; |
| margin: 5px; |
| margin-left: 20px; |
| } |
| |
| .region1 { |
| -webkit-flow-from: flow1; |
| border: 1px solid red; |
| position: relative; |
| left: 59px; |
| top: 429px; |
| width: 304px; |
| height: 230px; |
| } |
| |
| .region2 { |
| -webkit-flow-from: flow2; |
| border: 1px solid red; |
| } |
| |
| #first_region2 { |
| position: relative; |
| left: 464px; |
| top: -140px; |
| width: 500px; |
| height: 160px; |
| } |
| |
| #second_region2 { |
| position: relative; |
| left: 424px; |
| top: -94px; |
| width: 330px; |
| height: 150px; |
| } |
| |
| #third_region2 { |
| position: relative; |
| left: 569px; |
| top: -66px; |
| width: 282px; |
| height: 195px; |
| } |
| |
| .grid { |
| position: absolute; |
| top: 700px; |
| width: 100px; |
| height: 100px; |
| border-right: 1px solid blue; |
| text-align: right; |
| font-size: 14px; |
| color: blue; |
| } |
| |
| .vgrid { |
| position: absolute; |
| left: 900px; |
| width: 100px; |
| height: 100px; |
| border-bottom: 1px solid blue; |
| text-align: bottom; |
| font-size: 14px; |
| color: blue; |
| } |
| |
| #grid1 { |
| left: 0px; |
| } |
| #grid2 { |
| left: 100px; |
| } |
| #grid3 { |
| left: 200px; |
| } |
| #grid4 { |
| left: 300px; |
| } |
| #grid5 { |
| left: 400px; |
| } |
| #grid6 { |
| left: 500px; |
| } |
| #grid7 { |
| left: 600px; |
| } |
| |
| #vgrid1 { |
| top: 0px; |
| } |
| #vgrid2 { |
| top: 100px; |
| } |
| #vgrid3 { |
| top: 200px; |
| } |
| #vgrid4 { |
| top: 300px; |
| } |
| #vgrid5 { |
| top: 400px; |
| } |
| #vgrid6 { |
| top: 500px; |
| } |
| #vgrid7 { |
| top: 600px; |
| } |
| #vgrid8 { |
| top: 700px; |
| border: none; |
| } |
| </style> |
| |
| <script src="../../../resources/js-test-pre.js"></script> |
| </head> |
| |
| <body id="body"> |
| <div id="divMain1"> |
| <div class="divText" id="divText1"></div> |
| </div> |
| |
| <div id="divMain2"> |
| <div class="dummy" id="dummy1"></div> |
| <div class="divText" id="divText2_1"></div> |
| <div class="divText" id="divText2_2"> |
| <div class="divText" id="divText2_3"></div> |
| <img id="image" src="resources/transparent.png"></input> |
| </div> |
| </div> |
| |
| <div class="region1"></div> |
| |
| <div class="region2" id="first_region2"></div> |
| <div class="region2" id="second_region2"></div> |
| <div class="region2" id="third_region2"></div> |
| |
| <div id="grid1" class="grid">100px</div> |
| <div id="grid2" class="grid">200px</div> |
| <div id="grid3" class="grid">300px</div> |
| <div id="grid4" class="grid">400px</div> |
| <div id="grid5" class="grid">500px</div> |
| <div id="grid6" class="grid">600px</div> |
| <div id="grid7" class="grid">700px</div> |
| |
| <div id="vgrid1" class="vgrid"></div> |
| <div id="vgrid2" class="vgrid">100px</div> |
| <div id="vgrid3" class="vgrid">200px</div> |
| <div id="vgrid4" class="vgrid">300px</div> |
| <div id="vgrid5" class="vgrid">400px</div> |
| <div id="vgrid6" class="vgrid">500px</div> |
| <div id="vgrid7" class="vgrid">600px</div> |
| <div id="vgrid8" class="vgrid">700px</div> |
| |
| <script> |
| description("Test offsetLeft and offsetTop in a named flow.") |
| |
| shouldBe("divText1.offsetParent", "document.body"); |
| shouldBe("divText1.offsetLeft", "100"); |
| shouldBe("divText1.offsetTop", "450"); |
| |
| shouldBe("divText2_1.offsetParent", "document.body"); |
| shouldBe("divText2_1.offsetLeft", "500"); |
| shouldBe("divText2_1.offsetTop", "150"); |
| |
| shouldBe("divText2_2.offsetParent", "document.body"); |
| shouldBe("divText2_2.offsetLeft", "450"); |
| shouldBe("divText2_2.offsetTop", "350"); |
| |
| shouldBe("divText2_3.offsetParent", "document.body"); |
| shouldBe("divText2_3.offsetLeft", "600"); |
| shouldBe("divText2_3.offsetTop", "500"); |
| |
| shouldBe("image.offsetParent", "document.body"); |
| shouldBe("image.offsetLeft", "650"); |
| shouldBe("image.offsetTop", "620"); |
| |
| if (window.testRunner) { |
| var allGraphicElements = document.querySelectorAll(".region1, .region2, .divText, .grid, .vgrid, .dummy, #span, #image"); |
| for (var i=0; i<allGraphicElements.length; i++) |
| allGraphicElements[i].style.display = "none"; |
| } |
| |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
