Changeset 287518 in webkit

Timestamp:

Jan 2, 2022 9:59:08 AM (7 months ago)

Author:

graouts@webkit.org

Message:

[Web Animations] getKeyframes() should ensure that all properties are present on 0% and 100% keyframes
​https://bugs.webkit.org/show_bug.cgi?id=234795

Reviewed by Dean Jackson.

LayoutTests/imported/w3c:

Mark a WPT progressions.

• web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative-expected.txt:

Source/WebCore:

Keyframes at 0% and 100% may not explicitly specify properties animated on intermediate keyframes, so
in the case of such keyframes, we must ensure we output the non-animated value for properties not
explicitly specified on the keyframe style.

• animation/KeyframeEffect.cpp:

(WebCore::KeyframeEffect::getKeyframes):

Location:

trunk

Files:

• LayoutTests/imported/w3c/ChangeLog (modified) (1 diff)
• LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative-expected.txt (modified) (2 diffs)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/animation/KeyframeEffect.cpp (modified) (3 diffs)

trunk/LayoutTests/imported/w3c/ChangeLog

@@ +1 @@
+2022-01-02  Antoine Quint  <graouts@webkit.org>
+
+        [Web Animations] getKeyframes() should ensure that all properties are present on 0% and 100% keyframes
+        https://bugs.webkit.org/show_bug.cgi?id=234795
+
+        Reviewed by Dean Jackson.
+
+        Mark a WPT progressions.
+
+        * web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative-expected.txt:
+
 2022-01-02  Antoine Quint  <graouts@webkit.org>
 

trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-animations/KeyframeEffect-getKeyframes.tentative-expected.txt

@@ -6 +6 @@
 PASS KeyframeEffect.getKeyframes() returns frames with expected easing values, when the easing is specified on some keyframes
 PASS KeyframeEffect.getKeyframes() returns expected frames for a simple animation that specifies a single shorthand property
-FAIL KeyframeEffect.getKeyframes() returns expected frames for an animation with a 0% keyframe and no 100% keyframe assert_array_equals: properties on Keyframe #1 should match lengths differ, expected array ["color", "composite", "computedOffset", "easing", "offset"] length 5, got ["composite", "computedOffset", "easing", "offset"] length 4
-FAIL KeyframeEffect.getKeyframes() returns expected frames for an animation with a 100% keyframe and no 0% keyframe assert_array_equals: properties on Keyframe #0 should match lengths differ, expected array ["color", "composite", "computedOffset", "easing", "offset"] length 5, got ["composite", "computedOffset", "easing", "offset"] length 4
-FAIL KeyframeEffect.getKeyframes() returns expected frames for an animation with no 0% or 100% keyframe but with a 50% keyframe assert_array_equals: properties on Keyframe #0 should match lengths differ, expected array ["color", "composite", "computedOffset", "easing", "offset"] length 5, got ["composite", "computedOffset", "easing", "offset"] length 4
-FAIL KeyframeEffect.getKeyframes() returns expected frames for an animation with a partially complete 100% keyframe (because the !important rule is ignored) assert_array_equals: properties on Keyframe #1 should match lengths differ, expected array ["composite", "computedOffset", "easing", "marginBottom", "marginTop", "offset"] length 6, got ["composite", "computedOffset", "easing", "marginBottom", "offset"] length 5
+PASS KeyframeEffect.getKeyframes() returns expected frames for an animation with a 0% keyframe and no 100% keyframe
+PASS KeyframeEffect.getKeyframes() returns expected frames for an animation with a 100% keyframe and no 0% keyframe
+PASS KeyframeEffect.getKeyframes() returns expected frames for an animation with no 0% or 100% keyframe but with a 50% keyframe
+PASS KeyframeEffect.getKeyframes() returns expected frames for an animation with a partially complete 100% keyframe (because the !important rule is ignored)
 PASS KeyframeEffect.getKeyframes() returns expected frames for an animation with different properties on different keyframes, all with the same easing function
 PASS KeyframeEffect.getKeyframes() returns expected frames for an animation with different properties on different keyframes, with a different easing function on each
@@ -16 +16 @@
 PASS KeyframeEffect.getKeyframes() returns expected frames for an animation with multiple keyframes for the same time and with different but equivalent easing functions
 PASS KeyframeEffect.getKeyframes() returns expected frames for overlapping keyframes
-FAIL KeyframeEffect.getKeyframes() returns expected values for animations with filter properties and missing keyframes assert_array_equals: properties on Keyframe #0 should match lengths differ, expected array ["composite", "computedOffset", "easing", "filter", "offset"] length 5, got ["composite", "computedOffset", "easing", "offset"] length 4
+FAIL KeyframeEffect.getKeyframes() returns expected values for animations with filter properties and missing keyframes assert_equals: value for 'filter' on Keyframe #1 should match expected "blur(5px) sepia(60%) saturate(30%)" but got "blur(5px) sepia(0.6) saturate(0.3)"
 PASS KeyframeEffect.getKeyframes() returns expected values for animation with drop-shadow of filter property
