[web-animations] word-spacing should support animating between percen…

…tage and fixed values

https://bugs.webkit.org/show_bug.cgi?id=248218

Reviewed by Tim Nguyen.

While we support percentage values for word-spacing, we do not support blending between fixed and percentage values,
so we add the <length-percentage> flag to its animation wrapper. And now that we may produce calculated values as a
result, we account for non-fixed values when serializing the computed style for that property.

There remains the issue where we fail to parse calculated values for word-spacing and this causes a few remaining
FAIL results, this will be dealt with in bug 248220.

* LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-002-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-002-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt:
* Source/WebCore/animation/CSSPropertyAnimation.cpp:
(WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
* Source/WebCore/css/ComputedStyleExtractor.cpp:
(WebCore::ComputedStyleExtractor::valueForPropertyInStyle):

Canonical link: https://commits.webkit.org/256951@main

LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/accumulation-per-property-002-expected.txt

@@ -278,11 +278,11 @@ PASS word-break: "keep-all" onto "break-all"
 PASS word-spacing (type: lengthPercentageOrCalc) has testAccumulation function
 PASS word-spacing: length
 PASS word-spacing: length of rem
-FAIL word-spacing: percentage assert_equals: The value should be 130% at 0ms expected "130%" but got "3.25px"
-FAIL word-spacing: units "%" onto "px" assert_equals: The value should be calc(10% + 10px) at 0ms expected "calc(10% + 10px)" but got "0.25px"
-FAIL word-spacing: units "px" onto "%" assert_equals: The value should be calc(10% + 10px) at 0ms expected "calc(10% + 10px)" but got "3355443px"
-FAIL word-spacing: units "rem" onto "%" assert_equals: The value should be calc(10% + 20px) at 0ms expected "calc(10% + 20px)" but got "3355443px"
-FAIL word-spacing: units "%" onto "rem" assert_equals: The value should be calc(10% + 20px) at 0ms expected "calc(10% + 20px)" but got "0.25px"
+PASS word-spacing: percentage
+PASS word-spacing: units "%" onto "px"
+PASS word-spacing: units "px" onto "%"
+PASS word-spacing: units "rem" onto "%"
+PASS word-spacing: units "%" onto "rem"
 PASS word-spacing: units "rem" onto "em"
 PASS word-spacing: units "em" onto "rem"
 FAIL word-spacing: units "calc" onto "px" assert_equals: The value should be calc(20% + 30px) at 0ms expected "calc(20% + 30px)" but got "20px"

LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/addition-per-property-002-expected.txt

@@ -274,11 +274,11 @@ PASS word-break: "keep-all" onto "break-all"
 PASS word-spacing (type: lengthPercentageOrCalc) has testAddition function
 PASS word-spacing: length
 PASS word-spacing: length of rem
-FAIL word-spacing: percentage assert_equals: The value should be 130% at 0ms expected "130%" but got "3.25px"
-FAIL word-spacing: units "%" onto "px" assert_equals: The value should be calc(10% + 10px) at 0ms expected "calc(10% + 10px)" but got "0.25px"
-FAIL word-spacing: units "px" onto "%" assert_equals: The value should be calc(10% + 10px) at 0ms expected "calc(10% + 10px)" but got "3355443px"
-FAIL word-spacing: units "rem" onto "%" assert_equals: The value should be calc(10% + 20px) at 0ms expected "calc(10% + 20px)" but got "3355443px"
-FAIL word-spacing: units "%" onto "rem" assert_equals: The value should be calc(10% + 20px) at 0ms expected "calc(10% + 20px)" but got "0.25px"
+PASS word-spacing: percentage
+PASS word-spacing: units "%" onto "px"
+PASS word-spacing: units "px" onto "%"
+PASS word-spacing: units "rem" onto "%"
+PASS word-spacing: units "%" onto "rem"
 PASS word-spacing: units "rem" onto "em"
 PASS word-spacing: units "em" onto "rem"
 FAIL word-spacing: units "calc" onto "px" assert_equals: The value should be calc(20% + 30px) at 0ms expected "calc(20% + 30px)" but got "20px"

LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt

@@ -342,9 +342,9 @@ PASS word-break uses discrete animation when animating between "keep-all" and "b
 PASS word-spacing (type: lengthPercentageOrCalc) has testInterpolation function
 PASS word-spacing supports animating as a length
 PASS word-spacing supports animating as a length of rem
-FAIL word-spacing supports animating as a percentage assert_equals: The value should be 30% at 500ms expected "30%" but got "0.75px"
-FAIL word-spacing supports animating as combination units "px" and "%" assert_equals: The value should be calc(10% + 5px) at 500ms expected "calc(10% + 5px)" but got "0.5px"
-FAIL word-spacing supports animating as combination units "%" and "em" assert_equals: The value should be calc(5% + 10px) at 500ms expected "calc(5% + 10px)" but got "20px"
+PASS word-spacing supports animating as a percentage
+PASS word-spacing supports animating as combination units "px" and "%"
+PASS word-spacing supports animating as combination units "%" and "em"
 PASS word-spacing supports animating as combination units "em" and "rem"
 FAIL word-spacing supports animating as combination units "px" and "calc" assert_equals: The value should be calc(10% + 10px) at 500ms expected "calc(10% + 10px)" but got "0px"
 FAIL word-spacing supports animating as a calc assert_equals: The value should be calc(15% + 15px) at 500ms expected "calc(15% + 15px)" but got "0px"

Source/WebCore/animation/CSSPropertyAnimation.cpp

@@ -3248,7 +3248,7 @@ CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap()
         new PropertyWrapper<float>(CSSPropertyOutlineOffset, &RenderStyle::outlineOffset, &RenderStyle::setOutlineOffset),
         new FloatPropertyWrapper(CSSPropertyOutlineWidth, &RenderStyle::outlineWidth, &RenderStyle::setOutlineWidth, FloatPropertyWrapper::ValueRange::NonNegative),
         new PropertyWrapper<float>(CSSPropertyLetterSpacing, &RenderStyle::letterSpacing, &RenderStyle::setLetterSpacing),
-        new LengthPropertyWrapper(CSSPropertyWordSpacing, &RenderStyle::wordSpacing, &RenderStyle::setWordSpacing),
+        new LengthPropertyWrapper(CSSPropertyWordSpacing, &RenderStyle::wordSpacing, &RenderStyle::setWordSpacing, LengthPropertyWrapper::Flags::IsLengthPercentage),
         new TextIndentWrapper,
         new VerticalAlignWrapper,
 

Source/WebCore/css/ComputedStyleExtractor.cpp

@@ -3609,8 +3609,12 @@ RefPtr<CSSValue> ComputedStyleExtractor::valueForPropertyInStyle(const RenderSty
         return willChangePropertyValue(style.willChange());
     case CSSPropertyWordBreak:
         return cssValuePool.createValue(style.wordBreak());
-    case CSSPropertyWordSpacing:
-        return zoomAdjustedPixelValue(style.fontCascade().wordSpacing(), style);
+    case CSSPropertyWordSpacing: {
+        auto& wordSpacingLength = style.wordSpacing();
+        if (wordSpacingLength.isFixed() || wordSpacingLength.isAuto())
+            return zoomAdjustedPixelValue(style.fontCascade().wordSpacing(), style);
+        return cssValuePool.createValue(wordSpacingLength, style);
+    }
     case CSSPropertyLineBreak:
         return cssValuePool.createValue(style.lineBreak());
     case CSSPropertyWebkitNbspMode: