css/css-position/position-absolute-dynamic-containing-block.html

<!DOCTYPE html>
<title>CSS Position: position:absolute dynamic containing block</title>
<link rel="author" title="mailto:atotic@google.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://drafts.csswg.org/css-position-3/#def-cb">
<meta name="assert" content="Tests changes in containing block for out-of-flow positioned descendants.">
<style>

#outer {
  width: 400px;
  height: 300px;
  outline: black solid 1px;
}
#intermediate {
  width: 300px;
  height: 200px;
  outline: gray solid 1px;
}
#target {
  background: green;
}
.abs {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.abs-container {
  position: relative;
}
.fixed-container {
  will-change: transform;
}
div {
  padding: 5px;
}
</style>
<!-- This tests potential caching of out-of-flow positioned descendants. -->
<div id="outer">
  <div>
    <div id="intermediate">
      <div>
        <div id="target">TTT</div>
        <div id="noLayout1"></div>
      </div>
      <div id="noLayout2"></div>
    </div>
  </div>
</div>
<script>
  let outer = document.querySelector("#outer");
  let intermediate = document.querySelector("#intermediate");
  let target = document.querySelector("#target");
  let padding = 5;

  function cleanup() {
    outer.className = "";
    intermediate.className = "";
    target.className = "";
    document.body.offsetTop;
  }

  test( t => {
    t.add_cleanup(cleanup);
    outer.classList.add("abs-container");
    target.classList.add("abs");
    assert_equals(target.offsetHeight, outer.offsetHeight);
    intermediate.classList.add("abs-container");
    assert_equals(target.offsetHeight, intermediate.offsetHeight);
  }, "abs containing block moves from outer to intermediate" );
  test( t => {
    t.add_cleanup(cleanup);
    target.classList.add("abs");
    intermediate.classList.add("abs-container");
    assert_equals(target.offsetHeight, intermediate.offsetHeight);
    outer.classList.add("abs-container");
    assert_equals(target.offsetHeight, intermediate.offsetHeight);
    intermediate.classList.remove("abs-container");
    assert_equals(target.offsetHeight, outer.offsetHeight);
  }, "abs containing block moves from intermediate to outer" );
  test( t => {
    t.add_cleanup(cleanup);
    target.classList.add("abs");
    outer.classList.add("abs-container");
    assert_equals(target.offsetHeight, outer.offsetHeight);
    target.classList.remove("abs");
    assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding);
  }, "target is no longer absolute");
  test( t => {
    t.add_cleanup(cleanup);
    outer.classList.add("abs-container");
    assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding);
    target.classList.add("abs");
    assert_equals(target.offsetHeight, outer.offsetHeight);
  }, "target becomes absolute");

 // Repeat same tests with fixed
  test( t => {
    t.add_cleanup(cleanup);
    outer.classList.add("fixed-container");
    target.classList.add("fixed");
    assert_equals(target.offsetHeight, outer.offsetHeight);
    intermediate.classList.add("fixed-container");
    assert_equals(target.offsetHeight, intermediate.offsetHeight);
  }, "fixed containing block moves from outer to intermediate" );
  test( t => {
    t.add_cleanup(cleanup);
    target.classList.add("fixed");
    intermediate.classList.add("fixed-container");
    assert_equals(target.offsetHeight, intermediate.offsetHeight);
    outer.classList.add("fixed-container");
    assert_equals(target.offsetHeight, intermediate.offsetHeight);
    intermediate.classList.remove("fixed-container");
    assert_equals(target.offsetHeight, outer.offsetHeight);
  }, "fixed containing block moves from intermediate to outer" );
  test( t => {
    t.add_cleanup(cleanup);
    target.classList.add("fixed");
    outer.classList.add("fixed-container");
    assert_equals(target.offsetHeight, outer.offsetHeight);
    target.classList.remove("fixed");
    assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding);
  }, "target is no longer fixed");
  test( t => {
    t.add_cleanup(cleanup);
    outer.classList.add("fixed-container");
    assert_equals(target.offsetWidth, intermediate.offsetWidth - 4 * padding);
    target.classList.add("fixed");
    assert_equals(target.offsetHeight, outer.offsetHeight);
  }, "target becomes fixed");
</script>