-FAIL KeyframeEffect.getKeyframes() returns expected values for animations with text-shadow properties and missing keyframes assert_array_equals: properties on Keyframe #0 should match lengths differ, expected array ["composite", "computedOffset", "easing", "offset", "textShadow"] length 5, got ["composite", "computedOffset", "easing", "offset"] length 4
-FAIL KeyframeEffect.getKeyframes() returns expected values for animations with background-size properties and missing keyframes assert_array_equals: properties on ComputedKeyframe #0 should match lengths differ, expected array ["backgroundSize", "composite", "computedOffset", "easing", "offset"] length 5, got ["composite", "computedOffset", "easing", "offset"] length 4
-FAIL KeyframeEffect.getKeyframes() returns expected values for animations with CSS variables as keyframe values assert_array_equals: properties on Keyframe #0 should match lengths differ, expected array ["composite", "computedOffset", "easing", "offset", "transform"] length 5, got ["composite", "computedOffset", "easing", "offset"] length 4
-FAIL KeyframeEffect.getKeyframes() returns expected values for animations with CSS variables as keyframe values in a shorthand property assert_array_equals: properties on Keyframe #0 should match lengths differ, expected array ["composite", "computedOffset", "easing", "marginBottom", "marginLeft", "marginRight", "marginTop", "offset"] length 8, got ["composite", "computedOffset", "easing", "offset"] length 4
-FAIL KeyframeEffect.getKeyframes() returns expected values for animations with a CSS variable which is overriden by the value in keyframe assert_array_equals: properties on Keyframe #0 should match lengths differ, expected array ["color", "composite", "computedOffset", "easing", "offset"] length 5, got ["composite", "computedOffset", "easing", "offset"] length 4
+FAIL KeyframeEffect.getKeyframes() returns expected values for animations with text-shadow properties and missing keyframes assert_equals: value for 'textShadow' on Keyframe #0 should match expected "rgb(0, 0, 0) 1px 1px 2px, rgb(0, 0, 255) 0px 0px 16px, rgb(0, 0, 255) 0px 0px 3.2px" but got "rgb(0, 0, 0) 1px 1px 2px, rgb(0, 0, 255) 0px 0px 16px, rgb(0, 0, 255) 0px 0px 3.200000047683716px"
+FAIL KeyframeEffect.getKeyframes() returns expected values for animations with background-size properties and missing keyframes assert_equals: value for 'backgroundSize' on ComputedKeyframe #1 should match expected "50%, 6px, contain" but got "50%"
+FAIL KeyframeEffect.getKeyframes() returns expected values for animations with CSS variables as keyframe values assert_equals: value for 'transform' on Keyframe #1 should match expected "translate(100px)" but got "matrix(1, 0, 0, 1, 100, 0)"
+PASS KeyframeEffect.getKeyframes() returns expected values for animations with CSS variables as keyframe values in a shorthand property
+PASS KeyframeEffect.getKeyframes() returns expected values for animations with a CSS variable which is overriden by the value in keyframe
 FAIL KeyframeEffect.getKeyframes() returns expected values for animations with only custom property in a keyframe assert_equals: value for 'transform' on Keyframe #0 should match expected "translate(100px)" but got "matrix(1, 0, 0, 1, 100, 0)"
 FAIL KeyframeEffect.getKeyframes() reflects changes to @keyframes rules assert_equals: value for 'left' on Keyframes reflects the updated @keyframes rule should match expected "200px" but got "100px"

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2022-01-02  Antoine Quint  <graouts@webkit.org>
+
+        [Web Animations] getKeyframes() should ensure that all properties are present on 0% and 100% keyframes
+        https://bugs.webkit.org/show_bug.cgi?id=234795
+
+        Reviewed by Dean Jackson.
+
+        Keyframes at 0% and 100% may not explicitly specify properties animated on intermediate keyframes, so
+        in the case of such keyframes, we must ensure we output the non-animated value for properties not
+        explicitly specified on the keyframe style.
+
+        * animation/KeyframeEffect.cpp:
+        (WebCore::KeyframeEffect::getKeyframes):
+
 2022-01-02  Antoine Quint  <graouts@webkit.org>
 

trunk/Source/WebCore/animation/KeyframeEffect.cpp

@@ -636 +636 @@
         auto* target = m_target.get();
         auto* renderer = this->renderer();
+        auto* lastStyleChangeEventStyle = targetStyleable()->lastStyleChangeEventStyle();
 
         auto computedStyleExtractor = ComputedStyleExtractor(target, false, m_pseudoId);
@@ -662 +663 @@
 
             // 3. For each animation property-value pair specified on keyframe, declaration, perform the following steps:
+            auto isFirstOrLastKeyframe = !keyframe.key() || keyframe.key() == 1;
+            auto& properties = isFirstOrLastKeyframe ? m_blendingKeyframes.properties() : keyframe.properties();
             auto& style = *keyframe.style();
-            for (auto cssPropertyId : keyframe.properties()) {
+            for (auto cssPropertyId : properties) {
                 if (cssPropertyId == CSSPropertyCustom)
                     continue;
@@ -670 +673 @@
                 // 2. Let IDL value be the result of serializing the property value of declaration by passing declaration to the algorithm to serialize a CSS value.
                 String idlValue = "";
-                if (auto cssValue = computedStyleExtractor.valueForPropertyInStyle(style, cssPropertyId, renderer))
+                if (isFirstOrLastKeyframe && !keyframe.properties().contains(cssPropertyId) && lastStyleChangeEventStyle) {
+                    if (auto cssValue = computedStyleExtractor.valueForPropertyInStyle(*lastStyleChangeEventStyle, cssPropertyId, renderer))
+                        idlValue = cssValue->cssText();
+                } else if (auto cssValue = computedStyleExtractor.valueForPropertyInStyle(style, cssPropertyId, renderer))
                     idlValue = cssValue->cssText();
                 // 3. Let value be the result of converting IDL value to an ECMAScript String value.