Free Debreuil
3024569b3a
Automatic update from web-platform-tests Enforce scroll axis constraints in single-axis containers The SingleAxisScrollContainers feature allows containers to be configured to scroll along only one axis via CSS overflow properties. Previously, scroll APIs like scrollTo and scrollIntoView did not respect these constraints and would incorrectly apply offsets to both axes. This change updates PaintLayerScrollableArea to accurately reflect single-axis scrollability. The scrollable delta for the maximum scroll offset is now set to zero for non-scrollable axes. Adds tests to ensure scrollIntoView and style changes to single-axis scroll container work as expected. Fixed: 496515802 Change-Id: I7cfa72d64feceb0daf060dc77754acf1a0799ee0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7702333 Auto-Submit: Free Debreuil <freedebreuil@google.com> Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Free Debreuil <freedebreuil@google.com> Cr-Commit-Position: refs/heads/main@{#1614582} -- wpt-commits: 2ae012c5ca1d0c85a886e0ff797d44193f78f8b0 wpt-pr: 58878
76 lines
2.9 KiB
HTML
76 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
|
<title>scrollIntoView still scrolls the viewport programmatically when overflow-x or overflow-y: clip is applied to the viewport.</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-propagation">
|
|
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
|
<meta name="assert" content="When overflow-x or overflow-y: clip is applied to the viewport, it is interpreted as hidden, so scrollIntoView can still scroll the viewport programmatically in that axis.">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
#log { position: fixed; }
|
|
html, body { margin: 0; }
|
|
body {
|
|
position: relative;
|
|
width: 10000px;
|
|
height: 10000px;
|
|
}
|
|
.target {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
#target-x {
|
|
left: 5000px;
|
|
top: 0;
|
|
}
|
|
#target-y {
|
|
left: 0;
|
|
top: 5000px;
|
|
}
|
|
</style>
|
|
|
|
<div id="log"></div>
|
|
<div id="target-x" class="target"></div>
|
|
<div id="target-y" class="target"></div>
|
|
|
|
<script>
|
|
const targetX = document.getElementById("target-x");
|
|
const targetY = document.getElementById("target-y");
|
|
|
|
function reset() {
|
|
document.documentElement.style.overflowX = "visible";
|
|
document.documentElement.style.overflowY = "visible";
|
|
document.scrollingElement.scrollLeft = 0;
|
|
document.scrollingElement.scrollTop = 0;
|
|
assert_equals(window.scrollX, 0, "Precondition: window.scrollX");
|
|
assert_equals(window.scrollY, 0, "Precondition: window.scrollY");
|
|
}
|
|
|
|
test(() => {
|
|
reset();
|
|
// Use clip + visible so this specifically exercises the viewport rule,
|
|
// not the general overflow-x/overflow-y compute-to-hidden rule.
|
|
document.documentElement.style.overflowX = "clip";
|
|
document.documentElement.style.overflowY = "visible";
|
|
|
|
targetX.scrollIntoView({block: "nearest", inline: "start", behavior: 'instant'});
|
|
|
|
assert_greater_than(window.scrollX, 0, "scrollIntoView should scroll the viewport horizontally");
|
|
assert_equals(window.scrollY, 0, "scrollIntoView should not scroll the viewport vertically");
|
|
}, "scrollIntoView scrolls the viewport when overflow-x: clip is applied to the root element");
|
|
|
|
test(() => {
|
|
reset();
|
|
// Use visible + clip so this specifically exercises the viewport rule,
|
|
// not the general overflow-x/overflow-y compute-to-hidden rule.
|
|
document.documentElement.style.overflowX = "visible";
|
|
document.documentElement.style.overflowY = "clip";
|
|
|
|
targetY.scrollIntoView({block: "start", inline: "nearest", behavior: 'instant'});
|
|
|
|
assert_equals(window.scrollX, 0, "scrollIntoView should not scroll the viewport horizontally");
|
|
assert_greater_than(window.scrollY, 0, "scrollIntoView should scroll the viewport vertically");
|
|
}, "scrollIntoView scrolls the viewport when overflow-y: clip is applied to the root element");
|
|
</script>
|