mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-09 11:25:00 +00:00
38556e307d
The spec is still using `Scroll-linked`, so we exclude the change of WPT tests. I believe WPT will get updates once the spec doc is renamed. Differential Revision: https://phabricator.services.mozilla.com/D165914
72 lines
1.9 KiB
HTML
72 lines
1.9 KiB
HTML
<!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>
|