Snap at ScrollIntoView.

According to the spec, w3c/csswg-drafts#2593 (comment) scrollIntoView should 1) Always snap to the target element's snap alignment, and 2) All the affected scrollers should also land on a snap position if one exists. This patch does part 2). Before a scrollable_area is added to the smoothScrollSequencer with its new scroll_offset, we will check if it has a valid snap offset around, and update the final offset accordingly. We'll implement part 1) in a separate patch. Bug: 842317 Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel Change-Id: Ica22134ed0b1f9d36f5a017c8dd0be54e907dd3d
web-platform-tests · Nov 9, 2018 · c37bee9 · c37bee9
1 parent 9902fba
commit c37bee9
Showing 1 changed file with 104 additions and 0 deletions.
diff --git a/css/css-scroll-snap/nested-scrollIntoView-snaps.html b/css/css-scroll-snap/nested-scrollIntoView-snaps.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+div {
+  position: absolute;
+}
+:root {
+  overflow: scroll;
+  scroll-snap-type: both mandatory;
+}
+.scroller {
+  overflow: scroll;
+  scroll-snap-type: both mandatory;
+  padding: 0px;
+}
+#outer {
+  left: 1000px;
+  top: 1000px;
+  width: 600px;
+  height: 600px;
+}
+#out-snap-1 {
+  scroll-snap-align: start;
+  left: 1200px;
+  top: 1200px;
+  width: 10px;
+  height: 10px;
+}
+#out-snap-2 {
+  scroll-snap-align: start;
+  left: 1100px;
+  top: 1100px;
+  width: 10px;
+  height: 10px;
+}
+#inner {
+  left: 1000px;
+  top: 1000px;
+  width: 400px;
+  height: 400px;
+}
+.space {
+  left: 0px;
+  top: 0px;
+  width: 3000px;
+  height: 3000px;
+}
+#target {
+  scroll-snap-align: end;
+  left: 800px;
+  top: 800px;
+  width: 200px;
+  height: 200px;
+}
+</style>
+
+<div class="space"></div>
+<div id="out-snap-1"></div>
+<div id="out-snap-2"></div>
+<div class="scroller" id="outer">
+  <div class="space"></div>
+  <div class="scroller" id="inner">
+    <div class="space"></div>
+    <div id="target"></div>
+  </div>
+</div>
+
+<script>
+var outer = document.getElementById("outer");
+var inner = document.getElementById("inner");
+var target = document.getElementById("target");
+
+test(() => {
+  assert_equals(window.scrollX, 0);
+  assert_equals(window.scrollY, 0);
+  assert_equals(outer.scrollLeft, 0);
+  assert_equals(outer.scrollTop, 0);
+  assert_equals(inner.scrollLeft, 0);
+  assert_equals(inner.scrollTop, 0);
+
+  target.scrollIntoView({inline: "start", block: "start"});
+  // Although the scrollIntoView specified "start" as the alignment, the target
+  // has "end" as its snap-alignment. So the inner scroller finishes with "end"
+  // alignment
+  assert_equals(inner.scrollLeft, 1000 - inner.clientWidth, "ScrollIntoView lands on the target's snap position regardless of the specified alignment.");
+  assert_equals(inner.scrollTop, 1000 - inner.clientHeight, "ScrollIntoView lands on the target's snap position regardless of the specified alignment.");
+
+  // Since there is no snap points defined in the outer scroller, the outer
+  // scroller finishes with "start" alignment, as specified in scrollIntoView.
+  // Note that the "start" alignment aligns the target's top-left corner
+  //(inner.left + inner.clientWidth - target.width, inner.top + inner.clientHeight - target.height)
+  // with the outer scroller's top-left corner.
+  assert_equals(outer.scrollLeft, 800 + inner.clientWidth, "ScrollIntoView ends with the specified alignment if no snap position is specified.");
+  assert_equals(outer.scrollTop, 800 + inner.clientHeight, "ScrollIntoView ends with the specified alignment if no snap position is specified.");
+
+  // Although the scrollIntoView specified "start" as the alignment, the window
+  // has two other elements with snap points. So the window finishes with the
+  // closest snap point.
+  assert_equals(window.scrollX, 1100, "ScrollIntoView lands on the snap position closest to the specified alignment.");
+  assert_equals(window.scrollY, 1100, "ScrollIntoView lands on the snap position closest to the specified alignment.");
+}, "All the scrollers affected by scrollIntoView should land on a snap position if one exists. Otherwise, land according to the specified alignment");
+</script>