REGRESSION(270890@main): Animation doesn't trigger when custom proper…

…ty initial value matches the first frame https://bugs.webkit.org/show_bug.cgi?id=265160 rdar://118697176 Reviewed by Antoine Quint. If the initial value of a declared custom property is the same as the first frame we would bail out before computing the cascade effect (since nothing changes). Because of this we would fail to set hasPropertiesOverridenAfterAnimation bit and then proceed to optimize away the cascade updates for future frames too. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-css-variable-dependent-property-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-css-variable-dependent-property.html: Added. * Source/WebCore/style/StyleTreeResolver.cpp: (WebCore::Style::TreeResolver::createAnimatedElementUpdate): Ensure that we apply the cascade when computing the first frame of animation so we know to not optimize away style updates for the subsequent frames. Canonical link: https://commits.webkit.org/271268@main
WebKit · Nov 29, 2023 · 7687d03 · 7687d03
1 parent ab34eaa
commit 7687d03
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/...-platform-tests/css/css-animations/animation-css-variable-dependent-property-expected.txt b/...-platform-tests/css/css-animations/animation-css-variable-dependent-property-expected.txt
@@ -0,0 +1,3 @@
+
+PASS Dependent property updates correctly
+
diff --git a/.../w3c/web-platform-tests/css/css-animations/animation-css-variable-dependent-property.html b/.../w3c/web-platform-tests/css/css-animations/animation-css-variable-dependent-property.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Animations: Dependent property updates correctly when animating a declared custom property</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testcommon.js"></script>
+<style>
+@property --c {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: black;
+}
+@keyframes color-shift {
+    0% {
+        --c: black;
+    }
+    100% {
+        --c: white;
+    }
+}
+#target {
+    color: var(--c);
+    animation: color-shift 1s linear 1 forwards paused
+}
+</style>
+<div id=target></div>
+<div id="log"></div>
+<script>
+
+test(t => {
+  const animation = target.getAnimations()[0];
+
+  assert_equals(
+    getComputedStyle(target).color,
+    'rgb(0, 0, 0)'
+  );
+
+  animation.currentTime = 500;
+
+  assert_equals(
+    getComputedStyle(target).color,
+    'rgb(128, 128, 128)'
+  );
+
+  animation.currentTime = 1000;
+
+  assert_equals(
+    getComputedStyle(target).color,
+    'rgb(255, 255, 255)'
+  );
+
+}, 'Dependent property updates correctly');
+
+</script>
diff --git a/Source/WebCore/style/StyleTreeResolver.cpp b/Source/WebCore/style/StyleTreeResolver.cpp
@@ -619,7 +619,7 @@ ElementUpdate TreeResolver::createAnimatedElementUpdate(ResolvedStyle&& resolved
 
         auto animationImpact = styleable.applyKeyframeEffects(*animatedStyle, animatedProperties, previousLastStyleChangeEventStyle.get(), resolutionContext);
 
-        if (*resolvedStyle.style == *animatedStyle && animationImpact.isEmpty())
+        if (*resolvedStyle.style == *animatedStyle && animationImpact.isEmpty() && previousLastStyleChangeEventStyle)
             return { WTFMove(resolvedStyle.style), animationImpact };
 
         if (resolvedStyle.matchResult) {