offsetTopLeft-empty-inline-offset.html (1545B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/cssom-view-1/#extensions-to-the-htmlelement-interface"> 3 <script src=/resources/testharness.js></script> 4 <script src=/resources/testharnessreport.js></script> 5 <style> 6 .container { 7 position: relative; 8 width: 8em; 9 height: 7em; 10 padding: 1em; 11 } 12 </style> 13 <div class="container" style="writing-mode:horizontal-tb;"> 14 offset 15 <br>offset<span class="target"></span><span>ref</span> 16 </div> 17 <div class="container" style="writing-mode:vertical-lr;"> 18 offset 19 <br>offset<span class="target"></span><span>ref</span> 20 </div> 21 <div class="container" style="writing-mode:vertical-rl;"> 22 offset 23 <br>offset<span class="target"></span><span>ref</span> 24 </div> 25 <div class="container" style="writing-mode:horizontal-tb; direction:rtl;"> 26 offset 27 <br>offset<span class="target"></span><span>ref</span> 28 </div> 29 <div class="container" style="writing-mode:vertical-lr; direction:rtl;"> 30 offset 31 <br>offset<span class="target"></span><span>ref</span> 32 </div> 33 <div class="container" style="writing-mode:vertical-rl; direction:rtl;"> 34 offset 35 <br>offset<span class="target"></span><span>ref</span> 36 </div> 37 <script> 38 var i = 0; 39 document.querySelectorAll('span.target').forEach((target) => { 40 var ref = target.nextSibling; 41 test(() => { 42 assert_equals(target.offsetLeft, ref.offsetLeft, 'offsetLeft'); 43 assert_equals(target.offsetTop, ref.offsetTop, 'offsetTop'); 44 }, 'offsetTop/Left of empty inline elements should work as if they were not empty: ' + i); 45 i++; 46 }); 47 </script>