offsetTopLeft-inline.html | Explore in Territory

<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="[email protected]">
<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>
chromium/third_party/blink/web_tests/external/wpt/css/cssom-view/offsetTopLeft-inline.html
