| <!doctype html> |
| <meta charset=utf-8> |
| <title></title> |
| <script src=/resources/testharness.js></script> |
| <script src=/resources/testharnessreport.js></script> |
| <div id=log></div> |
| <div id="parent" style="overflow:scroll; height: 100px; position: relative"> |
| <div id="spacer" style="height: 200px"></div> |
| <div id="child"></div> |
| <div id="absolute-child" style="position: absolute; top: 41px; left: 43px"></div> |
| </div> |
| <script> |
| test(function() { |
| var child = document.getElementById("child"); |
| assert_equals(child.offsetTop, 200, "Child is after spacer"); |
| assert_equals(child.offsetLeft, 0, "Child is flush left"); |
| var absChild = document.getElementById("absolute-child"); |
| assert_equals(absChild.offsetTop, 41, "Abspos child is y-positioned"); |
| assert_equals(absChild.offsetLeft, 43, "Abspos child is x-positioned"); |
| }, "Basic functionality"); |
| |
| test(function() { |
| var parent = document.getElementById("parent"); |
| parent.scrollTop = 100; |
| var child = document.getElementById("child"); |
| assert_equals(child.offsetTop, 200, "Child is after spacer"); |
| assert_equals(child.offsetLeft, 0, "Child is flush left"); |
| var absChild = document.getElementById("absolute-child"); |
| assert_equals(absChild.offsetTop, 41, "Abspos child is y-positioned"); |
| assert_equals(absChild.offsetLeft, 43, "Abspos child is x-positioned"); |
| }, "Basic functionality in scrolled parent"); |
| |
| test(function() { |
| var child = document.getElementById("child"); |
| child.style.marginTop = "20px" |
| child.style.marginLeft = "100px"; |
| assert_equals(child.offsetTop, 220, "Child is after spacer and margin"); |
| assert_equals(child.offsetLeft, 100, "Child is 100px from left"); |
| var absChild = document.getElementById("absolute-child"); |
| absChild.style.marginTop = "20px" |
| absChild.style.marginLeft = "100px"; |
| assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin"); |
| assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin"); |
| }, "Margins on child"); |
| |
| test(function() { |
| var parent = document.getElementById("parent"); |
| parent.style.marginTop = "66px" |
| parent.style.marginLeft = "33px"; |
| var child = document.getElementById("child"); |
| assert_equals(child.offsetTop, 220, "Child is after spacer and margin"); |
| assert_equals(child.offsetLeft, 100, "Child is 100px from left"); |
| var absChild = document.getElementById("absolute-child"); |
| assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin"); |
| assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin"); |
| }, "Margins on child and parent"); |
| |
| test(function() { |
| var child = document.getElementById("child"); |
| child.style.borderTop = "13px solid green"; |
| child.style.borderLeft = "7px solid green"; |
| assert_equals(child.offsetTop, 220, "Child is after spacer and margin"); |
| assert_equals(child.offsetLeft, 100, "Child is 100px from left"); |
| var absChild = document.getElementById("absolute-child"); |
| absChild.style.borderTop = "13px solid green"; |
| absChild.style.borderLeft = "7px solid green"; |
| assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin"); |
| assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin"); |
| }, "Margins on child and parent, border on child"); |
| |
| test(function() { |
| var parent = document.getElementById("parent"); |
| parent.style.borderTop = "23px solid yellow"; |
| parent.style.borderLeft = "19px solid yellow"; |
| var child = document.getElementById("child"); |
| assert_equals(child.offsetTop, 220, "Child is after spacer and margin"); |
| assert_equals(child.offsetLeft, 100, "Child is 100px from left"); |
| var absChild = document.getElementById("absolute-child"); |
| assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin"); |
| assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin"); |
| }, "Margins on child and parent, border on child and parent"); |
| |
| |
| test(function() { |
| var child = document.getElementById("child"); |
| child.style.paddingTop = "31px"; |
| child.style.paddingLeft = "37px"; |
| assert_equals(child.offsetTop, 220, "Child is after spacer and margin"); |
| assert_equals(child.offsetLeft, 100, "Child is 100px from left"); |
| var absChild = document.getElementById("absolute-child"); |
| absChild.style.paddingTop = "31px"; |
| absChild.style.paddingLeft = "37px"; |
| assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin"); |
| assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin"); |
| }, "Margins on child and parent, border on child and parent, padding on child"); |
| |
| |
| test(function() { |
| var parent = document.getElementById("parent"); |
| parent.style.paddingTop = "31px"; |
| parent.style.paddingLeft = "37px"; |
| var child = document.getElementById("child"); |
| assert_equals(child.offsetTop, 251, "Child is after spacer and margin and parent padding"); |
| assert_equals(child.offsetLeft, 137, "Child is 100px + parent padding from left"); |
| var absChild = document.getElementById("absolute-child"); |
| // Padding on the parent does not affect the position of the absolute containing block. |
| assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin"); |
| assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin"); |
| }, "Margins on child and parent, border on child and parent, padding on child and parent"); |
| |
| </script> |