ancestor-change-heuristic.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-scroll-anchoring/ancestor-change-heuristic.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

#space { height: 4000px; }

#ancestor { position: relative; }

#before, #anchor { height: 100px; }

#anchor { background-color: green; }

.layout1 { padding-top: 20px; }

.layout2 { margin-right: 20px; }

.layout3 { max-width: 100px; }

.layout4 { min-height: 400px; }

.layout5 { position: static !important; }

.layout6 { left: 20px; }

.layout7 { transform: matrix(1, 0, 0, 1, 50, 50); }

.nonLayout1 { color: red; }

.nonLayout2 { font-size: 200%; }

.nonLayout3 { box-shadow: 10px 10px 10px gray; }

.nonLayout4 { opacity: 0.5; }

.nonLayout5 { z-index: -1; }

.scroller {

  overflow: scroll;

  width: 600px;

  height: 600px;

</style>

<div id="maybeScroller">

  <div id="space">

    <div id="ancestor">

      <div id="before"></div>

      <div id="anchor"></div>

    </div>

  </div>

</div>

<script>

// Tests that scroll anchoring is suppressed when one of the "layout-affecting"

// properties is modified on an ancestor of the anchor node.

var scroller;

var ancestor = document.querySelector("#ancestor");

var before = document.querySelector("#before");

function runCase(classToApply, expectSuppression) {

  // Reset.

  scroller.scrollTop = 0;

  ancestor.className = "";

  before.style.height = "";

  scroller.scrollTop = 150;

  ancestor.className = classToApply;

  before.style.height = "150px";

  var expectedTop = expectSuppression ? 150 : 200;

  assert_equals(scroller.scrollTop, expectedTop);

function runAll() {

  for (var i = 1; i <= 7; i++)

    runCase("layout" + i, true);

  for (var i = 1; i <= 5; i++)

    runCase("nonLayout" + i, false);

test(() => {

  document.querySelector("#maybeScroller").className = "";

  scroller = document.scrollingElement;

  runAll();

}, "Ancestor changes in document scroller.");

test(() => {

  scroller = document.querySelector("#maybeScroller");

  scroller.className = "scroller";

  runAll();

}, "Ancestor changes in scrollable <div>.");

</script>