position-change-heuristic.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-scroll-anchoring/position-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;

#header {

  background-color: #F5B335;

  height: 50px;

  width: 100%;

#content {

  background-color: #D3D3D3;

  height: 400px;

.scroller {

  overflow: scroll;

  position: relative;

  width: 600px;

  height: 600px;

</style>

<div id="maybeScroller">

  <div id="space">

    <div id="header"></div>

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

    <div id="content"></div>

  </div>

</div>

<script>

// Tests that scroll anchoring is suppressed when an element in the scroller

// changes its in-flow state.

var scroller;

function runCase(oldPos, newPos, expectSuppression, skipInverse) {

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

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

  header.style.position = oldPos;

  before.style.height = "0";

  scroller.scrollTop = 200;

  header.style.position = newPos;

  before.style.height = "25px";

  var expectedTop = expectSuppression ? 200 : 225;

  assert_equals(scroller.scrollTop, expectedTop);

  if (!skipInverse)

    runCase(newPos, oldPos, expectSuppression, true);

test(() => {

  scroller = document.scrollingElement;

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

  runCase("static", "fixed", true);

  runCase("static", "absolute", true);

  runCase("static", "relative", false);

  runCase("fixed", "absolute", false);

  runCase("fixed", "relative", true);

  runCase("absolute", "relative", true);

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

test(() => {

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

  scroller.className = "scroller";

  runCase("static", "fixed", true);

  runCase("static", "absolute", true);

  runCase("static", "relative", false);

  runCase("fixed", "absolute", false);

  runCase("fixed", "relative", true);

  runCase("absolute", "relative", true);

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

</script>