diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/animation-worklet/worklet-animation-with-scroll-timeline-and-display-none.https.html | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/animation-worklet/worklet-animation-with-scroll-timeline-and-display-none.https.html')
| -rw-r--r-- | testing/web-platform/tests/animation-worklet/worklet-animation-with-scroll-timeline-and-display-none.https.html | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/testing/web-platform/tests/animation-worklet/worklet-animation-with-scroll-timeline-and-display-none.https.html b/testing/web-platform/tests/animation-worklet/worklet-animation-with-scroll-timeline-and-display-none.https.html new file mode 100644 index 0000000000..0bba0039da --- /dev/null +++ b/testing/web-platform/tests/animation-worklet/worklet-animation-with-scroll-timeline-and-display-none.https.html @@ -0,0 +1,84 @@ +<html class="reftest-wait"> +<title>Scroll timeline with WorkletAnimation and transition from display:none to display:block</title> +<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/"> +<meta name="assert" content="Scroll timeline should properly handle going from display:none to display:block"> +<link rel="match" href="worklet-animation-with-scroll-timeline-ref.html"> + +<script src="/web-animations/testcommon.js"></script> +<script src="/common/reftest-wait.js"></script> +<script src="common.js"></script> + +<style> + #box { + width: 100px; + height: 100px; + background-color: green; + } + + #covered { + width: 100px; + height: 100px; + background-color: red; + } + + /* Hide scrollbars to avoid unnecessary visual issues related to them */ + #scroller::-webkit-scrollbar { + display: none; + } + + #scroller { + scrollbar-width: none; + overflow: auto; + height: 100px; + width: 100px; + will-change: transform; /* force compositing */ + } + + .removed { + display: none; + } + + #contents { + height: 1000px; + width: 100%; + } +</style> + +<div id="box"></div> +<div id="covered"></div> +<div id="scroller"> + <div id="contents"></div> +</div> + +<script> + registerPassthroughAnimator().then(()=>{ + const box = document.getElementById('box'); + const effect = new KeyframeEffect(box, + [ + { transform: 'translateY(0)', opacity: 1 }, + { transform: 'translateY(200px)', opacity: 0 } + ], { + duration: 1000, + } + ); + + const scroller = document.getElementById('scroller'); + scroller.classList.add('removed'); + const timeline = new ScrollTimeline({ scrollSource: scroller, orientation: 'block' }); + const animation = new WorkletAnimation('passthrough', effect, timeline); + animation.play(); + + // Ensure that the WorkletAnimation will have been started on the compositor. + waitForAsyncAnimationFrames(1).then(_ => { + // Now return the scroller to the world, which will cause it to be composited + // and the animation should update on the compositor side. + scroller.classList.remove('removed'); + const maxScroll = scroller.scrollHeight - scroller.clientHeight; + scroller.scrollTop = 0.5 * maxScroll; + + waitForAsyncAnimationFrames(1).then(_ => { + takeScreenshot(); + }); + }); + }); +</script>
\ No newline at end of file |