8000 CSS animations should participate in the cascade · WebKit/WebKit@eb9e694 · GitHub
[go: up one dir, main page]
Skip to content

Commit eb9e694

Browse files
anttijkanttijk
committed
CSS animations should participate in the cascade
https://bugs.webkit.org/show_bug.cgi?id=210963 rdar://62301534 Reviewed by Antoine Quint. Property animation can affect other properties, for example via em units when animating font-size or var() when animating custom properties. Animated values can also be overridden by !important properties. With this patch we start applying the cascade after computing animated style. Only the properties that may be affected are recomputed. * LayoutTests/TestExpectations: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-001-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-003-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-004-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-001-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-animations/keyframes-unrelated-custom-property-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-non-inherited-used-by-standard-property-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-transition-non-inherited-used-by-standard-property-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-base-response-001-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-base-response-003-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-from-to-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-variables/variable-animation-over-transition-expected.txt: A pile of progressions. * Source/WebCore/animation/KeyframeEffectStack.cpp: (WebCore::KeyframeEffectStack::applyKeyframeEffects): Collected animated properties. * Source/WebCore/animation/KeyframeEffectStack.h: * Source/WebCore/animation/WebAnimationTypes.h: * Source/WebCore/dom/Element.h: * Source/WebCore/html/shadow/TextControlInnerElements.cpp: (WebCore::TextControlInnerElement::resolveCustomStyle): (WebCore::TextControlInnerTextElement::resolveCustomStyle): * Source/WebCore/rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::customPropertiesEqual const): * Source/WebCore/rendering/style/RenderStyle.h: * Source/WebCore/style/ElementRuleCollector.cpp: (WebCore::Style::ElementRuleCollector::ElementRuleCollector): Switch to std::unique_ptr<MatchResult> for easier shuffling around. (WebCore::Style::ElementRuleCollector::matchResult const): (WebCore::Style::ElementRuleCollector::releaseMatchResult): (WebCore::Style::ElementRuleCollector::addElementStyleProperties): (WebCore::Style::ElementRuleCollector::declarationsForOrigin): (WebCore::Style::ElementRuleCollector::transferMatchedRules): (WebCore::Style::ElementRuleCollector::addMatchedProperties): (WebCore::Style::ElementRuleCollector::addAuthorKeyframeRules): * Source/WebCore/style/ElementRuleCollector.h: * Source/WebCore/style/MatchResult.h: * Source/WebCore/style/PropertyCascade.cpp: (WebCore::Style::PropertyCascade::PropertyCascade): (WebCore::Style::PropertyCascade::AnimationLayer::AnimationLayer): Animations behave like a cascade layer, that's where the name of this helper struct comes from. (WebCore::Style::PropertyCascade::set): (WebCore::Style::PropertyCascade::setDeferred): (WebCore::Style::PropertyCascade::addMatch): (WebCore::Style::PropertyCascade::shouldApplyAfterAnimation): Build a cascade that only contains properties that require re-resolving after animation. (WebCore::Style::initializeCSSValue): Deleted. * Source/WebCore/style/PropertyCascade.h: (WebCore::Style::PropertyCascade::isEmpty const): In normal cases there is nothing to apply after animations so we can bail out. * Source/WebCore/style/StyleAdjuster.h: * Source/WebCore/style/StyleBuilder.cpp: (WebCore::Style::Builder::Builder): (WebCore::Style::Builder::applyAllProperties): * Source/WebCore/style/StyleBuilder.h: * Source/WebCore/style/StyleResolver.cpp: (WebCore::Style::Resolver::styleForElement): Return the MatchResult along with the style. This allows us to reapply the cascade without matching the selectors again. * Source/WebCore/style/StyleResolver.h: (WebCore::Style::ElementStyle::ElementStyle): Deleted. * Source/WebCore/style/StyleTreeResolver.cpp: (WebCore::Style::TreeResolver::styleForStyleable): (WebCore::Style::TreeResolver::resolveElement): (WebCore::Style::TreeResolver::resolvePseudoElement): (WebCore::Style::TreeResolver::resolveAncestorPseudoElement): (WebCore::Style::TreeResolver::createAnimatedElementUpdate): (WebCore::Style::TreeResolver::applyCascadeAfterAnimation): Build and apply the cascade. * Source/WebCore/style/StyleTreeResolver.h: * Source/WebCore/style/Styleable.h: (WebCore::Styleable::applyKeyframeEffects const): Canonical link: https://commits.webkit.org/258514@main
1 parent 6a81017 commit eb9e694

File tree

37 files changed

+215
-119
lines changed

37 files changed

+215
-119
lines changed

‎LayoutTests/TestExpectations‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2309,9 +2309,6 @@ webkit.org/b/148026 [ Debug ] animations/restart-after-scroll.html [ Skip ]
23092309

23102310
webkit.org/b/148650 fast/repaint/add-table-overpaint.html [ Pass Failure ]
23112311

