css/css-scroll-anchoring/start-edge-in-block-layout-direction.html

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

body { margin: 0; }
html {
  line-height: 0;
  width: 200vw;
  height: 200vh;
}

html.ltr { direction: ltr; }
html.rtl { direction: rtl; }

html.horz { writing-mode: horizontal-tb; }
html.vlr { writing-mode: vertical-lr; }
html.vrl { writing-mode: vertical-rl; }

.horz.ltr .cx2, .vlr .cx2 { left: 100vw; }
.horz.rtl .cx2, .vrl .cx2 { right: 100vw; }
.horz .cy2, .ltr .cy2 { top: 100vh; }
.vlr.rtl .cy2, .vrl.rtl .cy2 { bottom: 100vh; }

#block_pusher, #inline_pusher {
  display: inline-block;
  width: 100px;
  height: 100px;
}
#block_pusher { background-color: #e88; }
#inline_pusher { background-color: #88e; }
.vpush { height: 80px !important; }
.hpush { width: 70px !important; }

#anchor {
  position: relative;
  display: inline-block;
  background-color: #8e8;
  min-width: 100px;
  min-height: 100px;
}

#grower { width: 0; height: 0; }
.grow {
  width: 180px !important;
  height: 160px !important;
}

</style>
<div id="container">
  <div id="block_pusher"></div><br>
  <div id="inline_pusher"></div><div id="anchor">
    <div id="grower"></div>
  </div>
</div>
<script>

// Tests that anchoring adjustments are only on the block layout axis and that
// their magnitude is based on the movement of the block start edge of the
// anchor node, for all 6 combinations of text direction and writing mode,
// regardless of which corner of the viewport the anchor node overlaps.

var CORNERS = ["cx1 cy1", "cx2 cy1", "cx1 cy2", "cx2 cy2"];
var docEl = document.documentElement;
var scroller = document.scrollingElement;
var blockPusher = document.querySelector("#block_pusher");
var inlinePusher = document.querySelector("#inline_pusher");
var grower = document.querySelector("#grower");
var anchor = document.querySelector("#anchor");

function reset() {
  scroller.scrollLeft = 0;
  scroller.scrollTop = 0;
  blockPusher.className = "";
  inlinePusher.className = "";
  grower.className = "";
}

function runCase(docClass, xDir, yDir, vert, expectXAdj, expectYAdj, corner) {
  docEl.className = docClass;
  anchor.className = corner;

  var initX = 150 * xDir;
  var initY = 150 * yDir;

  scroller.scrollLeft = initX;
  scroller.scrollTop = initY;

  // Each corner moves a different distance.
  block_pusher.className = vert ? "hpush" : "vpush";
  inline_pusher.className = vert ? "vpush" : "hpush";
  grower.className = "grow";

  assert_equals(scroller.scrollLeft, initX + expectXAdj);
  assert_equals(scroller.scrollTop, initY + expectYAdj);

  reset();
}

test(() => {
  CORNERS.forEach((corner) => {
    runCase("horz ltr", 1, 1, false, 0, -20, corner);
  });
}, "Horizontal LTR.");

test(() => {
  CORNERS.forEach((corner) => {
    runCase("horz rtl", -1, 1, false, 0, -20, corner);
  });
}, "Horizontal RTL.");

test(() => {
  CORNERS.forEach((corner) => {
    runCase("vlr ltr", 1, 1, true, -30, 0, corner);
  });
}, "Vertical-LR LTR.");

test(() => {
  CORNERS.forEach((corner) => {
    runCase("vlr rtl", 1, -1, true, -30, 0, corner);
  });
}, "Vertical-LR RTL.");

test(() => {
  CORNERS.forEach((corner) => {
    runCase("vrl ltr", -1, 1, true, 30, 0, corner);
  });
}, "Vertical-RL LTR.");

test(() => {
  CORNERS.forEach((corner) => {
    runCase("vrl rtl", -1, -1, true, 30, 0, corner);
  });
}, "Vertical-RL RTL.");

</script>