Bug 1594757 [wpt PR 20151] - Reassign snap areas when adding snap container, a=testonly
authorKaan Alsan <alsan@google.com>
Tue, 26 Nov 2019 11:26:13 +0000
changeset 504610 62cf2a0639a1233f55a8e28dffb8152079605052
parent 504609 b944f6ce658f1b2ae05f6e190af816c52136710e
child 504611 80cbd1bb74efc1105cb98ebfa38a0773ba8d1868
push id101897
push userwptsync@mozilla.com
push dateFri, 29 Nov 2019 11:10:32 +0000
treeherderautoland@47be1b3fdda6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1594757, 20151, 1007456, 1900920, 717011
milestone72.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 1594757 [wpt PR 20151] - Reassign snap areas when adding snap container, a=testonly Automatic update from web-platform-tests Reassign snap areas when adding snap container Making a container scrollable should make it a valid snap container. In doing so, any descendant snap area that should be assigned to the container should be reassigned as such. Bug: 1007456 Change-Id: Iccd220311ce592f921dc8424780632e499d3201c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1900920 Reviewed-by: David Bokan <bokan@chromium.org> Reviewed-by: Majid Valipour <majidvp@chromium.org> Reviewed-by: Yi Gu <yigu@chromium.org> Commit-Queue: Kaan Alsan <alsan@google.com> Cr-Commit-Position: refs/heads/master@{#717011} -- wpt-commits: 5b9f9a0d1be1e14cc222cfbc6069fc70cd5d2f8e wpt-pr: 20151
testing/web-platform/tests/css/css-scroll-snap/snap-area-capturing-remove-scroll-container.html
testing/web-platform/tests/css/css-scroll-snap/snap-area-caputring-add-scroll-container.html
--- a/testing/web-platform/tests/css/css-scroll-snap/snap-area-capturing-remove-scroll-container.html
+++ b/testing/web-platform/tests/css/css-scroll-snap/snap-area-capturing-remove-scroll-container.html
@@ -71,59 +71,59 @@ body {
 </div>
 <div id="document-snap-area"></div>
 <script>
 
 // This tests that making a snap container no longer scrollable will reassign
 // its snap areas to the next scrollable ancestor, per spec [1].
 // [1] https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions
 test(() => {
-  const innerscroller = document.getElementById("inner-scroller");
-  const middlescroller = document.getElementById("middle-scroller");
-  const documentscroller = document.scrollingElement;
+  const inner_scroller = document.getElementById("inner-scroller");
+  const middle_scroller = document.getElementById("middle-scroller");
+  const document_scroller = document.scrollingElement;
 
   // Middle scroller doesn't snap.
   // Document scroller should snap to its only captured area.
-  documentscroller.scrollBy(0, 100);
-  middlescroller.scrollBy(0, 10);
-  assert_equals(innerscroller.scrollTop, 0);
-  assert_equals(middlescroller.scrollTop, 10);
-  assert_equals(documentscroller.scrollTop, 500);
+  document_scroller.scrollBy(0, 100);
+  middle_scroller.scrollBy(0, 10);
+  assert_equals(inner_scroller.scrollTop, 0);
+  assert_equals(middle_scroller.scrollTop, 10);
+  assert_equals(document_scroller.scrollTop, 500);
 
   // Inner scroller snaps.
-  innerscroller.scrollBy(0, 10);
-  assert_equals(innerscroller.scrollTop, 300);
-  assert_equals(middlescroller.scrollTop, 10);
-  assert_equals(documentscroller.scrollTop, 500);
+  inner_scroller.scrollBy(0, 10);
+  assert_equals(inner_scroller.scrollTop, 300);
+  assert_equals(middle_scroller.scrollTop, 10);
+  assert_equals(document_scroller.scrollTop, 500);
 
   // Inner scroller is no longer a scroll container.
-  innerscroller.style.setProperty("overflow", "visible");
-  assert_equals(innerscroller.scrollTop, 0);
-  assert_equals(middlescroller.scrollTop, 10);
-  assert_equals(documentscroller.scrollTop, 500);
+  inner_scroller.style.setProperty("overflow", "visible");
+  assert_equals(inner_scroller.scrollTop, 0);
+  assert_equals(middle_scroller.scrollTop, 10);
+  assert_equals(document_scroller.scrollTop, 500);
 
   // The new snap container is the middle scroller, which has snap-type 'none'.
   // Per spec, the scroll container should capture snap positions even if it has
   // snap-type 'none'.
   // The middle scroller should not snap.
   // The document scroller should still only snap to its captured snap area.
-  documentscroller.scrollBy(0, 100);
-  middlescroller.scrollBy(0, 10);
-  assert_equals(innerscroller.scrollTop, 0);
-  assert_equals(middlescroller.scrollTop, 20);
-  assert_equals(documentscroller.scrollTop, 500);
+  document_scroller.scrollBy(0, 100);
+  middle_scroller.scrollBy(0, 10);
+  assert_equals(inner_scroller.scrollTop, 0);
+  assert_equals(middle_scroller.scrollTop, 20);
+  assert_equals(document_scroller.scrollTop, 500);
 
   // The scroll container should now be at the document level.
-  middlescroller.style.setProperty("overflow", "visible");
-  documentscroller.scrollBy(0, -10);
-  assert_equals(innerscroller.scrollTop, 0);
-  assert_equals(middlescroller.scrollTop, 0);
+  middle_scroller.style.setProperty("overflow", "visible");
+  document_scroller.scrollBy(0, -10);
+  assert_equals(inner_scroller.scrollTop, 0);
+  assert_equals(middle_scroller.scrollTop, 0);
 
   // Check that the existing snap area did not get removed when reassigning
   // the inner snap area.
-  assert_equals(documentscroller.scrollTop, 500);
+  assert_equals(document_scroller.scrollTop, 500);
 
   // Check that the inner snap area got reassigned to the document.
-  documentscroller.scrollBy(0, 150);
-  assert_equals(documentscroller.scrollTop, 600);
+  document_scroller.scrollBy(0, 150);
+  assert_equals(document_scroller.scrollTop, 600);
 }, 'Making a snap container not scrollable should promote the next scrollable\
  ancestor to become a snap container.');
 </script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap/snap-area-caputring-add-scroll-container.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<title>
+  Adding a scrollable element should make it start capturing snap points.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions"/>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+div {
+  position: absolute;
+  margin: 0px;
+}
+
+html {
+  scroll-snap-type: y mandatory;
+}
+
+body {
+  margin: 0px;
+}
+
+#middle-scroller {
+  top: 100px;
+  height: 500px;
+  width: 500px;
+  overflow: visible;
+  background-color: rgb(12, 61, 2);
+  scroll-snap-type: none;
+}
+
+#inner-scroller {
+  top: 200px;
+  height: 400px;
+  width: 400px;
+  overflow: visible;
+  background-color: rgb(65, 139, 50);
+  scroll-snap-type: y mandatory;
+}
+
+.space {
+  width: 2000px;
+  height: 2000px;
+}
+
+#inner-snap-area {
+  top: 300px;
+  width: 200px;
+  height: 200px;
+  background-color: blue;
+  scroll-snap-align: start;
+}
+
+#document-snap-area {
+  top: 500px;
+  width: 200px;
+  height: 200px;
+  background-color: lightblue;
+  scroll-snap-align: start;
+}
+
+#inserted-snap-container {
+  top: 400px;
+  height: 600px;
+  width: 400px;
+  overflow: scroll;
+  scroll-snap-type: y mandatory;
+}
+</style>
+
+<div class="space"></div>
+  <div id="middle-scroller">
+    <div class="space"></div>
+    <div id="inner-scroller">
+        <div class="space"></div>
+        <div id="inner-snap-area"></div>
+    </div>
+  </div>
+</div>
+<div id="document-snap-area"></div>
+<script>
+
+const inner_scroller = document.getElementById("inner-scroller");
+const middle_scroller = document.getElementById("middle-scroller");
+const document_scroller = document.scrollingElement;
+
+// This tests that making an element scrollable will reassign the correct snap
+// areas to itself, per spec [1].
+// [1] https://drafts.csswg.org/css-scroll-snap/#captures-snap-positions
+test(() => {
+  // Confirm that the document-level scroller is the snap container for all of
+  // the snap areas.
+  document_scroller.scrollBy(0, 10);
+  assert_equals(document_scroller.scrollTop, 500);
+  // Snaps to the inner snap area.
+  document_scroller.scrollBy(0, 75);
+  assert_equals(document_scroller.scrollTop, 600);
+
+  // The middle scroller should now have the inner snap area assigned to it.
+  // Per spec, even if the snap-type is 'none', it should still capture snap
+  // points.
+  middle_scroller.style.setProperty("overflow", "scroll");
+
+  // The middle scroller has snap-type 'none' so it should not snap.
+  middle_scroller.scrollBy(0, 10);
+  assert_equals(middle_scroller.scrollTop, 10);
+
+  // The document scroller should only snap to the document-level snap area.
+  document_scroller.scrollTo(0, 600);
+  assert_equals(document_scroller.scrollTop, 500);
+
+  // The inner scroller should now have the innermost snap area assigned to it.
+  inner_scroller.style.setProperty("overflow", "scroll");
+  inner_scroller.scrollBy(0, 10);
+  assert_equals(inner_scroller.scrollTop, 300);
+
+  document_scroller.scrollTo(0, 600);
+  assert_equals(document_scroller.scrollTop, 500);
+
+}, "Making an element scrollable should make it capture the correct descendant\
+ snap areas' snap points.");
+
+ // Test that attaching a new snap container also properly assigns snap areas.
+ test(() => {
+  // Sanity check that the scrollers still snap to the snap areas.
+  document_scroller.scrollBy(0, 10);
+  inner_scroller.scrollBy(0,10);
+  assert_equals(inner_scroller.scrollTop, 300);
+  assert_equals(document_scroller.scrollTop, 500);
+
+  // Create new snap container and append thedocument-level snap area as its
+  // child.
+  const inserted_scroller = document.createElement("div");
+  inserted_scroller.id = "inserted-snap-container";
+  const space = document.createElement("div");
+  space.classList.add("space");
+  inserted_scroller.appendChild(space);
+  inserted_scroller.appendChild(document.getElementById("document-snap-area"));
+  document_scroller.appendChild(inserted_scroller);
+
+  // Document scroller no longer snaps.
+  document_scroller.scrollTo(0, 400);
+  assert_equals(document_scroller.scrollTop, 400);
+
+  // Inserted scroller snaps.
+  inserted_scroller.scrollBy(0, 10);
+  assert_equals(inserted_scroller.scrollTop, 500);
+ }, "Attaching a new element that is scrollable should assign the correct snap\
+ areas to it.");
+</script>