css/css-position/position-absolute-in-inline-002.html

<!doctype html>

<link rel="author" href="mailto:atotic@chromium.org">
<link rel="help" href="https://www.w3.org/TR/css-position-3/#def-cb">
<meta name="assert" content="split inline containing blocks are handled correctly.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  body {
    margin: 0;
  }
  #container-span {
    position: relative;
    outline: solid 1px gray;
  }
  #split {
    width: 10px;
    height: 10px;
  }
  #target {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,255,0,0.3);
  }
</style>
<!-- There should be a green rectangle spanning two "container span" lines  below -->
<span id="outer-span">
outer span
  <span id="container-span">
    container span start
    <div id="split"></div>
    <div id="target"></div>
    container span end
  </span>
outer span end
</span>
<script>
  test(_ => {
    let abs_bounds = document.querySelector("#target").getClientRects();
    let container_bounds = document.querySelector("#container-span").getClientRects();
    assert_equals(abs_bounds.length, 1);
    assert_equals(container_bounds.length, 3);
    assert_equals(abs_bounds[0].left, container_bounds[0].left, "left matches container");
    assert_equals(abs_bounds[0].top, container_bounds[0].top, "top matches container");
    assert_equals(abs_bounds[0].right, container_bounds[2].right, "right matches container");
    assert_equals(abs_bounds[0].bottom, container_bounds[2].bottom, "bottom matches container");
  }, "absolute inside inline container location should be correct.");
</script>