| <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 { |
| -webkit-flow-into: flow1; |
| border: 2px solid blue; |
| height: 150px; |
| margin: 10px; |
| padding: 5px; |
| } |
| |
| #divMain2 { |
| border: 2px solid blue; |
| height: 135px; |
| margin: 5px; |
| -webkit-flow-into: flow2; |
| } |
| |
| .divText { |
| border: 1px solid green; |
| color: green; |
| font-size: 14px; |
| } |
| |
| #divText1 { |
| width: 250px; |
| margin: 10px; |
| padding-left: 5px; |
| float: right; |
| } |
| |
| #divText2 { |
| width: 200px; |
| float: left; |
| margin: 10px; |
| } |
| |
| #region1 { |
| -webkit-flow-from: flow1; |
| border: 1px solid red; |
| position: relative; |
| left: 75px; |
| top: 264px; |
| width: 400px; |
| height: 180px; |
| } |
| |
| #region2 { |
| -webkit-flow-from: flow2; |
| border: 1px solid red; |
| position: relative; |
| left: 274px; |
| top: 292px; |
| width: 400px; |
| height: 150px; |
| } |
| |
| .grid { |
| position: absolute; |
| top: 750px; |
| 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="../js/resources/js-test-pre.js"></script> |
| |
| <script type="text/javascript"> |
| function writeOffsetInfo(selector) { |
| var divItems = document.querySelectorAll(selector); |
| |
| for (var i=0; i<divItems.length; i++) { |
| var divItem = divItems[i]; |
| var existingHTML = divItem.innerHTML; |
| var newHTML = existingHTML.replace("#offTop#", divItem.offsetTop); |
| newHTML = newHTML.replace("#offLeft#", divItem.offsetLeft); |
| if (divItem.offsetParent) |
| newHTML = newHTML.replace("#offParent#", divItem.offsetParent.tagName + "(" + divItem.offsetParent.id + ")"); |
| else |
| newHTML = newHTML.replace("#offParent#", "null"); |
| divItem.innerHTML = newHTML; |
| } |
| } |
| function myOnLoad() { |
| writeOffsetInfo(".divText"); |
| } |
| </script> |
| </head> |
| |
| <body id="body" onload = "myOnLoad();"> |
| |
| <div id="divMain1"> |
| <div class="divText" id="divText1">This is <b>divText1</b> (float right):<br/>- offsetParent is <b>#offParent#</b><br/>- offsetLeft is <b>#offLeft#</b><br/>- offsetTop is <b>#offTop#</b></div> |
| <span class="mySpan" style="color: blue;">This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div.</span> |
| </div> |
| |
| <div id="divMain2"> |
| <div class="divText" id="divText2">This is <b>divText2</b> (float left):<br/>- offsetParent is <b>#offParent#</b><br/>- offsetLeft is <b>#offLeft#</b><br/>- offsetTop is <b>#offTop#</b></div> |
| <span class="mySpan" style="color: blue;">This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div.</span> |
| </div> |
| |
| <div class="region" id="region1"></div> |
| <div class="region" id="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 with floats.") |
| |
| shouldBe("divText1.offsetParent", "document.body"); |
| shouldBe("divText1.offsetLeft", "200"); |
| shouldBe("divText1.offsetTop", "300"); |
| |
| shouldBe("divText2.offsetParent", "document.body"); |
| shouldBe("divText2.offsetLeft", "300"); |
| shouldBe("divText2.offsetTop", "500"); |
| |
| if (window.testRunner) { |
| var allGraphicElements = document.querySelectorAll(".region, .divText, .grid, .vgrid, .mySpan"); |
| for (var i=0; i<allGraphicElements.length; i++) |
| allGraphicElements[i].style.display = "none"; |
| } |
| |
| </script> |
| <script src="../js/resources/js-test-post.js"></script> |
| </body> |
| </html> |
