219 lines
8.6 KiB
HTML
219 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title> CSS Scroll Snap 2 Test: scroll-initial-target*</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#scroll-initial-target">
|
|
<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>
|
|
<script src="/dom/events/scrolling/scroll_support.js"></script>
|
|
<script src="/css/css-animations/support/testcommon.js"></script>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
/**
|
|
large-space divs are added to simplify scrolling calculations
|
|
(i.e. expected offsets are just distances from scroller border top to
|
|
scrollee border top).
|
|
*/
|
|
.large-space {
|
|
position: absolute;
|
|
height: 500vh;
|
|
width: 500vw;
|
|
}
|
|
#space-filler {
|
|
width: 500px;
|
|
height: 500px;
|
|
background-color: green;
|
|
}
|
|
#outer-container {
|
|
width: 400px;
|
|
height: 400px;
|
|
overflow: scroll;
|
|
position: relative;
|
|
background-color: yellow;
|
|
}
|
|
#inner-container {
|
|
top: 20px;
|
|
left: 20px;
|
|
width: 400px;
|
|
height: 400px;
|
|
overflow: visible;
|
|
position: relative;
|
|
background-color: blue;
|
|
}
|
|
#target {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: pink;
|
|
scroll-initial-target: nearest;
|
|
}
|
|
</style>
|
|
<div id="outer-container">
|
|
<div class="large-space" id="large_space_outer"></div>
|
|
<div id="space-filler"></div>
|
|
<div id="inner-container">
|
|
<div class="large-space" id="large_space_inner"></div>
|
|
<div id="space-filler"></div>
|
|
<div id="target">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let outer_container = document.getElementById("outer-container");
|
|
let inner_container = document.getElementById("inner-container");
|
|
let space_filler = document.getElementById("space-filler");
|
|
let target = document.getElementById("target");
|
|
|
|
const inner_scroller_top_offset = 20;
|
|
const target_height = target.getBoundingClientRect().height;
|
|
const space_filler_height = space_filler.getBoundingClientRect().height;
|
|
const inner_content_height = target_height + space_filler_height;
|
|
const inner_container_height = inner_container.getBoundingClientRect().height;
|
|
|
|
let outer_to_target_scrolltop =
|
|
/*outer space-filler*/space_filler_height +
|
|
/* 20px top */ inner_scroller_top_offset +
|
|
/*inner space filler*/ space_filler_height;
|
|
|
|
let outer_to_inner_scrolltop =
|
|
/* outer space-filler*/ space_filler_height +
|
|
/* 20px top */ inner_scroller_top_offset;
|
|
|
|
let inner_to_target_scrolltop =
|
|
/*inner space filler*/ space_filler_height;
|
|
|
|
async function resetDisplay() {
|
|
outer_container.style.display = "block";
|
|
inner_container.style.display = "block";
|
|
target.style.display = "block";
|
|
return waitForAnimationFrames(2);
|
|
}
|
|
|
|
promise_test(async (t) => {
|
|
await resetDisplay();
|
|
assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
|
|
"outer-container is scrolled to scroll-initial-target");
|
|
|
|
// Remove large_space_outer so we can observe outer-container adjust to
|
|
// its new content height.
|
|
large_space_outer.style.display = "none";
|
|
inner_container.style.display = "none";
|
|
await waitForAnimationFrames(2);
|
|
|
|
assert_equals(outer_container.scrollTop,
|
|
space_filler_height - outer_container.clientHeight,
|
|
"outer-container has only the outer space filler to scroll");
|
|
|
|
large_space_outer.style.display = "initial";
|
|
inner_container.style.display = "block";
|
|
await waitForAnimationFrames(2);
|
|
|
|
assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
|
|
"outer-scroller is updated as scroll-initial-target reappears");
|
|
}, "display:none scroll-initial-target becomes display:block");
|
|
|
|
promise_test(async (t) => {
|
|
await waitForCompositorCommit();
|
|
await resetDisplay();
|
|
assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
|
|
"outer-container is scrolled to scroll-initial-target");
|
|
|
|
// Remove large_space_outer so we can observe outer-container adjust to
|
|
// its new content height.
|
|
large_space_outer.style.display = "none";
|
|
inner_container.style.overflow = "scroll";
|
|
await waitForAnimationFrames(2);
|
|
|
|
// inner-container has become a scroller and should be scrolled to
|
|
// scroll-initial-target.
|
|
assert_equals(inner_container.scrollTop,
|
|
inner_to_target_scrolltop,
|
|
"inner-container is fully scrolled to target");
|
|
// outer-container should be adjusted to its new max scroll offset.
|
|
assert_equals(outer_container.scrollTop,
|
|
space_filler_height + inner_scroller_top_offset +
|
|
inner_container_height - outer_container.clientHeight,
|
|
"outer-container's overflowing content is only its direct " +
|
|
"children");
|
|
|
|
large_space_outer.style.display = "initial";
|
|
inner_container.style.overflow = "visible";
|
|
await waitForAnimationFrames(2);
|
|
|
|
assert_equals(inner_container.scrollTop, 0,
|
|
"inner-container is no longer a scroll container");
|
|
assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
|
|
"outer-scroller is the scroll container for target once again");
|
|
}, "intermediate overflow:visible container becomes overflow:scroll");
|
|
|
|
promise_test(async (t) => {
|
|
// This test verifies that:
|
|
// 1. when both the child and grandchild are scroll-initial-targets, the
|
|
// first-in-tree-order (i.e. the child) wins/is scrolled to.
|
|
// 2. if/when the grandchild stops being a scroll-initial-target, the
|
|
// child (inner container) is scrolled to.
|
|
await waitForCompositorCommit();
|
|
await resetDisplay();
|
|
t.add_cleanup(async () => {
|
|
inner_container.style.scrollInitialTarget = "none";
|
|
await waitForAnimationFrames(2);
|
|
});
|
|
|
|
assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
|
|
"outer-container is scrolled to scroll-initial-target");
|
|
// Make the inner container a scroll-initial-target.
|
|
inner_container.style.scrollInitialTarget = "nearest";
|
|
await waitForAnimationFrames(2);
|
|
|
|
// The inner container has overflow: visible, so it's not the scroll
|
|
// container of target.
|
|
assert_equals(outer_container.scrollTop,
|
|
outer_to_inner_scrolltop,
|
|
"outer-container is scrolled to inner-container (which is before the" +
|
|
"inner scroll-initial-target in tree order)");
|
|
}, "outer scroll-initial-target takes precedence over inner");
|
|
|
|
promise_test(async (t) => {
|
|
// This test verifies that a child which is a scroller, is a
|
|
// scroll-initial-target, and has a scroll-initial-target is scrolled to
|
|
// by its scrolling container, and also scrolls to its own
|
|
// scroll-initial-target.
|
|
await waitForCompositorCommit();
|
|
await resetDisplay();
|
|
t.add_cleanup(async () => {
|
|
inner_container.style.overflow = "visible";
|
|
inner_container.style.scrollInitialTarget = "none";
|
|
await waitForAnimationFrames(2);
|
|
});
|
|
|
|
assert_equals(outer_container.scrollTop, outer_to_target_scrolltop,
|
|
"outer-container is scrolled to scroll-initial-target");
|
|
|
|
// Make the inner container a scroll-initial-target.
|
|
inner_container.style.scrollInitialTarget = "nearest";
|
|
await waitForAnimationFrames(2);
|
|
|
|
assert_equals(outer_container.scrollTop,
|
|
outer_to_inner_scrolltop,
|
|
"outer-container is still scrolled to inner scroll-container" +
|
|
"as it is a scroll-initial-target and comes before #target in " +
|
|
"tree-order");
|
|
|
|
// Make the inner container a scroller.
|
|
inner_container.style.overflow = "scroll";
|
|
await waitForAnimationFrames(2);
|
|
|
|
assert_equals(outer_container.scrollTop,
|
|
outer_to_inner_scrolltop,
|
|
"outer-container is scrolled to the inner container");
|
|
assert_equals(inner_container.scrollTop,
|
|
inner_to_target_scrolltop,
|
|
"inner-container is scrolled to target");
|
|
}, "scroll containers can also be scroll-initial-targets");
|
|
</script>
|
|
</body>
|
|
</html>
|