Animation: update image active frame when update the rendering (#36286)

When no CSS animation exist, register timer for image animation, update
animated image active image frame as part of update_the_rendering, mark
node as dirty if the corresponding image need update. Added unit test to
test ImageAnimationState.

Part of https://github.com/servo/servo/issues/36057, the last step to
let the Animated Image "Move".

Testing: Introduced new WPT RefTest for animated image, but fail because
of https://github.com/servo/servo/issues/36931. New unit test for
`ImageAnimationState`.
Fixes: https://github.com/servo/servo/issues/22903
https://github.com/servo/servo/issues/36057

[Try](https://github.com/rayguo17/servo/actions/runs/14724729664)

---------

Signed-off-by: rayguo17 <rayguo17@gmail.com>
This commit is contained in:
TIN TUN AUNG 2025-05-23 11:13:35 +08:00 committed by GitHub
parent 2353c0089f
commit 23ce7b31ac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 313 additions and 8 deletions

View file

@ -353540,6 +353540,19 @@
{}
]
],
"animated-image-update.tentative.html": [
"6875188ad1698155b7690ccdcbc3478fff4fff1c",
[
null,
[
[
"/html/semantics/embedded-content/the-img-element/animated-image-update-ref.tentative.html",
"=="
]
],
{}
]
],
"available-images.html": [
"779ff978689e4f5565b8d45d383efa75ac78b8b2",
[
@ -481177,6 +481190,10 @@
"28d0ead2dbc3f9db5e7c2714cc72434b4bc367a2",
[]
],
"animated-image-update-ref.tentative.html": [
"f2d7fb6cff15f2a87144330249bbdc2698fad550",
[]
],
"available-images-ref.html": [
"8061abae50899a2befe286723d8bd5c285b356ab",
[]
@ -481254,6 +481271,10 @@
]
},
"resources": {
"animated.gif": [
"7694add55e0c98ec3ee5d9110e5fb16b4d819137",
[]
],
"blue-10.png": [
"62949e08d87dfcdc0987eaef67692c7a1c16aa50",
[]

View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<head>
<title>Reference for Animated image active frame update when passing delay time</title>
</head>
<body>
<img src="resources/green.png">
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<title>Animated image active frame update when passing delay time</title>
<link rel="match" href="animated-image-update-ref.tentative.html">
<link rel="author" title="Tin Tun Aung" href="mailto:rayguo17@gmail.com">
<script src="/common/reftest-wait.js"></script>
</head>
<body>
<img id="image" src="resources/animated.gif">
<script>
const image = document.getElementById('image');
requestAnimationFrame(()=>{
setTimeout(() => {
takeScreenshot();
}, 150);
})
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 311 B