offsetTopLeftInScrollableParent.html (5560B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title></title> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <div id=log></div> 7 <div id="parent" style="overflow:scroll; height: 100px; position: relative"> 8 <div id="spacer" style="height: 200px"></div> 9 <div id="child"></div> 10 <div id="absolute-child" style="position: absolute; top: 41px; left: 43px"></div> 11 </div> 12 <script> 13 test(function() { 14 var child = document.getElementById("child"); 15 assert_equals(child.offsetTop, 200, "Child is after spacer"); 16 assert_equals(child.offsetLeft, 0, "Child is flush left"); 17 var absChild = document.getElementById("absolute-child"); 18 assert_equals(absChild.offsetTop, 41, "Abspos child is y-positioned"); 19 assert_equals(absChild.offsetLeft, 43, "Abspos child is x-positioned"); 20 }, "Basic functionality"); 21 22 test(function() { 23 var parent = document.getElementById("parent"); 24 parent.scrollTop = 100; 25 var child = document.getElementById("child"); 26 assert_equals(child.offsetTop, 200, "Child is after spacer"); 27 assert_equals(child.offsetLeft, 0, "Child is flush left"); 28 var absChild = document.getElementById("absolute-child"); 29 assert_equals(absChild.offsetTop, 41, "Abspos child is y-positioned"); 30 assert_equals(absChild.offsetLeft, 43, "Abspos child is x-positioned"); 31 }, "Basic functionality in scrolled parent"); 32 33 test(function() { 34 var child = document.getElementById("child"); 35 child.style.marginTop = "20px" 36 child.style.marginLeft = "100px"; 37 assert_equals(child.offsetTop, 220, "Child is after spacer and margin"); 38 assert_equals(child.offsetLeft, 100, "Child is 100px from left"); 39 var absChild = document.getElementById("absolute-child"); 40 absChild.style.marginTop = "20px" 41 absChild.style.marginLeft = "100px"; 42 assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin"); 43 assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin"); 44 }, "Margins on child"); 45 46 test(function() { 47 var parent = document.getElementById("parent"); 48 parent.style.marginTop = "66px" 49 parent.style.marginLeft = "33px"; 50 var child = document.getElementById("child"); 51 assert_equals(child.offsetTop, 220, "Child is after spacer and margin"); 52 assert_equals(child.offsetLeft, 100, "Child is 100px from left"); 53 var absChild = document.getElementById("absolute-child"); 54 assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin"); 55 assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin"); 56 }, "Margins on child and parent"); 57 58 test(function() { 59 var child = document.getElementById("child"); 60 child.style.borderTop = "13px solid green"; 61 child.style.borderLeft = "7px solid green"; 62 assert_equals(child.offsetTop, 220, "Child is after spacer and margin"); 63 assert_equals(child.offsetLeft, 100, "Child is 100px from left"); 64 var absChild = document.getElementById("absolute-child"); 65 absChild.style.borderTop = "13px solid green"; 66 absChild.style.borderLeft = "7px solid green"; 67 assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin"); 68 assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin"); 69 }, "Margins on child and parent, border on child"); 70 71 test(function() { 72 var parent = document.getElementById("parent"); 73 parent.style.borderTop = "23px solid yellow"; 74 parent.style.borderLeft = "19px solid yellow"; 75 var child = document.getElementById("child"); 76 assert_equals(child.offsetTop, 220, "Child is after spacer and margin"); 77 assert_equals(child.offsetLeft, 100, "Child is 100px from left"); 78 var absChild = document.getElementById("absolute-child"); 79 assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin"); 80 assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin"); 81 }, "Margins on child and parent, border on child and parent"); 82 83 84 test(function() { 85 var child = document.getElementById("child"); 86 child.style.paddingTop = "31px"; 87 child.style.paddingLeft = "37px"; 88 assert_equals(child.offsetTop, 220, "Child is after spacer and margin"); 89 assert_equals(child.offsetLeft, 100, "Child is 100px from left"); 90 var absChild = document.getElementById("absolute-child"); 91 absChild.style.paddingTop = "31px"; 92 absChild.style.paddingLeft = "37px"; 93 assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin"); 94 assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin"); 95 }, "Margins on child and parent, border on child and parent, padding on child"); 96 97 98 test(function() { 99 var parent = document.getElementById("parent"); 100 parent.style.paddingTop = "31px"; 101 parent.style.paddingLeft = "37px"; 102 var child = document.getElementById("child"); 103 assert_equals(child.offsetTop, 251, "Child is after spacer and margin and parent padding"); 104 assert_equals(child.offsetLeft, 137, "Child is 100px + parent padding from left"); 105 var absChild = document.getElementById("absolute-child"); 106 // Padding on the parent does not affect the position of the absolute containing block. 107 assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin"); 108 assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin"); 109 }, "Margins on child and parent, border on child and parent, padding on child and parent"); 110 111 </script>