<!DOCTYPE html> <link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> <link rel="help" href="https://drafts.csswg.org/cssom-view-1/#extensions-to-the-htmlelement-interface"> <link rel="match" href="../reference/nothing.html"> <style> .container { float: left; width: 8em; height: 7em; padding: 1em; color: red; } .correctionFluid { position: absolute; background: white; /* Add some fluff to cover text ink-overflow. */ outline:2px solid white; } </style> <p>There should be nothing below.</p> <div class="container" style="writing-mode:horizontal-tb;"> <br><span class="child">FAIL</span> </div> <div class="container" style="writing-mode:vertical-lr;"> <br><span class="child">FAIL</span> </div> <div class="container" style="writing-mode:vertical-rl;"> <br><span class="child">FAIL</span> </div> <div class="container" style="writing-mode:horizontal-tb; direction:rtl;"> <br><span class="child">FAIL</span> </div> <div class="container" style="writing-mode:vertical-lr; direction:rtl;"> <br><span class="child">FAIL</span> </div> <div class="container" style="writing-mode:vertical-rl; direction:rtl;"> <br><span class="child">FAIL</span> </div> <script> // Create a white absolutely positioned box for each span.child // element and cover it. let elements = document.querySelectorAll("span.child"); elements.forEach((element)=> { let correctionFluid = document.createElement("div"); correctionFluid.className = "correctionFluid"; correctionFluid.style.left = element.offsetLeft + "px"; correctionFluid.style.top = element.offsetTop + "px"; correctionFluid.style.width = element.offsetWidth + "px"; correctionFluid.style.height = element.offsetHeight + "px"; document.body.appendChild(correctionFluid); }); </script>