commit fc35b6b02fdd3dd0402ab7c1ad6f3175775768d3
parent e544afb88244f184895baea4e1113916eba80726
Author: Peng Zhou <zhoupeng.1996@bytedance.com>
Date: Thu, 25 Dec 2025 20:58:29 +0000
Bug 2007690 [wpt PR 56919] - ScrollAnchor: Suppress adjustment during editing commands, a=testonly
Automatic update from web-platform-tests
ScrollAnchor: Suppress adjustment during editing commands
During editing operations (e.g., typing or inserting newlines), layout
changes can occur that scroll anchoring misinterprets as unwanted
shifts. This causes the browser to incorrectly "adjust" the scroll
position, leading to unexpected jumps.
This CL fixes this by using `SuppressScrollAnchorScope` within
`TypingCommand`. This explicitly disables scroll anchoring logic while
the editing command is being applied, ensuring the viewport remains
stable during user input.
Bug: 41477953, 40903354
Change-Id: If80660df45c563ecf1d91c6d9163000753417e36
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7279282
Reviewed-by: Steve Kobes <skobes@chromium.org>
Commit-Queue: Peng Zhou <zhoupeng.1996@bytedance.com>
Cr-Commit-Position: refs/heads/main@{#1562502}
--
wpt-commits: 95db1e716bb92e84f4cb6eebd5f0e2a934dcf0c6
wpt-pr: 56919
Diffstat:
1 file changed, 72 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-scroll-anchoring/editable-scroll-anchor.html b/testing/web-platform/tests/css/css-scroll-anchoring/editable-scroll-anchor.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Scroll anchoring is suppressed during editing in editable elements</title>
+<link rel="author" href="mailto:zhoupeng.1996@bytedance.com">
+<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/dom/events/scrolling/scroll_support.js"></script>
+<script src="/css/css-scroll-snap/support/common.js"></script>
+<style>
+textarea,
+div {
+ font-size: 14px;
+ width: 685px;
+ height: 716px;
+}
+</style>
+<body>
+<script>
+const baseText = 'Scroll Anchor Test of the editable element.';
+const text = Array(500).fill(baseText).join(' ');
+const caretOffset = 426;
+const targetScrollTop = 30;
+
+// Perform an editing operation while scroll anchoring is suppressed.
+async function insertLineBreak(element) {
+ let scrollEndPromise = waitForScrollEndOrTimeout(element, 1000);
+ element.scrollTop = targetScrollTop;
+ await scrollEndPromise;
+ assert_equals(element.scrollTop, targetScrollTop);
+ scrollEndPromise = waitForScrollEndOrTimeout(element, 1000);
+ document.execCommand('insertLineBreak');
+ await scrollEndPromise;
+ assert_equals(element.scrollTop, targetScrollTop);
+}
+
+promise_test(async t => {
+ const textarea = document.createElement('textarea');
+ textarea.value = text;
+ document.body.appendChild(textarea);
+
+ textarea.focus();
+ textarea.setSelectionRange(caretOffset, caretOffset);
+ assert_equals(textarea.selectionStart, caretOffset);
+ assert_equals(textarea.selectionEnd, caretOffset);
+
+ await insertLineBreak(textarea);
+ textarea.remove();
+}, 'Scroll anchoring is suppressed during editing in a textarea');
+
+promise_test(async t => {
+ const selection = window.getSelection();
+ const editable = document.createElement('div');
+ editable.contentEditable = true;
+ editable.innerText = text;
+ document.body.appendChild(editable);
+
+ editable.focus();
+ const range = document.createRange();
+ const textNode = editable.firstChild;
+ assert_equals(textNode.nodeType, Node.TEXT_NODE);
+ range.setStart(textNode, caretOffset);
+ range.collapse(true);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ assert_equals(selection.anchorOffset, caretOffset);
+
+ await insertLineBreak(document.documentElement);
+ editable.remove();
+}, 'Scroll anchoring is suppressed during editing in a contenteditable element');
+</script>
+</body>
