getClientRects-inline.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom-view/getClientRects-inline.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">

<link rel="help" href="https://drafts.csswg.org/cssom-view-1/#dom-element-getclientrects">

<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";

    var r = element.getClientRects()[0];

    correctionFluid.style.left = r.left + "px";

    correctionFluid.style.top = r.top + "px";

    correctionFluid.style.width = r.width + "px";

    correctionFluid.style.height = r.height + "px";

    document.body.appendChild(correctionFluid);

});

</script>