abspos-containing-block-outside-scroller.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-scroll-anchoring/abspos-containing-block-outside-scroller.html - WPT Dashboard Interop Dashboard

<!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>