Bug 1443206 [wpt PR 9821] - Snap Point selection should satisfy visibility requirement., a=testonly
authorSandra Sun <sunyunjia@chromium.org>
Mon, 09 Apr 2018 16:58:04 +0000
changeset 467065 7d79c07c9e3948a76c92cbf2a22167f5a4d00e0d
parent 467064 a9e3992d7141ccfe0f200a97b77c0768e94eb730
child 467066 14d812f1d712e275bb675fed06d0542364c8cc28
push id9165
push userasasaki@mozilla.com
push dateThu, 26 Apr 2018 21:04:54 +0000
treeherdermozilla-beta@064c3804de2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1443206, 778257, 814874, 543111
milestone61.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 1443206 [wpt PR 9821] - Snap Point selection should satisfy visibility requirement., a=testonly Automatic update from web-platform-testsSnap Point selection should satisfy visibility requirement. According to spec, https://www.w3.org/TR/css-scroll-snap-1/#snap-scope we should only consider the snap points of visible snap areas. This patch implements the visibility requirement by adding a field of visible region for each snap point. It also handles the case of visibility conflict when snapping to two axes individually. Bug: 778257 Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.android:android_optional_gpu_tests_rel Change-Id: I7a3d2aa6b9c1293df3f05118152f105fa3265d29 Reviewed-on: https://chromium-review.googlesource.com/814874 Commit-Queue: Sandra Sun <sunyunjia@chromium.org> Reviewed-by: Jeremy Roman <jbroman@chromium.org> Reviewed-by: Ali Juma <ajuma@chromium.org> Reviewed-by: Majid Valipour <majidvp@chromium.org> Cr-Commit-Position: refs/heads/master@{#543111} wpt-commits: 343fd25cd72c64ed30da54b650220cca7338cd57 wpt-pr: 9821 wpt-commits: 343fd25cd72c64ed30da54b650220cca7338cd57 wpt-pr: 9821
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -314430,16 +314430,22 @@
     ]
    ],
    "css/css-scroll-snap/scrollTo-scrollBy-snaps.html": [
     [
      "/css/css-scroll-snap/scrollTo-scrollBy-snaps.html",
      {}
     ]
    ],
+   "css/css-scroll-snap/snap-to-visible-areas.html": [
+    [
+     "/css/css-scroll-snap/snap-to-visible-areas.html",
+     {}
+    ]
+   ],
    "css/css-shapes/basic-shape-circle-ellipse-serialization.html": [
     [
      "/css/css-shapes/basic-shape-circle-ellipse-serialization.html",
      {}
     ]
    ],
    "css/css-shapes/parsing/shape-image-threshold-invalid.html": [
     [
@@ -508049,16 +508055,20 @@
   "css/css-scroll-snap/scrollTo-scrollBy-snaps.html": [
    "6e921f3b1c54df09d594d5e450674618eee42143",
    "testharness"
   ],
   "css/css-scroll-snap/snap-at-user-scroll-end-manual.html": [
    "51f08f58135901b332ff43d15fbdc8d0a22f962c",
    "manual"
   ],
+  "css/css-scroll-snap/snap-to-visible-areas.html": [
+   "dfaf8675bec557c9f2178ad48b29c803f94056b5",
+   "testharness"
+  ],
   "css/css-shapes/OWNERS": [
    "d26aa70436055346420fd8bae6fd174daf090124",
    "support"
   ],
   "css/css-shapes/basic-shape-circle-ellipse-serialization.html": [
    "b0841c5c1e328846aaa95376ae62178173cdf5a5",
    "testharness"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap/snap-to-visible-areas.html
@@ -0,0 +1,69 @@
+<!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;
+  margin: 0px;
+}
+#scroller {
+  height: 600px;
+  width: 600px;
+  overflow: scroll;
+  scroll-snap-type: both mandatory;
+}
+#space {
+  width: 2000px;
+  height: 2000px;
+}
+
+.snap {
+  width: 200px;
+  height: 200px;
+  background-color: blue;
+  scroll-snap-align: start;
+}
+
+#left-top {
+  left: 0px;
+  top: 0px;
+}
+
+#right-top {
+  left: 800px;
+  top: 0px;
+}
+
+#left-bottom {
+  left: 0px;
+  top: 800px;
+}
+
+</style>
+<div id="scroller">
+  <div id="space"></div>
+  <div id="left-top" class="snap"></div>
+  <div id="right-top" class="snap"></div>
+  <div id="left-bottom" class="snap"></div>
+</div>
+<script>
+var scroller = document.getElementById("scroller");
+test(() => {
+  scroller.scrollTo(0, 0);
+  assert_equals(scroller.scrollLeft, 0);
+  assert_equals(scroller.scrollTop, 0);
+  scroller.scrollTo(300, 0);
+  assert_equals(scroller.scrollLeft, 800);
+  assert_equals(scroller.scrollTop, 0);
+}, 'Only snap to visible area on X axis, even when the non-visible ones are closer');
+
+test(() => {
+  scroller.scrollTo(0, 0);
+  assert_equals(scroller.scrollLeft, 0);
+  assert_equals(scroller.scrollTop, 0);
+  scroller.scrollTo(0, 300);
+  assert_equals(scroller.scrollLeft, 0);
+  assert_equals(scroller.scrollTop, 800);
+}, 'Only snap to visible area on Y axis, even when the non-visible ones are closer');
+</script>