testing/web-platform/tests/css/css-scroll-anchoring/start-edge-in-block-layout-direction.html
author Bogdan Tara <btara@mozilla.com>
Thu, 10 Jan 2019 18:49:22 +0200
changeset 510378 842b7a62d9cefd5030c5561d536af8414899af7a
parent 510365 bfca5019a9cca1bf03af412521c223e85f08e647
child 510494 4b492273f76348a6bb29e034493075282f9a80be
permissions -rw-r--r--
Backed out 15 changesets (bug 1305957) for ASAN failures CLOSED TREE Backed out changeset 4d5eb85d3155 (bug 1305957) Backed out changeset 51c86d025ecb (bug 1305957) Backed out changeset d8eef8f3e396 (bug 1305957) Backed out changeset 950bf6ad1ef2 (bug 1305957) Backed out changeset b4cb2cbebdb6 (bug 1305957) Backed out changeset bfca5019a9cc (bug 1305957) Backed out changeset e76b842c7b7f (bug 1305957) Backed out changeset d9445a5f3458 (bug 1305957) Backed out changeset d9052f7b34d9 (bug 1305957) Backed out changeset e7124fecb721 (bug 1305957) Backed out changeset bdb766faa867 (bug 1305957) Backed out changeset 3033401ef320 (bug 1305957) Backed out changeset 6b96050386f6 (bug 1305957) Backed out changeset c66c00f73296 (bug 1305957) Backed out changeset 6bd0bdab93cb (bug 1305957)

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