Bug 1518626 - Add scroll-anchoring test for anchor in fragmented <div>. r=dholbert
authorRyan Hunt <rhunt@eqrion.net>
Tue, 08 Jan 2019 15:19:07 -0600
changeset 511660 f38628954fbcc7bd6a0f8491045803439b9261c7
parent 511659 0db1ecc6676ef0d26e72b50ba60a8fceddf2590a
child 511661 05d0f0893f36b19412c516e5ee97c628f624a307
push id10547
push userffxbld-merge
push dateMon, 21 Jan 2019 13:03:58 +0000
treeherdermozilla-beta@24ec1916bffe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1518626
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1518626 - Add scroll-anchoring test for anchor in fragmented <div>. r=dholbert This commit adds a test that implementations can anchor to node that's inside of a fragmented node. Differential Revision: https://phabricator.services.mozilla.com/D16275
testing/web-platform/tests/css/css-scroll-anchoring/multicol-fragmented-anchor.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-anchoring/multicol-fragmented-anchor.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+
+body { margin: 0; }
+#scroller {
+  overflow: scroll;
+  height: 100px;
+}
+#multicol {
+  margin-top: 20px;
+  height: 200px;
+  columns: 2;
+  column-fill: auto;
+}
+#before {
+  margin-top: 100px;
+  height: 100px;
+}
+#content {
+  height: 10px;
+}
+</style>
+<div id="scroller">
+  <div id="multicol">
+    <div id="fragmented">
+      <div id="before"></div>
+      <div id="content">content</div>
+    </div>
+  </div>
+</div>
+<script>
+
+// Tests a scroll anchor inside of a div fragmented across multicol
+
+test(() => {
+  let scroller = document.querySelector("#scroller");
+  let before = document.querySelector("#before");
+  let content = document.querySelector("#content");
+
+  // Scroll down so that we select a scroll anchor. We should select #content
+  // and not #before, as #before is positioned offscreen in the first column
+  scroller.scrollTop = 10;
+
+  // Increase the height of #before so that it fragments into the second
+  // column and pushes #content down.
+  before.style.height = "110px";
+
+  // We should have anchored to #content and have done an adjustment of 10px
+  assert_equals(scroller.scrollTop, 20);
+}, "An element in a fragmented div should be able to be selected as an anchor node.");
+
+</script>