Content - 76a4952383e2a99a704b8527b664f0ca506fb3eb - 47cec67/css/css-scroll-anchoring/abspos-containing-block-outside-scroller.html

visit type:

Tip revision: 58917ffd22ed487e83412a5edfee10a8000b47f5 authored by Anne van Kesteren on 28 March 2018, 11:06:55 UTC
Test document.write() on image and text documents

Tip revision: 58917ff

abspos-containing-block-outside-scroller.html

<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>

body { margin: 0; }
#scroller { overflow: scroll; width: 500px; height: 400px; }
#space { height: 1000px; }
#abs {
  position: absolute; background-color: red;
  width: 100px; height: 100px;
  left: 25px; top: 25px;
}
#rel {
  position: relative; background-color: green;
  left: 50px; top: 100px; width: 100px; height: 75px;
}

</style>
<div id="scroller">
  <div id="space">
    <div id="abs"></div>
    <div id="before"></div>
    <div id="rel"></div>
  </div>
</div>
<script>

// Tests that anchor node selection skips an absolute-positioned descendant of
// the scroller if and only if its containing block is outside the scroller.

test(() => {
  var scroller = document.querySelector("#scroller");
  var abs = document.querySelector("#abs");
  var before = document.querySelector("#before");
  var rel = document.querySelector("#rel");

  // We should not anchor to #abs, because it does not move with the scroller.
  scroller.scrollTop = 25;
  before.style.height = "25px";
  assert_equals(scroller.scrollTop, 50);

  // Reset, make #scroller a containing block.
  before.style.height = "0";
  scroller.scrollTop = 0;
  scroller.style.position = "relative";

  // This time we should anchor to #abs.
  scroller.scrollTop = 25;
  before.style.height = "25px";
  assert_equals(scroller.scrollTop, 25);

}, "Abs-pos descendant with containing block outside the scroller.");

</script>

Browse the archive

https://github.com/web-platform-tests/wpt