Bug 1467333 [wpt PR 11372] - Navigating to fragment scrolls with writing-mode: vertical-rl, a=testonly
authorSuneel Kota <suneel.kota@samsung.com>
Fri, 06 Jul 2018 21:25:24 +0000
changeset 425978 8d10f980d457f849f8e251485e16f22ef7eee6c2
parent 425977 8045d8bcb10de6d36ab696995a0dc0224c7fb467
child 425979 907f4d4fa7e93f2f2854471af8546efa5500b8c3
push id34267
push userrgurzau@mozilla.com
push dateWed, 11 Jul 2018 22:05:21 +0000
treeherdermozilla-central@3aca103e4915 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1467333, 11372, 844868, 1075956, 569214
milestone63.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 1467333 [wpt PR 11372] - Navigating to fragment scrolls with writing-mode: vertical-rl, a=testonly Automatic update from web-platform-testsNavigating to fragment scrolls with writing-mode: vertical-rl This CL sets the alignment of the Anchor node in accordance, when vertical-rl writing-mode is set Bug: 844868 Change-Id: I8357bcccbc88ffcd3b5d01265737a5b60f1e59a8 Reviewed-on: https://chromium-review.googlesource.com/1075956 Commit-Queue: srirama chandra sekhar <srirama.m@samsung.com> Reviewed-by: David Bokan <bokan@chromium.org> Cr-Commit-Position: refs/heads/master@{#569214} -- wpt-commits: 81918dc2da004801fba7f8833daf6930882831c3 wpt-pr: 11372
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/cssom-view/scrollIntoView-vertical-rl-writing-mode.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -325504,16 +325504,22 @@
     ]
    ],
    "css/cssom-view/scrollIntoView-smooth.html": [
     [
      "/css/cssom-view/scrollIntoView-smooth.html",
      {}
     ]
    ],
+   "css/cssom-view/scrollIntoView-vertical-rl-writing-mode.html": [
+    [
+     "/css/cssom-view/scrollIntoView-vertical-rl-writing-mode.html",
+     {}
+    ]
+   ],
    "css/cssom-view/scrollWidthHeight.xht": [
     [
      "/css/cssom-view/scrollWidthHeight.xht",
      {}
     ]
    ],
    "css/cssom-view/scrollWidthHeightWhenNotScrollable.xht": [
     [
@@ -551227,16 +551233,20 @@
   "css/cssom-view/scrollIntoView-shadow.html": [
    "17543f0228c100f1d9def2b28ff58a0e80207c6f",
    "testharness"
   ],
   "css/cssom-view/scrollIntoView-smooth.html": [
    "7461663514681b85aaa1b2be6e2e2807c71a9e51",
    "testharness"
   ],
+  "css/cssom-view/scrollIntoView-vertical-rl-writing-mode.html": [
+   "c630846b4220925cb92e6cfda77f8d54b09d4a05",
+   "testharness"
+  ],
   "css/cssom-view/scrollTop-display-change-ref.html": [
    "bb9079ba597cbcc27604cf8cc5556b4e6e0cda93",
    "support"
   ],
   "css/cssom-view/scrollTop-display-change.html": [
    "68d33e9669be4db95ea9016a8893212e588189fd",
    "reftest"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/cssom-view/scrollIntoView-vertical-rl-writing-mode.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<title>CSSOM View - scrollIntoView considers vertical-rl writing mode</title>
+<meta charset="utf-8">
+<link rel="author" title="Suneel Kota" href="mailto:suneel.kota@samsung.com">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+.box {
+  float: left;
+  width: 200px;
+  height: 200px;
+}
+#scroller {
+  writing-mode: vertical-rl;
+  overflow: scroll;
+  width: 300px;
+  height: 300px;
+}
+#container{
+  width: 600px;
+  height: 600px;
+}
+#target {
+  background-color: #ff0;
+}
+</style>
+<body>
+<div id="scroller">
+  <div id="container">
+    <!-- ROW-1 -->
+    <div class="row">
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+    </div>
+
+    <!-- ROW-2 -->
+    <div class="row">
+      <div class="box"></div>
+      <div class="box" id="target"></div>
+      <div class="box"></div>
+    </div>
+
+    <!-- ROW-3 -->
+    <div class="row">
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+    </div>
+  </div>
+</div>
+
+<script>
+var target = document.getElementById("target");
+var scroller = document.getElementById("scroller");
+var scrollbar_width = scroller.offsetWidth - scroller.clientWidth;
+
+var scroller_width = scroller.offsetWidth;
+var scroller_height = scroller.offsetHeight;
+var box_width = target.offsetWidth;
+var box_height = target.offsetHeight;
+
+var expectedX = [ ((2*box_width)-scroller_width)+scrollbar_width, ((3*box_width - scroller_width)/2)+ (scrollbar_width/2), box_width ];
+var expectedY = [ box_height, ((3*box_height - scroller_height)/2) + (scrollbar_width/2), ((2*box_height)-scroller_height) + scrollbar_width ];
+
+// As browsers differ in the meaning of scrollLeft when
+// in a right-to-left mode, we adjust the expectation
+// to match the semantics of scrollLeft.
+if(scroller.scrollLeft === 0)
+  expectedX = [ -box_width, -(((3*box_width - scroller_width)/2)+ (scrollbar_width/2)), -(((2*box_width)-scroller_width)+scrollbar_width)];
+
+// This formats dict as a string suitable as test name.
+// format_value() is provided by testharness.js,
+// which also preserves sign for -0.
+function format_dict(dict) {
+  const props = [];
+  for (let prop in dict) {
+    props.push(`${prop}: ${format_value(dict[prop])}`);
+  }
+  return `{${props.join(", ")}}`;
+}
+
+[
+  [{block: "start", inline: "start"}, expectedX[0], expectedY[0]],
+  [{block: "start", inline: "center"}, expectedX[0], expectedY[1]],
+  [{block: "start", inline: "end"}, expectedX[0], expectedY[2]],
+  [{block: "center", inline: "start"}, expectedX[1], expectedY[0]],
+  [{block: "center", inline: "center"}, expectedX[1], expectedY[1]],
+  [{block: "center", inline: "end"}, expectedX[1], expectedY[2]],
+  [{block: "end", inline: "start"}, expectedX[2], expectedY[0]],
+  [{block: "end", inline: "center"}, expectedX[2], expectedY[1]],
+  [{block: "end", inline: "end"}, expectedX[2], expectedY[2]],
+].forEach(([input, expectedX, expectedY]) => {
+  test(() => {
+    scroller.scrollTo(0, 0);
+    target.scrollIntoView(input);
+    assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX");
+    assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY");
+  }, `scrollIntoView(${format_dict(input)})`);
+})
+
+</script>
+
+</body>
+</html>