Seokho Song
19818bbef2
Automatic update from web-platform-tests [css-image-animation-1] Remove .tentative. from wpt and enhance suites Rename the css-image-animation WPTs to remove the .tentative suffix. To make them deterministic, as suggested in CL [1]: - Replace setTimeout()-based waits with waitForFrameTime() from image-animation-utils.js, so waits are driven by frame time. - Start images with image-animation: paused and switch to test data only after load, so each animation timeline starts from a known point. - Pause the animation and wait a frame right before takeScreenshot() to capture the stable frame. [1] https://chromium-review.googlesource.com/c/chromium/src/+/7771511/comment/34cbb664_6fcc7631/ Fixed: 521966698 Change-Id: I608fd01d07233cdc0ed5bb49912ea8edcf15e862 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7911524 Commit-Queue: Seokho Song <seokho@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1657651} -- wpt-commits: 9089531cfc7a76fe192e640f0cd60141b1f21b3f wpt-pr: 61090
52 lines
1.5 KiB
HTML
52 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait">
|
|
<title>image-animation reset when display: none</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-image-animation-1/">
|
|
<meta charset="utf-8" />
|
|
<link rel="match" href="image-animation-display-none-reset-ref.html" />
|
|
<style>
|
|
img {
|
|
image-animation: paused;
|
|
}
|
|
</style>
|
|
<script src="/common/reftest-wait.js"></script>
|
|
<script src="resources/image-animation-utils.js"></script>
|
|
<script>
|
|
let count = 0;
|
|
function loaded() {
|
|
count++;
|
|
if (count < document.querySelectorAll('img').length)
|
|
return;
|
|
|
|
const img1 = document.getElementById('img1');
|
|
const img2 = document.getElementById('img2');
|
|
img1.style.imageAnimation = "running";
|
|
img2.style.imageAnimation = "running";
|
|
|
|
// The GIF (anim-rgb.gif) has 3 frames:
|
|
// Frame 1: red, 20ms
|
|
// Frame 2: green, 200ms
|
|
// Frame 3: blue
|
|
//
|
|
// Wait for frame 2 (green) to be reached.
|
|
waitForFrameTime(100).then(() => {
|
|
img2.style.imageAnimation = 'paused';
|
|
img1.style.display = 'none';
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => {
|
|
img1.style.display = 'inline';
|
|
img1.style.imageAnimation = 'paused';
|
|
requestAnimationFrame(()=>{
|
|
takeScreenshot();
|
|
})
|
|
});
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<img id="img1" src="../../images/anim-rgb.gif" onload="loaded()" />
|
|
<img id="img2" src="../../images/anim-rgb.gif" onload="loaded()" />
|
|
|
|
</html>
|