offsetTopLeft-border-box.html (1688B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlelement-interface"> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <style> 7 8 .container { 9 position: relative; 10 font: 20px/1 Ahem; 11 width: 150px; 12 height: 100px; 13 padding: 2px 10px; 14 border-width: 3px 6px; 15 border-style: solid; 16 box-sizing: border-box; 17 } 18 19 .target { background: grey; } 20 .hl { writing-mode:horizontal-tb; } 21 .vlr { writing-mode:vertical-lr; } 22 </style> 23 <div id=tests> 24 <div class="container hl"> 25 <span class="target">x</span> 26 </div> 27 <div class="container vlr"> 28 <span class="target">x</span> 29 </div> 30 <div class="container hl"> 31 <div class="target">x</div> 32 </div> 33 <div class="container vlr"> 34 <div class="target">x</div> 35 </div> 36 </div> 37 <script> 38 setup({explicit_done: true}); 39 onload = () => { 40 // Clone the above tests for the following 'display' types: 41 let display = ['inline-block', 'grid', 'inline-grid', 'flex', 'inline-flex', 'flow-root' ]; 42 let tests = document.querySelector('#tests'); 43 display.forEach((display) => { 44 let t = tests.cloneNode(true); 45 [...t.children].forEach((child) => { 46 child.setAttribute("style", "display:"+display); 47 }); 48 document.body.appendChild(t); 49 }); 50 // Check that all of them return an offset relative the padding edge. 51 var i = 0; 52 document.querySelectorAll('.target').forEach((target) => { 53 test(() => { 54 assert_equals(target.offsetLeft, 10, 'offsetLeft'); 55 assert_equals(target.offsetTop, 2, 'offsetTop'); 56 }, 'container: ' + i); 57 i++; 58 }); 59 done(); 60 }; 61 </script>