Robert Flack
3a61d52a3f
Automatic update from web-platform-tests Implement scrollIntoView container nearest. This adds support for only scrolling the nearest scroll container when using the scrollIntoView API. I2P: https://groups.google.com/a/chromium.org/g/blink-dev/c/PlRR0FwOEWs/m/5_0RU5uwAQAJ Bug: 391627364 Change-Id: I1b7715d90f8db12d8eec30ac2ff8f8be096d4165 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6531248 Commit-Queue: Robert Flack <flackr@chromium.org> Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1458392} -- wpt-commits: 80c81173bb7c4fea9a1368576addaace261c1d95 wpt-pr: 52454 Differential Revision: https://phabricator.services.mozilla.com/D249352
85 lines
2.7 KiB
HTML
85 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSSOM View - scrollIntoView container option</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="initial-scale=1">
|
|
<link rel="author" title="Rob Flack" href="mailto:flackr@chromium.org">
|
|
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
.scroller {
|
|
overflow: auto;
|
|
height: 200px;
|
|
}
|
|
.spacer {
|
|
height: 400px;
|
|
}
|
|
#target {
|
|
height: 200px;
|
|
}
|
|
</style>
|
|
<script>
|
|
let setFrameLoaded = null;
|
|
let frameLoaded = new Promise(resolve => {
|
|
setFrameLoaded = resolve;
|
|
});
|
|
</script>
|
|
<div id="outer" class="scroller">
|
|
<div class="spacer"></div>
|
|
<div id="inner" class="scroller">
|
|
<div class="spacer"></div>
|
|
<div id="target"></div>
|
|
<iframe id="frame" height="200" src="resources/scrollIntoView-frame.html" onload="setFrameLoaded()"></iframe>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const outer = document.getElementById('outer');
|
|
const inner = document.getElementById('inner');
|
|
const target = document.getElementById('target');
|
|
|
|
function reset() {
|
|
outer.scrollTop = 0;
|
|
inner.scrollTop = 0;
|
|
}
|
|
|
|
test(() => {
|
|
reset();
|
|
target.scrollIntoView();
|
|
assert_equals(inner.scrollTop, 400, '#inner scrollTop');
|
|
assert_equals(outer.scrollTop, 400, '#outer scrollTop');
|
|
}, `scrollIntoView() defaults to scrolling ancestors`);
|
|
|
|
test(() => {
|
|
reset();
|
|
target.scrollIntoView({container: 'all'});
|
|
assert_equals(inner.scrollTop, 400, '#inner scrollTop');
|
|
assert_equals(outer.scrollTop, 400, '#outer scrollTop');
|
|
}, `scrollIntoView({container: 'all'}) scrolls ancestors`);
|
|
|
|
test(() => {
|
|
reset();
|
|
target.scrollIntoView({container: 'nearest'});
|
|
assert_equals(inner.scrollTop, 400, '#inner scrollTop');
|
|
assert_equals(outer.scrollTop, 0, '#outer scrollTop');
|
|
}, `scrollIntoView({container: 'nearest'}) only scrolls nearest scroll container`);
|
|
|
|
test(() => {
|
|
reset();
|
|
inner.scrollIntoView({container: 'nearest'});
|
|
assert_equals(outer.scrollTop, 400, '#outer scrollTop');
|
|
assert_equals(inner.scrollTop, 0, '#inner scrollTop');
|
|
}, `scrollIntoView({container: 'nearest'}) doesn't stop at itself`);
|
|
|
|
promise_test(async () => {
|
|
reset();
|
|
await frameLoaded;
|
|
const frameDoc = document.getElementById("frame").contentDocument;
|
|
const frameTarget = frameDoc.getElementById("target");
|
|
frameTarget.scrollIntoView({container: 'nearest'});
|
|
assert_equals(frameDoc.scrollingElement.scrollTop, 400, 'frame scrollingElement scrollTop');
|
|
assert_equals(inner.scrollTop, 0, '#inner scrollTop');
|
|
assert_equals(outer.scrollTop, 0, '#outer scrollTop');
|
|
}, `scrollIntoView({container: 'nearest'}) doesn't propagate to outer frames`);
|
|
|
|
</script>
|