offsetTopLeft-inline.html (1873B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/cssom-view-1/#extensions-to-the-htmlelement-interface"> 4 <link rel="match" href="../reference/nothing.html"> 5 <style> 6 .container { 7 float: left; 8 width: 8em; 9 height: 7em; 10 padding: 1em; 11 color: red; 12 } 13 .correctionFluid { 14 position: absolute; 15 background: white; 16 17 /* Add some fluff to cover text ink-overflow. */ 18 outline:2px solid white; 19 } 20 </style> 21 <p>There should be nothing below.</p> 22 <div class="container" style="writing-mode:horizontal-tb;"> 23 <br><span class="child">FAIL</span> 24 </div> 25 <div class="container" style="writing-mode:vertical-lr;"> 26 <br><span class="child">FAIL</span> 27 </div> 28 <div class="container" style="writing-mode:vertical-rl;"> 29 <br><span class="child">FAIL</span> 30 </div> 31 <div class="container" style="writing-mode:horizontal-tb; direction:rtl;"> 32 <br><span class="child">FAIL</span> 33 </div> 34 <div class="container" style="writing-mode:vertical-lr; direction:rtl;"> 35 <br><span class="child">FAIL</span> 36 </div> 37 <div class="container" style="writing-mode:vertical-rl; direction:rtl;"> 38 <br><span class="child">FAIL</span> 39 </div> 40 <script> 41 // Create a white absolutely positioned box for each span.child 42 // element and cover it. 43 44 let elements = document.querySelectorAll("span.child"); 45 elements.forEach((element)=> { 46 let correctionFluid = document.createElement("div"); 47 correctionFluid.className = "correctionFluid"; 48 correctionFluid.style.left = element.offsetLeft + "px"; 49 correctionFluid.style.top = element.offsetTop + "px"; 50 correctionFluid.style.width = element.offsetWidth + "px"; 51 correctionFluid.style.height = element.offsetHeight + "px"; 52 document.body.appendChild(correctionFluid); 53 }); 54 </script>