2312-
imported/w3c/web-platform-tests/css/css-cascade/important-prop.html [ ImageOnlyFailure ]
2313-
webkit.org/b/192334 imported/w3c/web-platform-tests/css/css-cascade/revert-layer-011.html [ ImageOnlyFailure ]
2314-
23152312
# Initial failures on the import of css-content
23162313

23172314
imported/w3c/web-platform-tests/css/css-content/element-replacement-on-replaced-element.tentative.html [ ImageOnlyFailure ]
@@ -4134,7 +4131,6 @@ webkit.org/b/206579 [ Debug ] imported/w3c/web-platform-tests/css/css-background
41344131

41354132
webkit.org/b/207262 imported/w3c/web-platform-tests/web-animations/timing-model/animations/sync-start-times.html [ Pass ImageOnlyFailure ]
41364133

4137-
webkit.org/b/210963 imported/w3c/web-platform-tests/css/css-animations/animation-important-002.html [ ImageOnlyFailure ]
41384134
webkit.org/b/235110 imported/w3c/web-platform-tests/css/css-animations/flip-running-animation-via-variable.html [ ImageOnlyFailure ]
41394135

41404136
webkit.org/b/230080 imported/w3c/web-platform-tests/css/css-transforms/transform-transformed-tr-percent-height-child.html [ ImageOnlyFailure ]

‎LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-001-expected.txt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
FAIL em units respond to font-size animation assert_equals: expected "15px" but got "1px"
3-
FAIL ex units respond to font-size animation assert_equals: expected "6.71875px" but got "0.4375px"
4-
FAIL var() references respond to custom property animation assert_equals: expected "20px" but got "0px"
2+
PASS em units respond to font-size animation
3+
PASS ex units respond to font-size animation
4+
PASS var() references respond to custom property animation
55

‎LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-003-expected.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11

2-
FAIL Identical elements are all responsive to font-size animation assert_equals: expected "15px" but got "1px"
2+
PASS Identical elements are all responsive to font-size animation
33

‎LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-base-response-004-expected.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11

2-
FAIL Base is responsive to font-affecting appearing via setKeyframes assert_equals: expected "15px" but got "10px"
2+
PASS Base is responsive to font-affecting appearing via setKeyframes
33

‎LayoutTests/imported/w3c/web-platform-tests/css/css-animations/animation-important-001-expected.txt‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11

22
PASS Interpolated value is observable
3-
FAIL Important rules override animations assert_equals: expected "rgb(0, 128, 0)" but got "rgb(15, 15, 15)"
4-
FAIL Non-overriden interpolations are observable assert_equals: expected "rgb(0, 128, 0)" but got "rgb(15, 15, 15)"
3+
PASS Important rules override animations
4+
PASS Non-overriden interpolations are observable
55
FAIL Important rules override animations (::before) assert_equals: expected "rgb(0, 128, 0)" but got "rgb(15, 15, 15)"
66
PASS Important rules do not override animations on :visited as seen from JS
7-
FAIL Standard property animations appearing via setKeyframes do not override important declarations assert_equals: expected "rgb(255, 255, 255)" but got "rgb(15, 15, 15)"
8-
FAIL Custom property animations appearing via setKeyframes do not override important declarations assert_equals: expected "10px" but got "150px"
7+
PASS Standard property animations appearing via setKeyframes do not override important declarations
8+
PASS Custom property animations appearing via setKeyframes do not override important declarations
99

‎LayoutTests/imported/w3c/web-platform-tests/css/css-animations/keyframes-unrelated-custom-property-expected.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11

2-
FAIL Unrelated custom properties do not conflict with each other assert_equals: expected "rgb(0, 128, 0)" but got "rgb(255, 0, 0)"
2+
PASS Unrelated custom properties do not conflict with each other
33

‎LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-animation-non-inherited-used-by-standard-property-expected.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11

2-
FAIL Animating a non-inherited CSS variable is reflected on a standard property using that variable as a value assert_equals: expected "25px" but got "0px"
2+
PASS Animating a non-inherited CSS variable is reflected on a standard property using that variable as a value
33

‎LayoutTests/imported/w3c/web-platform-tests/css/css-properties-values-api/animation/custom-property-transition-non-inherited-used-by-standard-property-expected.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11

2-
FAIL Running a transition a non-inherited CSS variable is reflected on a standard property using that variable as a value assert_equals: expected "150px" but got "200px"
2+
PASS Running a transition a non-inherited CSS variable is reflected on a standard property using that variable as a value
33

‎LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-base-response-001-expected.txt‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
FAIL em units respond to font-size transition assert_equals: expected "15px" but got "20px"
3-
FAIL ex units respond to font-size transition assert_equals: expected "6.71875px" but got "8.96875px"
2+
PASS em units respond to font-size transition
3+
PASS ex units respond to font-size transition
44
PASS var() references respond to custom property transition
55

‎LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-base-response-003-expected.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11

2-
FAIL Identical elements are all responsive to font-size transition assert_equals: expected "15px" but got "20px"
2+
PASS Identical elements are all responsive to font-size transition
33

0 commit comments

Comments
 (0)
0