summaryrefslogtreecommitdiffstats
path: root/layout/reftests/css-animations/scroll-timeline-in-delay-omta.html
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--layout/reftests/css-animations/scroll-timeline-in-delay-omta.html71
1 files changed, 71 insertions, 0 deletions
diff --git a/layout/reftests/css-animations/scroll-timeline-in-delay-omta.html b/layout/reftests/css-animations/scroll-timeline-in-delay-omta.html
new file mode 100644
index 0000000000..4dea5b7854
--- /dev/null
+++ b/layout/reftests/css-animations/scroll-timeline-in-delay-omta.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html class="reftest-wait reftest-no-flush">
+<head>
+<title>Scroll the scroll-driven animation from the active phase to delay</title>
+<style>
+ @keyframes anim {
+ from { translate: 100px; }
+ to { translate: 200px; }
+ }
+ #scroller {
+ width: 100px;
+ height: 100px;
+ overflow: scroll;
+ scrollbar-width: none;
+ scroll-timeline: scroll_timeline;
+ }
+ #target {
+ width: 100px;
+ height: 100px;
+ background: green;
+ rotate: 45deg;
+ translate: 50px;
+ animation-name: anim;
+ animation-duration: 5s;
+ animation-timing-function: linear;
+ animation-delay: 5s;
+ animation-timeline: scroll_timeline;
+ }
+</style>
+<script>
+window.addEventListener("MozReftestInvalidate", async () => {
+ const scroller = document.getElementById("scroller");
+ scroller.scrollTop = 75;
+
+ // Wait for the MozAfterPaint to make the view id of |scroller| gets ready.
+ window.addEventListener('MozAfterPaint', async () => {
+ let utils = SpecialPowers.wrap(window).windowUtils;
+ utils.setAsyncScrollOffset(scroller, 0, -50);
+
+ await new Promise(function(resolve, reject) {
+ let repaintDone = function() {
+ SpecialPowers.Services.obs.removeObserver(
+ repaintDone,
+ "apz-repaints-flushed"
+ );
+ resolve();
+ };
+ SpecialPowers.Services.obs.addObserver(repaintDone,
+ "apz-repaints-flushed");
+ if (!utils.flushApzRepaints()) {
+ repaintDone();
+ }
+ });
+
+ // Wait for composition and then take the snapshot.
+ await new Promise(resolve => { requestAnimationFrame(resolve); });
+ await new Promise(resolve => { requestAnimationFrame(resolve); });
+
+ document.documentElement.classList.remove('reftest-wait');
+ }, {once: true});
+});
+
+</script>
+</head>
+<body>
+ <div id="scroller">
+ <div style="height: 100px; padding-bottom: 100px;"></div>
+ </div>
+ <div id="target"></div>
+</body>
+</html>