Scroll visually to position:fixed element in ScrollFrameIntoView if necessary.

hiikezoe · moz-wptsync-bot · commit cb60c18cbf43 · 2025-02-04T13:03:52.000Z
In the case of position:fixed frame, walking up the frame tree doesn't reach to the root scroll container, thus we need to invoke ScrollToVisual outside the walking up the tree loop. This commit has two independent tests, a web platform test and a mochitest. Unfortunately the web platform test doesn't work on Firefox, since WebDriver (GeckoDriver) doesn't support touch action yet. It works on Chrome. What the mochitest does is mostly equivalent with the web platform test, but with nsIDOMWindowUtils.setResolutionAndScaleTo and zoomToFocusedInput. Differential Revision: https://phabricator.services.mozilla.com/D236061 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1943865 gecko-commit: 2249a06891096a52bef8c581f2181d933f21b4b3 gecko-reviewers: dlrobertson
diff --git a/css/cssom-view/visual-scrollIntoView.html b/css/cssom-view/visual-scrollIntoView.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1943865">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1943053">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#perform-a-scroll">
+<style>
+body {
+  margin: 0px;
+  padding: 0px;
+}
+</style>
+<div id="anchor"></div>
+<div style="position: fixed; bottom: 0;">
+  <div style="position: absolute; bottom: 0;">
+    <input type="text" id="name" />
+  </div>
+</div>
+<script>
+promise_test(async t => {
+  assert_equals(window.scrollY, 0);
+  assert_equals(visualViewport.scale, 1.0);
+  assert_equals(visualViewport.pageTop, 0);
+
+  // Pinch zoom in this document.
+  await new test_driver.Actions()
+    .addPointer("finger1", "touch")
+    .addPointer("finger2", "touch")
+    .pointerMove(parseInt(window.innerWidth / 2),
+                 parseInt(window.innerHeight / 2),
+                 {origin: "viewport", sourceName: "finger1"})
+    .pointerMove(parseInt(window.innerWidth / 2),
+                 parseInt(window.innerHeight / 2),
+                 {origin: "viewport", sourceName: "finger2"})
+    .pointerDown({sourceName: "finger1"})
+    .pointerDown({sourceName: "finger2"})
+    .pointerMove(parseInt(window.innerWidth / 3),
+                 parseInt(window.innerHeight / 3),
+                 {origin: "viewport", sourceName: "finger1"})
+    .pointerMove(parseInt(window.innerWidth / 3 * 2),
+                 parseInt(window.innerHeight / 3 * 2),
+                 {origin: "viewport", sourceName: "finger2"})
+    .pointerUp({sourceName: "finger1"})
+    .pointerUp({sourceName: "finger2"})
+    .send();
+
+  assert_greater_than(visualViewport.scale, 1.0);
+
+  // Suppose that the pinch zoom-in gesture at the center of the document did
+  // move the visual viewport offset.
+  assert_greater_than(visualViewport.pageTop, 0);
+
+  // Move to zero offset of the visual viewport.
+  let scrollPromise =
+      new Promise(resolve => visualViewport.addEventListener("scroll", resolve));
+  document.querySelector('#anchor').scrollIntoView({ behavior: "instant" });
+  await scrollPromise;
+
+  assert_equals(visualViewport.pageTop, 0);
+
+  // Now trigger a scrollIntoView call to an element inside a position:fixed element.
+  scrollPromise =
+      new Promise(resolve => visualViewport.addEventListener("scroll", resolve));
+  document.querySelector('#name').scrollIntoView({ behavior: "instant" });
+  await scrollPromise;
+
+  assert_greater_than(visualViewport.pageTop, 0);
+}, "Element.scrollIntoView scrolls visually");
+</script>
