diff options
Diffstat (limited to 'testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-range.html')
| -rw-r--r-- | testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-range.html | 198 |
1 files changed, 198 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-range.html b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-range.html new file mode 100644 index 0000000000..5042c6c2a0 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/view-timelines/view-timeline-range.html @@ -0,0 +1,198 @@ +<!DOCTYPE html> +<html id="top"> +<meta charset="utf-8"> +<title>View timeline delay</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 { + border: 10px solid lightgray; + overflow-x: scroll; + height: 200px; + width: 200px; + } + #content { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + width: 1800px; + margin: 0; + } + .spacer { + width: 800px; + display: inline-block; + } + #target { + background-color: green; + height: 100px; + width: 100px; + display: inline-block; + font-size: 10px; + } +</style> +<body> + <div id="container"> + <div id="content"> + <div class="spacer"></div> + <div id="target"></div> + <div class="spacer"></div> + </div> + </div> +</body> +<script type="text/javascript"> + promise_test(async t => { + // Delays are associated with the animation and not with the timeline. + // Thus adjusting the delays has no effect on the timeline offsets. The + // offsets always correspond to the 'cover' range. + const verifyTimelineOffsets = anim => { + const timeline = anim.timeline; + assert_px_equals(timeline.startOffset, 600, 'startOffset'); + assert_px_equals(timeline.endOffset, 900, 'endOffset'); + }; + await runTimelineRangeTest(t, { + rangeStart: { rangeName: 'cover', offset: CSS.percent(0) } , + rangeEnd: { rangeName: 'cover', offset: CSS.percent(100) }, + startOffset: 600, + endOffset: 900 + }).then(anim => { + verifyTimelineOffsets(anim); + }); + await runTimelineRangeTest(t, { + rangeStart: { rangeName: 'contain', offset: CSS.percent(0) } , + rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) }, + startOffset: 700, + endOffset: 800 + }).then(anim => { + verifyTimelineOffsets(anim); + }); + await runTimelineRangeTest(t, { + rangeStart: { rangeName: 'entry', offset: CSS.percent(0) }, + rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) }, + startOffset: 600, + endOffset: 700 + }); + await runTimelineRangeTest(t, { + rangeStart: { rangeName: 'entry-crossing', offset: CSS.percent(0) }, + rangeEnd: { rangeName: 'entry-crossing', offset: CSS.percent(100) }, + startOffset: 600, + endOffset: 700 + }); + await runTimelineRangeTest(t, { + rangeStart: { rangeName: 'exit', offset: CSS.percent(0) }, + rangeEnd: { rangeName: 'exit', offset: CSS.percent(100) }, + startOffset: 800, + endOffset: 900 + }); + await runTimelineRangeTest(t, { + rangeStart: { rangeName: 'exit-crossing', offset: CSS.percent(0) }, + rangeEnd: { rangeName: 'exit-crossing', offset: CSS.percent(100) }, + startOffset: 800, + endOffset: 900 + }); + await runTimelineRangeTest(t, { + rangeStart: { rangeName: 'contain', offset: CSS.percent(-50) }, + rangeEnd: { rangeName: 'entry', offset: CSS.percent(200) }, + startOffset: 650, + endOffset: 800 + }); + }, 'View timeline with range as <name> <percent> pair.' ); + + promise_test(async t => { + await runTimelineRangeTest(t, { + rangeStart: { rangeName: 'entry' }, + rangeEnd: { rangeName: 'exit' }, + startOffset: 600, + endOffset: 900 + }); + await runTimelineRangeTest(t, { + rangeStart: { offset: CSS.percent(0) }, + rangeEnd: { offset: CSS.percent(100) }, + startOffset: 600, + endOffset: 900 + }); + }, 'View timeline with range and inferred name or offset.' ); + + promise_test(async t => { + await runTimelineRangeTest(t, { + rangeStart: { rangeName: 'cover', offset: CSS.px(20) } , + rangeEnd: { rangeName: 'cover', offset: CSS.px(100) }, + startOffset: 620, + endOffset: 700 + }); + + await runTimelineRangeTest(t, { + rangeStart: { rangeName: 'contain', offset: CSS.px(20) } , + rangeEnd: { rangeName: 'contain', offset: CSS.px(100) }, + startOffset: 720, + endOffset: 800 + }); + + await runTimelineRangeTest(t, { + rangeStart: { rangeName: 'entry', offset: CSS.px(20) } , + rangeEnd: { rangeName: 'entry', offset: CSS.px(100) }, + startOffset: 620, + endOffset: 700 + }); + + await runTimelineRangeTest(t, { + rangeStart: { rangeName: 'exit', offset: CSS.px(20) } , + rangeEnd: { rangeName: 'exit', offset: CSS.px(80) }, + startOffset: 820, + endOffset: 880 + }); + + }, 'View timeline with range as <name> <px> pair.' ); + + promise_test(async t => { + await runTimelineRangeTest(t, { + rangeStart: { + rangeName: 'contain', + offset: new CSSMathSum(CSS.percent(0), CSS.px(20)) + }, + rangeEnd: { + rangeName: 'contain', + offset: new CSSMathSum(CSS.percent(100), CSS.px(-10)) + }, + startOffset: 720, + endOffset: 790 + }); + + }, 'View timeline with range as <name> <percent+px> pair.' ); + + promise_test(async t => { + await runTimelineRangeTest(t, { + rangeStart: "contain -50%", + rangeEnd: "entry 200%", + startOffset: 650, + endOffset: 800 + }); + + await runTimelineRangeTest(t, { + rangeStart: "contain 20px", + rangeEnd: "contain 100px", + startOffset: 720, + endOffset: 800 + }); + + await runTimelineRangeTest(t, { + rangeStart: "contain calc(0% + 20px)", + rangeEnd: "contain calc(100% - 10px)", + startOffset: 720, + endOffset: 790 + }); + + await runTimelineRangeTest(t, { + rangeStart: "exit 2em", + rangeEnd: "exit 8em", + startOffset: 820, + endOffset: 880 + }); + + + }, 'View timeline with range as strings.'); + +</script> |