Skip to content
Permalink
Browse files
[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
  • Loading branch information
graouts committed Nov 22, 2022
1 parent b78015a commit 2a6e74ada559cc99db27634a06c4c1b298747417
Show file tree
Hide file tree
Showing 5 changed files with 20 additions and 16 deletions.
@@ -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"
@@ -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"
@@ -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"
@@ -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,

@@ -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:

0 comments on commit 2a6e74a

Please sign in to comment.