offsetTop-offsetLeft-nested-offsetParents.html (932B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://drafts.csswg.org/cssom-view-1/#dom-htmlelement-offsettop"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <style> 8 .square { 9 width: 10px; 10 height: 10px; 11 background-color: red; 12 } 13 #one { 14 position: absolute; 15 top: 10px; 16 left: 10px; 17 } 18 #two { 19 position: absolute; 20 top: 50px; 21 left: 50px; 22 } 23 span.square { 24 display: inline-block; 25 } 26 </style> 27 28 <div id=one class=square> 29 <div id=two class=square> 30 <div class=square></div> 31 <span class=square></span><span id=target></span> 32 </div> 33 </div> 34 35 <script> 36 test(() => { 37 assert_equals(target.offsetTop, 10, 'target.offsetTop'); 38 assert_equals(target.offsetLeft, 10, 'target.offsetLeft'); 39 }, 'Verifies that offsetTop and offsetLeft only go up one offsetParent when there are multiple nested offsetParents.'); 40 </script>