Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/cssom-view/scrollIntoView-root-overflow-clip.html - WPT Dashboard Interop Dashboard
<!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>
<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>