Bug 1918906 - Set TriggerByScript to AnchorScrollFlags to ignore scroll anchor adjustments during (smooth) scrolling to anchor. r=botond

Since bug 1789930 we have allowed scroll anchor adjustments during scroll
operations by user. To tell whether the given scroll operation is done by user
or by script, we introduced ScrollFlags::TriggerByScript. Though scrolling to
anchor is kinda user triggered scroll operation, it would make sense to not allow
scroll anchor adjustments during scrolling to anchor.

Differential Revision: https://phabricator.services.mozilla.com/D224284
This commit is contained in:
Hiroyuki Ikezoe 2024-10-10 03:43:47 +00:00
parent 080df48f04
commit b27d53e33d
2 changed files with 52 additions and 2 deletions

View File

@ -146,8 +146,10 @@ enum class ScrollFlags {
ScrollSmooth = 1 << 3,
ScrollSmoothAuto = 1 << 4,
TriggeredByScript = 1 << 5,
// ScrollOverflowHidden | ScrollNoParentFrames
AnchorScrollFlags = (1 << 1) | (1 << 2),
// ScrollOverflowHidden | ScrollNoParentFrames | TriggeredByScript
// NOTE: `Anchor` means here is "scrolling to an anchor", not "CSS scroll
// anchoring".
AnchorScrollFlags = (1 << 1) | (1 << 2) | (1 << 5),
ALL_BITS = (1 << 6) - 1,
};

View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width">
<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=1918906">
<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/#scroll-adjustment">
<style>
html {
scroll-behavior: smooth;
}
#anchor {
height: 100px;
background-color: blue;
}
a {
transition: font-size 0.2s;
font-size: 10px;
}
a:hover {
font-size: 13px;
}
</style>
<a href="#anchor">Go to an anchor</a>
<div style="height: 500vh;"></div>
<div id="anchor"></div>
<div style="height: 100vh;"></div>
<script>
promise_test(async t => {
assert_equals(window.scrollY, 0);
const anchorRect = anchor.getBoundingClientRect();
const scrollEndPromise =
new Promise(resolve => window.addEventListener("scrollend", resolve));
const anchorNode = document.querySelector("a");
test_driver.click(anchorNode);
await scrollEndPromise;
assert_approx_equals(window.scrollY, anchorRect.y, 3);
}, "Ignore scroll position adjustments during smooth scrolling to anchor");
</script>
</html>