Support viewport's snapping on cc.

To support viewport snapping on cc, before RootLayerScrolling is enabled, we should plumb the SnapContainerData to the composited scroll layers in PaintLayerCompositor. This patch also makes sure that SnapAreaCalculation is correct regardless of whether RootLayerScrolling is enabled or not. Bug: 795404 Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.android:android_optional_gpu_tests_rel;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Change-Id: I836f291e1c43d54f3d2470702934d6b63e8fc964 Reviewed-on: https://chromium-review.googlesource.com/878019 Commit-Queue: Sandra Sun <sunyunjia@chromium.org> Reviewed-by: David Bokan <bokan@chromium.org> Reviewed-by: Majid Valipour <majidvp@chromium.org> Cr-Commit-Position: refs/heads/master@{#534286}
web-platform-tests · Feb 3, 2018 · 22c140c · 22c140c
1 parent 7d9600c
commit 22c140c
Showing 1 changed file with 86 additions and 0 deletions.
diff --git a/css/css-scroll-snap/snap-at-user-scroll-end-manual.html b/css/css-scroll-snap/snap-at-user-scroll-end-manual.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1" />
+<title>Tests that window should snap at user scroll end.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+body {
+  margin: 0px;
+  overflow: scroll;
+  scroll-snap-type: both mandatory;
+}
+#content {
+  width: 2000px;
+  height: 2000px;
+  padding: 0px;
+  margin: 0px;
+}
+#target {
+  position: relative;
+  left: 400px;
+  top: 400px;
+  width: 400px;
+  height: 400px;
+  background-color: lightblue;
+  scroll-snap-align: start;
+}
+#i1 {
+  color: red;
+  font-weight: bold;
+}
+</style>
+
+<div id="content">
+  <div id="target">
+    <h1>CSSScrollSnap</h1>
+    <h4>Tests that the window can snap at user scroll end.</h4>
+    <ol>
+      <li id="i1" style="color: red">
+        Scroll the page vertically and horizontally.
+        Keep scrolling until background has turned yellow.</li>
+      <li id="i2"> Press the button "Done"</li>
+    </ol>
+    <input type="button" id="btn" value="DONE" style="width: 100px; height: 50px;"/>
+  </div>
+</div>
+
+<script>
+var body = document.body;
+var button = document.getElementById("btn");
+var target = document.getElementById("target");
+var instruction1 = document.getElementById("i1");
+var instruction2 = document.getElementById("i2");
+var scrolled_x = false;
+var scrolled_y = false;
+var start_x = window.scrollX;
+var start_y = window.scrollY;
+
+window.onscroll = function() {
+  if (scrolled_x && scrolled_y) {
+    body.style.backgroundColor = "yellow";
+    instruction1.style.color = "black";
+    instruction1.style.fontWeight = "normal";
+    instruction2.style.color = "red";
+    instruction2.style.fontWeight = "bold";
+    return;
+  }
+
+  scrolled_x |= window.scrollX != start_x;
+  scrolled_y |= window.scrollY != start_y;
+}
+
+button.onclick = function() {
+  if (!scrolled_x || !scrolled_y)
+    return;
+
+  assert_equals(window.scrollX, target.offsetLeft,
+        "window.scrollX should be at snapped position.");
+  assert_equals(window.scrollY, target.offsetTop,
+        "window.scrollY should be at snapped position.");
+  // To make the test result visible.
+  var content = document.getElementById("content");
+  body.removeChild(content);
+  done();
+}
+
+</script>