mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-26 22:32:46 +00:00
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:
parent
080df48f04
commit
b27d53e33d
@ -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,
|
||||
};
|
||||
|
||||
|
@ -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>
|
Loading…
Reference in New Issue
Block a user