Bug 1518626 - Add scroll-anchoring tests for excluding certain elements from anchor selection. r=dholbert
authorRyan Hunt <rhunt@eqrion.net>
Tue, 08 Jan 2019 13:02:41 -0600
changeset 511659 0db1ecc6676ef0d26e72b50ba60a8fceddf2590a
parent 511658 e281e4064349eb5bfc9ecf14e83153e7abbbd3ef
child 511660 f38628954fbcc7bd6a0f8491045803439b9261c7
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 tests for excluding certain elements from anchor selection. r=dholbert This commit adds two tests around anchor selection. The first tests that 'position: sticky' is an invalid subtree, which is new to the spec. The second tests that implementations respect 'overflow-anchor' on the table element, and don't get confused with the boxes generated by tables. Differential Revision: https://phabricator.services.mozilla.com/D16274
testing/web-platform/tests/css/css-scroll-anchoring/exclude-sticky.html
testing/web-platform/tests/css/css-scroll-anchoring/opt-out-inner-table.html
testing/web-platform/tests/css/css-scroll-anchoring/opt-out-table.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-anchoring/exclude-sticky.html
@@ -0,0 +1,28 @@
+<!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 { height: 400vh; margin: 0; }
+#sticky, #content { width: 200px; height: 100px; }
+#sticky { position: sticky; left: 100px; top: 50px; }
+#before { height: 50px; }
+#content { margin-top: 100px; }
+
+</style>
+<div id="sticky">sticky</div>
+<div id="before"></div>
+<div id="content">content</div>
+<script>
+
+// Tests that the anchor selection algorithm skips sticky-positioned elements.
+
+test(() => {
+  document.scrollingElement.scrollTop = 150;
+  document.querySelector("#before").style.height = "100px";
+  assert_equals(document.scrollingElement.scrollTop, 200);
+}, "Sticky-positioned headers shouldn't be chosen as scroll anchors (we should use 'content' instead)");
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-anchoring/opt-out-inner-table.html
@@ -0,0 +1,47 @@
+<!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>
+
+#scroller {
+    height: 200px;
+    overflow: scroll;
+}
+#before { height: 50px; }
+#table-row {
+    display: table-row;
+    overflow-anchor: none;
+    width: 100px;
+    height: 100px;
+}
+#after { margin-bottom: 500px; }
+
+</style>
+<div id="scroller">
+    <div id="before"></div>
+    <div id="table-row">content</div>
+    <div id="after"></div>
+</div>
+<script>
+
+// Tests that the anchor exclusion API works with table parts that generate
+// anonymous table box wrappers
+
+test(() => {
+  let scroller = document.querySelector('#scroller');
+  let before = document.querySelector('#before');
+
+  // Scroll down so that #table-row is the only element in view
+  scroller.scrollTop = 50;
+
+  // Expand #before so that we might perform a scroll adjustment
+  before.style.height = "100px";
+
+  // We shouldn't have selected #table-row as an anchor as it is
+  // 'overflow-anchor: none'
+  assert_equals(scroller.scrollTop, 50);
+}, "A table with anonymous wrappers and 'overflow-anchor: none' shouldn't generate any scroll anchor candidates.");
+
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-anchoring/opt-out-table.html
@@ -0,0 +1,45 @@
+<!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>
+
+#scroller {
+    height: 200px;
+    overflow: scroll;
+}
+#before { height: 50px; }
+#table {
+    display: table;
+    overflow-anchor: none;
+    width: 100px;
+    height: 100px;
+    margin-bottom: 500px;
+}
+
+</style>
+<div id="scroller">
+    <div id="before"></div>
+    <div id="table">content</div>
+</div>
+<script>
+
+// Tests that the anchor exclusion API works with tables
+
+test(() => {
+  let scroller = document.querySelector('#scroller');
+  let before = document.querySelector('#before');
+
+  // Scroll down so that #table is the only element in view
+  scroller.scrollTop = 50;
+
+  // Expand #before so that we might perform a scroll adjustment
+  before.style.height = "100px";
+
+  // We shouldn't have selected #table as an anchor as it is
+  // 'overflow-anchor: none'
+  assert_equals(scroller.scrollTop, 50);
+}, "A table with 'overflow-anchor: none' shouldn't generate any scroll anchor candidates.");
+
+</script>