зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1838563 [wpt PR 40562] - View timeline: Handle offscreen stickiness., a=testonly
Automatic update from web-platform-tests View timeline: Handle offscreen stickiness. A view timeline subject inside a position:sticky box can get "stuck" from any of the four CSS offset properties (left, top, right, bottom) during any of the named view-timeline ranges (entry, contain, exit) or even while it is entirely outside the viewport. ViewTimeline::CalculateOffsets previously assumed that stickiness occurred only when the subject was fully contained by the viewport. This change implements the more general solution. Bug: 1448294 Change-Id: I842552b3a30078587eff6287e4ee11396d13ed95 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4616159 Reviewed-by: Kevin Ellis <kevers@chromium.org> Commit-Queue: Steve Kobes <skobes@chromium.org> Cr-Commit-Position: refs/heads/main@{#1158852} -- wpt-commits: dd6156ef5158cc1538250af5ed20f0909c7bdfce wpt-pr: 40562
This commit is contained in:
Steve Kobes
moz-wptsync-bot
Родитель
b58b192aa3
Коммит
08e443de09
|
|
@ -0,0 +1,464 @@
|
|||
<!DOCTYPE html>
|
||||
<html id="top">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>View timeline with sticky during entry/exit</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#viewtimeline-interface">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
<script src="/scroll-animations/scroll-timelines/testcommon.js"></script>
|
||||
<script src="/scroll-animations/view-timelines/testcommon.js"></script>
|
||||
<style>
|
||||
|
||||
#container {
|
||||
height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
.space {
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
/* top-sticky during entry */
|
||||
.stickycase1 {
|
||||
background: yellow;
|
||||
position: sticky;
|
||||
top: 400px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* bottom-sticky during entry and top-sticky during exit */
|
||||
.stickycase2 {
|
||||
background: yellow;
|
||||
position: sticky;
|
||||
top: -100px;
|
||||
bottom: -100px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* top-sticky and bottom-sticky during entry */
|
||||
.stickycase3 {
|
||||
background: yellow;
|
||||
position: sticky;
|
||||
top: 375px;
|
||||
bottom: -125px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* top-sticky before entry */
|
||||
.stickycase4 {
|
||||
background: yellow;
|
||||
position: sticky;
|
||||
top: 600px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* bottom-sticky before entry and top-sticky after exit */
|
||||
.stickycase5 {
|
||||
background: yellow;
|
||||
position: sticky;
|
||||
top: -200px;
|
||||
bottom: -200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* target > viewport, bottom-sticky during entry and top-sticky during exit */
|
||||
.stickycase6 {
|
||||
background: yellow;
|
||||
position: sticky;
|
||||
top: -200px;
|
||||
bottom: -200px;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
/* target > viewport, bottom-sticky and top-sticky during contain */
|
||||
.stickycase7 {
|
||||
background: yellow;
|
||||
position: sticky;
|
||||
top: -100px;
|
||||
bottom: -100px;
|
||||
height: 700px;
|
||||
}
|
||||
|
||||
#target {
|
||||
position: relative;
|
||||
top: 50px;
|
||||
background: orange;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.space:has(.stickycase6),
|
||||
.space:has(.stickycase7) {
|
||||
height: 1050px;
|
||||
}
|
||||
|
||||
.stickycase6 #target,
|
||||
.stickycase7 #target {
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div class="space"></div>
|
||||
<div class="space">
|
||||
<div style="height: 150px"></div>
|
||||
<div id="sticky">
|
||||
<div id="target">Subject</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space"></div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
// The "cover" range would be [STATIC_START, STATIC_END] if we ignored
|
||||
// stickiness (i.e., considered only static position).
|
||||
//
|
||||
// STATIC_START = scroll distance to second spacer (50px)
|
||||
// + position of sticky element within its container (150px)
|
||||
// + position of target within sticky element (50px)
|
||||
// STATIC_END = STATIC_START
|
||||
// + viewport height (500px)
|
||||
// + target height (100px)
|
||||
const STATIC_START = 250;
|
||||
const STATIC_END = 850;
|
||||
|
||||
// This is how far the sticky element can move upwards when bottom-stuck.
|
||||
const ROOM_ABOVE = 150;
|
||||
|
||||
// This is how far the sticky element can move downwards when top-stuck.
|
||||
const ROOM_BELOW = 200;
|
||||
|
||||
const TARGET_HEIGHT = 100;
|
||||
const VIEWPORT_HEIGHT = 500;
|
||||
const BIG_TARGET_HEIGHT = 600;
|
||||
const BIG_TARGET_STATIC_END = 1350;
|
||||
|
||||
promise_test(async t => {
|
||||
sticky.className = "stickycase1";
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } ,
|
||||
rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START,
|
||||
endOffset: STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } ,
|
||||
rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START + ROOM_BELOW + TARGET_HEIGHT,
|
||||
endOffset: STATIC_END + ROOM_BELOW - TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'entry', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START,
|
||||
endOffset: STATIC_START + ROOM_BELOW + TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'entry-crossing', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'entry-crossing', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START,
|
||||
endOffset: STATIC_START + ROOM_BELOW + TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'exit', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_END + ROOM_BELOW - TARGET_HEIGHT,
|
||||
endOffset: STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'exit-crossing', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'exit-crossing', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_END + ROOM_BELOW - TARGET_HEIGHT,
|
||||
endOffset: STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
}, 'View timeline top-sticky during entry.');
|
||||
|
||||
promise_test(async t => {
|
||||
sticky.className = "stickycase2";
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } ,
|
||||
rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START - ROOM_ABOVE,
|
||||
endOffset: STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } ,
|
||||
rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START + TARGET_HEIGHT,
|
||||
endOffset: STATIC_END - TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'entry', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START - ROOM_ABOVE,
|
||||
endOffset: STATIC_START + TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'entry-crossing', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'entry-crossing', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START - ROOM_ABOVE,
|
||||
endOffset: STATIC_START + TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'exit', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_END - TARGET_HEIGHT,
|
||||
endOffset: STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'exit-crossing', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'exit-crossing', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_END - TARGET_HEIGHT,
|
||||
endOffset: STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
}, 'View timeline bottom-sticky during entry and top-sticky during exit.');
|
||||
|
||||
promise_test(async t => {
|
||||
sticky.className = "stickycase3";
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } ,
|
||||
rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START - ROOM_ABOVE,
|
||||
endOffset: STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } ,
|
||||
rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START + ROOM_BELOW + TARGET_HEIGHT,
|
||||
endOffset: STATIC_END + ROOM_BELOW - TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'entry', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START - ROOM_ABOVE,
|
||||
endOffset: STATIC_START + ROOM_BELOW + TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'entry-crossing', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'entry-crossing', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START - ROOM_ABOVE,
|
||||
endOffset: STATIC_START + ROOM_BELOW + TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'exit', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_END + ROOM_BELOW - TARGET_HEIGHT,
|
||||
endOffset: STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'exit-crossing', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'exit-crossing', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_END + ROOM_BELOW - TARGET_HEIGHT,
|
||||
endOffset: STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
}, 'View timeline top-sticky and bottom-sticky during entry.');
|
||||
|
||||
promise_test(async t => {
|
||||
sticky.className = "stickycase4";
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } ,
|
||||
rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START + ROOM_BELOW,
|
||||
endOffset: STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } ,
|
||||
rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START + ROOM_BELOW + TARGET_HEIGHT,
|
||||
endOffset: STATIC_END + ROOM_BELOW - TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'entry', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START + ROOM_BELOW,
|
||||
endOffset: STATIC_START + ROOM_BELOW + TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'entry-crossing', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'entry-crossing', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START + ROOM_BELOW,
|
||||
endOffset: STATIC_START + ROOM_BELOW + TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'exit', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_END + ROOM_BELOW - TARGET_HEIGHT,
|
||||
endOffset: STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'exit-crossing', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'exit-crossing', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_END + ROOM_BELOW - TARGET_HEIGHT,
|
||||
endOffset: STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
}, 'View timeline top-sticky before entry.');
|
||||
|
||||
promise_test(async t => {
|
||||
sticky.className = "stickycase5";
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } ,
|
||||
rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START,
|
||||
endOffset: STATIC_END,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } ,
|
||||
rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START + TARGET_HEIGHT,
|
||||
endOffset: STATIC_END - TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'entry', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START,
|
||||
endOffset: STATIC_START + TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'entry-crossing', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'entry-crossing', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START,
|
||||
endOffset: STATIC_START + TARGET_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'exit', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_END - TARGET_HEIGHT,
|
||||
endOffset: STATIC_END,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'exit-crossing', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'exit-crossing', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_END - TARGET_HEIGHT,
|
||||
endOffset: STATIC_END,
|
||||
axis: 'block'
|
||||
});
|
||||
}, 'View timeline bottom-sticky before entry and top-sticky after exit.');
|
||||
|
||||
promise_test(async t => {
|
||||
sticky.className = "stickycase6";
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } ,
|
||||
rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START - ROOM_ABOVE,
|
||||
endOffset: BIG_TARGET_STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } ,
|
||||
rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START + VIEWPORT_HEIGHT,
|
||||
endOffset: BIG_TARGET_STATIC_END - VIEWPORT_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'entry', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START - ROOM_ABOVE,
|
||||
endOffset: STATIC_START + VIEWPORT_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'entry-crossing', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'entry-crossing', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START - ROOM_ABOVE,
|
||||
endOffset: BIG_TARGET_STATIC_END - VIEWPORT_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'exit', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) },
|
||||
startOffset: BIG_TARGET_STATIC_END - VIEWPORT_HEIGHT,
|
||||
endOffset: BIG_TARGET_STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'exit-crossing', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'exit-crossing', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START + VIEWPORT_HEIGHT,
|
||||
endOffset: BIG_TARGET_STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
}, 'View timeline target > viewport, ' +
|
||||
'bottom-sticky during entry and top-sticky during exit.');
|
||||
|
||||
promise_test(async t => {
|
||||
sticky.className = "stickycase7";
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } ,
|
||||
rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START - ROOM_ABOVE,
|
||||
endOffset: BIG_TARGET_STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } ,
|
||||
rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START - ROOM_ABOVE + VIEWPORT_HEIGHT,
|
||||
endOffset: BIG_TARGET_STATIC_END + ROOM_BELOW - VIEWPORT_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'entry', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START - ROOM_ABOVE,
|
||||
endOffset: STATIC_START - ROOM_ABOVE + VIEWPORT_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'entry-crossing', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'entry-crossing', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START - ROOM_ABOVE,
|
||||
endOffset: BIG_TARGET_STATIC_END + ROOM_BELOW - VIEWPORT_HEIGHT,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'exit', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) },
|
||||
startOffset: BIG_TARGET_STATIC_END + ROOM_BELOW - VIEWPORT_HEIGHT,
|
||||
endOffset: BIG_TARGET_STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
await runTimelineRangeTest(t, {
|
||||
rangeStart: { rangeName: 'exit-crossing', offset: CSS.percent(0) },
|
||||
rangeEnd: { rangeName: 'exit-crossing', offset: CSS.percent(100) },
|
||||
startOffset: STATIC_START - ROOM_ABOVE + VIEWPORT_HEIGHT,
|
||||
endOffset: BIG_TARGET_STATIC_END + ROOM_BELOW,
|
||||
axis: 'block'
|
||||
});
|
||||
}, 'View timeline target > viewport, ' +
|
||||
'bottom-sticky and top-sticky during contain.');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Загрузка…
Ссылка в новой задаче