Bug 1446964 [wpt PR 10093] - scroll-snap-align should specify inline and block., a=testonly
authorSandra Sun <sunyunjia@chromium.org>
Mon, 09 Apr 2018 17:22:12 +0000
changeset 467118 597de9acebc7d05f3cff8d7126a12e5dbdcb1873
parent 467117 1a0de1483045afb75abdad323c6eb8ead16870a5
child 467119 817d53ff11d6eab0d35f02166a40d70db800cae9
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
bugs1446964, 10093, 821645, 967890, 544055
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 1446964 [wpt PR 10093] - scroll-snap-align should specify inline and block., a=testonly Automatic update from web-platform-testsscroll-snap-align should specify inline and block. Currently, we parse the two values in scroll-snap-align for x and y. However, according to the spec, https://drafts.csswg.org/css-scroll-snap-1/#scroll-snap-align, the two values specify the alignment in the inline axis and block axis. This patch renames the two values and handles the vertical writing mode for inline and block alignments. Bug: 821645 Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.android:android_optional_gpu_tests_rel Change-Id: I78acff0df4698b3f9c0f7443e61e3bad75379b14 Reviewed-on: https://chromium-review.googlesource.com/967890 Commit-Queue: Sandra Sun <sunyunjia@chromium.org> Reviewed-by: David Bokan <bokan@chromium.org> Reviewed-by: Ali Juma <ajuma@chromium.org> Cr-Commit-Position: refs/heads/master@{#544055} wpt-commits: 26677578ecdfe1c498824f2711f2211d75a0fa71 wpt-pr: 10093 wpt-commits: 26677578ecdfe1c498824f2711f2211d75a0fa71 wpt-pr: 10093
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-scroll-snap/snap-inline-block.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -314520,16 +314520,22 @@
     ]
    ],
    "css/css-scroll-snap/scrollTo-scrollBy-snaps.html": [
     [
      "/css/css-scroll-snap/scrollTo-scrollBy-snaps.html",
      {}
     ]
    ],
+   "css/css-scroll-snap/snap-inline-block.html": [
+    [
+     "/css/css-scroll-snap/snap-inline-block.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": [
     [
@@ -508193,16 +508199,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-inline-block.html": [
+   "4fc646db848f597af6f4562e7b60815e9ca4ef2b",
+   "testharness"
+  ],
   "css/css-scroll-snap/snap-to-visible-areas.html": [
    "dfaf8675bec557c9f2178ad48b29c803f94056b5",
    "testharness"
   ],
   "css/css-shapes/OWNERS": [
    "d26aa70436055346420fd8bae6fd174daf090124",
    "support"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scroll-snap/snap-inline-block.html
@@ -0,0 +1,53 @@
+<!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 {
+  width: 400px;
+  height: 350px;
+  overflow: scroll;
+  scroll-snap-type: both mandatory;
+}
+#space {
+  width: 1000px;
+  height: 1000px;
+}
+#target {
+  width: 200px;
+  height: 200px;
+  left: 300px;
+  top: 300px;
+  scroll-snap-align: start end;
+}
+</style>
+
+<div id="scroller">
+  <div id="space"></div>
+  <div id="target"></div>
+</div>
+
+<script>
+var scroller = document.getElementById("scroller");
+var width = scroller.clientWidth;
+var height = scroller.clientHeight;
+[
+  ["horizontal-tb", 300, 500 - height],
+  ["vertical-lr", 500 - width, 300],
+  ["vertical-rl", 300, 300]
+].forEach(([writing_mode, left, top]) => {
+  test(() => {
+    scroller.style.writingMode = writing_mode;
+    if (writing_mode == "vertical-rl")
+      document.getElementById("target").style.left = (width - 700) + "px";
+    scroller.scrollTo(0, 0);
+    assert_equals(scroller.scrollLeft, left, "aligns correctly on x");
+    assert_equals(scroller.scrollTop, top, "aligns correctly on y");
+  }, "Snaps correctly for " + writing_mode +
+     " writing mode with 'inline' and 'block' alignments");
+})
+</script>
\ No newline at end of file