[css-easing-2] Implement linear(...) easing function for css animations #15936

dcrousso · 2023-07-19T20:25:59Z

`2b0ebfa`

[css-easing-2] Implement linear(...) easing function for css animations
https://bugs.webkit.org/show_bug.cgi?id=240061
<rdar://problem/93088094>

Reviewed by Dean Jackson.

Add support for the `linear()` CSS timing function <https://drafts.csswg.org/css-easing-2/#the-linear-easing-function>.

* Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp:
(WebCore::consumeLinear): Added.
(WebCore::CSSPropertyParserHelpers::consumeTimingFunction):
* Source/WebCore/css/ComputedStyleExtractor.cpp:
(WebCore::valueForAnimationTimingFunction):
Implement parsing logic for CSS `linear()` <https://drafts.csswg.org/css-easing-2/#linear-easing-function-parsing>.

* Source/WebCore/platform/animation/TimingFunction.h:
(WebCore::LinearTimingFunction::Point::operator== const): Added.
(WebCore::LinearTimingFunction::create): Added.
(WebCore::LinearTimingFunction::operator== const): Added.
(WebCore::LinearTimingFunction::points const): Added.
(WebCore::LinearTimingFunction::identity): Renamed from `sharedLinearTimingFunction`.
(WebCore::LinearTimingFunction::LinearTimingFunction): Added.
(WebCore::LinearTimingFunction::clone):
* Source/WebCore/platform/animation/TimingFunction.cpp:
(WebCore::operator<<):
(WebCore::TimingFunction::transformProgress const):
(WebCore::TimingFunction::createFromCSSValue):
(WebCore::TimingFunction::cssText const):
* Source/WebKit/Shared/WebCoreArgumentCoders.serialization.in:
* Source/WebCore/css/CSSTimingFunctionValue.h:
(WebCore::CSSLinearTimingFunctionValue::create): Added.
(WebCore::CSSLinearTimingFunctionValue::points const): Added.
(WebCore::CSSLinearTimingFunctionValue::CSSLinearTimingFunctionValue): Added.
* Source/WebCore/css/CSSTimingFunctionValue.cpp:
(WebCore::CSSLinearTimingFunctionValue::customCSSText const): Added.
(WebCore::CSSLinearTimingFunctionValue::equals const): Added.
* Source/WebCore/css/CSSValue.h:
(WebCore::CSSValue::isLinearTimingFunctionValue const): Added.
* Source/WebCore/css/CSSValue.cpp:
(WebCore::CSSValue::visitDerived):
Add subclasses and member variables to support CSS `linear()`.
Implement the logic to calculate the current value of a CSS `linear()` given the current progress <https://drafts.csswg.org/css-easing-2/#linear-easing-function-output>.

* Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp:
(WebCore::keyframeValueListHasSingleIntervalWithLinearOrEquivalentTimingFunction):
(WebCore::GraphicsLayerCA::timingFunctionForAnimationValue):
* Source/WebCore/platform/graphics/ca/cocoa/PlatformCAAnimationCocoa.mm:
(WebCore::toCAMediaTimingFunction):
Use renamed `identity` instead of `sharedLinearTimingFunction` since `LinearTimingFunction` can now be more than just an identity function.

* Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js:
Add basic autocompletion support for `linear()` in Web Inspector.

* LayoutTests/imported/w3c/web-platform-tests/css/css-easing/linear-timing-functions-output.tentative.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-easing/linear-timing-functions-output.tentative-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-easing/linear-timing-functions-syntax.tentative.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-easing/linear-timing-functions-syntax.tentative-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-computed.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-computed-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-invalid.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-invalid-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-valid.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-valid-expected.txt: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-easing/w3c-import.log:
* LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/transition-timing-function.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/parsing/transition-timing-function-valid.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/parsing/transition-timing-function-valid-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-001.html:
* LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-001-expected.txt:

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

06346cb

Misc	iOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 wincairo
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🛠 gtk
	✅ 🧪 ios-wk2-wpt	✅ 🧪 mac-wk1	✅ 🧪 gtk-wk2
	✅ 🧪 api-ios	✅ 🧪 mac-wk2	✅ 🧪 api-gtk
	✅ 🛠 tv	❌ 🧪 mac-AS-debug-wk2
	✅ 🛠 tv-sim	✅ 🧪 mac-wk2-stress
✅ 🛠 🧪 merge	✅ 🛠 watch
	✅ 🛠 watch-sim

webkit-early-warning-system · 2023-07-19T20:26:08Z

EWS run on previous version of this PR (hash 9c57df9)

Misc	iOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 wincairo
✅ 🧪 bindings	✅ 🛠 ios-sim	❌ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🛠 gtk
	✅ 🧪 ios-wk2-wpt	✅ 🧪 mac-wk1	✅ 🧪 gtk-wk2
	✅ 🧪 api-ios	✅ 🧪 mac-wk2	❌ 🧪 api-gtk
	✅ 🛠 tv	❌ 🧪 mac-AS-debug-wk2
	✅ 🛠 tv-sim
	✅ 🛠 watch
	✅ 🛠 watch-sim

webkit-early-warning-system · 2023-07-19T22:59:11Z

EWS run on previous version of this PR (hash bb428ce)

Misc	iOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	⏳ 🛠 wincairo
✅ 🧪 bindings	✅ 🛠 ios-sim	❌ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	~~🛠 gtk~~
	✅ 🧪 ios-wk2-wpt	✅ 🧪 mac-wk1	❌ 🧪 gtk-wk2
	✅ 🧪 api-ios	✅ 🧪 mac-wk2	✅ 🧪 api-gtk
	✅ 🛠 tv	❌ 🧪 mac-AS-debug-wk2
	✅ 🛠 tv-sim	✅ 🧪 mac-wk2-stress
	✅ 🛠 watch
	✅ 🛠 watch-sim

grorg · 2023-07-19T23:04:45Z

Source/WebCore/css/CSSTimingFunctionValue.cpp

+
+bool CSSLinearTimingFunctionValue::equals(const CSSLinearTimingFunctionValue& other) const
+{
+    return m_points == other.m_points;


Does this actually check that the two Vector<LinearTimingFunction::Point>s have the same values? I guess I'm asking what LinearTimingFunction::Point is.

LinearTimingFunction::Point is basically a named tuple of double value (i.e. what the transformed/animated value should be) and double progress (i.e. at what point in the transition/animation). it has it's own operator== so it should be using that to compare

grorg · 2023-07-19T23:08:57Z

Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp

+                lastPointIsExtraPoint = true;
+            }
+        } else if (steps.size() == 1) {
+            largestInput = 0.0;


Is there a reason to do this? The first time through the loop will always run this code, so you could initialise largestInput before.

Oh no wait, I didn't read it properly. Only runs if you didn't get a percent value. Sorry.

yeah this corresponds to step 4.4 of <https://drafts.csswg.org/css-easing-2/#linear-easing-function-parsing>

webkit-early-warning-system · 2023-07-20T00:14:44Z

EWS run on previous version of this PR (hash dc3194a)

Misc	iOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 wincairo
✅ 🧪 bindings	✅ 🛠 ios-sim	❌ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🛠 gtk
	✅ 🧪 ios-wk2-wpt	✅ 🧪 mac-wk1	✅ 🧪 gtk-wk2
	✅ 🧪 api-ios	✅ 🧪 mac-wk2	✅ 🧪 api-gtk
	✅ 🛠 tv	❌ 🧪 mac-AS-debug-wk2
	✅ 🛠 tv-sim	✅ 🧪 mac-wk2-stress
	✅ 🛠 watch
	✅ 🛠 watch-sim

webkit-early-warning-system · 2023-07-20T03:49:40Z

EWS run on previous version of this PR (hash d35e129)

Misc	iOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 wincairo
✅ 🧪 bindings	✅ 🛠 ios-sim	❌ 🛠 mac-AS-debug	~~🧪 wpe-wk2~~
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	~~🧪 api-mac~~	✅ 🛠 gtk
	✅ 🧪 ios-wk2-wpt	~~🧪 mac-wk1~~	~~🧪 gtk-wk2~~
	✅ 🧪 api-ios	~~🧪 mac-wk2~~	~~🧪 api-gtk~~
	✅ 🛠 tv	❌ 🧪 mac-AS-debug-wk2
	✅ 🛠 tv-sim	~~🧪 mac-wk2-stress~~
	✅ 🛠 watch
	✅ 🛠 watch-sim

webkit-early-warning-system · 2023-07-20T04:19:30Z

EWS run on previous version of this PR (hash fd7bfc6)

Misc	iOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 wincairo
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🛠 gtk
	✅ 🧪 ios-wk2-wpt	✅ 🧪 mac-wk1	✅ 🧪 gtk-wk2
	✅ 🧪 api-ios	✅ 🧪 mac-wk2	✅ 🧪 api-gtk
	✅ 🛠 tv	❌ 🧪 mac-AS-debug-wk2
	✅ 🛠 tv-sim	✅ 🧪 mac-wk2-stress
	✅ 🛠 watch
	✅ 🛠 watch-sim

nt1m · 2023-07-20T07:00:15Z

Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp

+    CSSParserTokenRange rangeCopy = range;
+    CSSParserTokenRange args = consumeFunction(rangeCopy);


Can we use auto ?

webkit-early-warning-system · 2023-07-20T19:59:37Z

EWS run on current version of this PR (hash 06346cb)

Misc	iOS, tvOS & watchOS	macOS	Linux	Windows
✅ 🧪 style	✅ 🛠 ios	✅ 🛠 mac	✅ 🛠 wpe	✅ 🛠 wincairo
✅ 🧪 bindings	✅ 🛠 ios-sim	✅ 🛠 mac-AS-debug	✅ 🧪 wpe-wk2
✅ 🧪 webkitperl	✅ 🧪 ios-wk2	✅ 🧪 api-mac	✅ 🛠 gtk
	✅ 🧪 ios-wk2-wpt	✅ 🧪 mac-wk1	✅ 🧪 gtk-wk2
	✅ 🧪 api-ios	✅ 🧪 mac-wk2	✅ 🧪 api-gtk
	✅ 🛠 tv	❌ 🧪 mac-AS-debug-wk2
	✅ 🛠 tv-sim	✅ 🧪 mac-wk2-stress
✅ 🛠 🧪 merge	✅ 🛠 watch
	✅ 🛠 watch-sim

https://bugs.webkit.org/show_bug.cgi?id=240061 <rdar://problem/93088094> Reviewed by Dean Jackson. Add support for the `linear()` CSS timing function <https://drafts.csswg.org/css-easing-2/#the-linear-easing-function>. * Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp: (WebCore::consumeLinear): Added. (WebCore::CSSPropertyParserHelpers::consumeTimingFunction): * Source/WebCore/css/ComputedStyleExtractor.cpp: (WebCore::valueForAnimationTimingFunction): Implement parsing logic for CSS `linear()` <https://drafts.csswg.org/css-easing-2/#linear-easing-function-parsing>. * Source/WebCore/platform/animation/TimingFunction.h: (WebCore::LinearTimingFunction::Point::operator== const): Added. (WebCore::LinearTimingFunction::create): Added. (WebCore::LinearTimingFunction::operator== const): Added. (WebCore::LinearTimingFunction::points const): Added. (WebCore::LinearTimingFunction::identity): Renamed from `sharedLinearTimingFunction`. (WebCore::LinearTimingFunction::LinearTimingFunction): Added. (WebCore::LinearTimingFunction::clone): * Source/WebCore/platform/animation/TimingFunction.cpp: (WebCore::operator<<): (WebCore::TimingFunction::transformProgress const): (WebCore::TimingFunction::createFromCSSValue): (WebCore::TimingFunction::cssText const): * Source/WebKit/Shared/WebCoreArgumentCoders.serialization.in: * Source/WebCore/css/CSSTimingFunctionValue.h: (WebCore::CSSLinearTimingFunctionValue::create): Added. (WebCore::CSSLinearTimingFunctionValue::points const): Added. (WebCore::CSSLinearTimingFunctionValue::CSSLinearTimingFunctionValue): Added. * Source/WebCore/css/CSSTimingFunctionValue.cpp: (WebCore::CSSLinearTimingFunctionValue::customCSSText const): Added. (WebCore::CSSLinearTimingFunctionValue::equals const): Added. * Source/WebCore/css/CSSValue.h: (WebCore::CSSValue::isLinearTimingFunctionValue const): Added. * Source/WebCore/css/CSSValue.cpp: (WebCore::CSSValue::visitDerived): Add subclasses and member variables to support CSS `linear()`. Implement the logic to calculate the current value of a CSS `linear()` given the current progress <https://drafts.csswg.org/css-easing-2/#linear-easing-function-output>. * Source/WebCore/platform/graphics/ca/GraphicsLayerCA.cpp: (WebCore::keyframeValueListHasSingleIntervalWithLinearOrEquivalentTimingFunction): (WebCore::GraphicsLayerCA::timingFunctionForAnimationValue): * Source/WebCore/platform/graphics/ca/cocoa/PlatformCAAnimationCocoa.mm: (WebCore::toCAMediaTimingFunction): Use renamed `identity` instead of `sharedLinearTimingFunction` since `LinearTimingFunction` can now be more than just an identity function. * Source/WebInspectorUI/UserInterface/Models/CSSKeywordCompletions.js: Add basic autocompletion support for `linear()` in Web Inspector. * LayoutTests/imported/w3c/web-platform-tests/css/css-easing/linear-timing-functions-output.tentative.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-easing/linear-timing-functions-output.tentative-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-easing/linear-timing-functions-syntax.tentative.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-easing/linear-timing-functions-syntax.tentative-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-computed.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-computed-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-invalid.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-invalid-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-valid.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-valid-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-easing/w3c-import.log: * LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/transition-timing-function.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/parsing/transition-timing-function-valid.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/parsing/transition-timing-function-valid-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-001.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/transition-001-expected.txt: Canonical link: https://commits.webkit.org/266195@main

webkit-commit-queue · 2023-07-21T01:33:44Z

Committed 266195@main (2b0ebfa): https://commits.webkit.org/266195@main

Reviewed commits have been landed. Closing PR #15936 and removing active labels.

dcrousso self-assigned this Jul 19, 2023

dcrousso added the Animations Bugs related to CSS + SVG animations and transitions label Jul 19, 2023

dcrousso requested review from grorg and graouts July 19, 2023 20:26

webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Jul 19, 2023

dcrousso removed the merging-blocked Applied to prevent a change from being merged label Jul 19, 2023

dcrousso force-pushed the eng/240061 branch from 9c57df9 to bb428ce Compare July 19, 2023 22:58

dcrousso marked this pull request as ready for review July 19, 2023 23:00

dcrousso requested a review from patrickangle as a code owner July 19, 2023 23:00

grorg reviewed Jul 19, 2023

View reviewed changes

grorg approved these changes Jul 19, 2023

View reviewed changes

webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Jul 19, 2023

dcrousso removed the merging-blocked Applied to prevent a change from being merged label Jul 20, 2023

dcrousso force-pushed the eng/240061 branch from bb428ce to dc3194a Compare July 20, 2023 00:14

webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Jul 20, 2023

dcrousso removed the merging-blocked Applied to prevent a change from being merged label Jul 20, 2023

dcrousso force-pushed the eng/240061 branch from dc3194a to d35e129 Compare July 20, 2023 03:49

webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Jul 20, 2023

dcrousso removed the merging-blocked Applied to prevent a change from being merged label Jul 20, 2023

dcrousso force-pushed the eng/240061 branch from d35e129 to fd7bfc6 Compare July 20, 2023 04:19

nt1m reviewed Jul 20, 2023

View reviewed changes

webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Jul 20, 2023

dcrousso removed the merging-blocked Applied to prevent a change from being merged label Jul 20, 2023

dcrousso force-pushed the eng/240061 branch from fd7bfc6 to 06346cb Compare July 20, 2023 19:59

webkit-ews-buildbot added the merging-blocked Applied to prevent a change from being merged label Jul 20, 2023

dcrousso added merge-queue Applied to send a pull request to merge-queue and removed merging-blocked Applied to prevent a change from being merged labels Jul 21, 2023

webkit-commit-queue force-pushed the eng/240061 branch from 06346cb to 2b0ebfa Compare July 21, 2023 01:33

webkit-commit-queue merged commit 2b0ebfa into WebKit:main Jul 21, 2023

webkit-commit-queue removed the merge-queue Applied to send a pull request to merge-queue label Jul 21, 2023

dcrousso deleted the eng/240061 branch July 21, 2023 01:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-easing-2] Implement linear(...) easing function for css animations #15936

[css-easing-2] Implement linear(...) easing function for css animations #15936

dcrousso commented Jul 19, 2023 •

edited by webkit-early-warning-system

webkit-early-warning-system commented Jul 19, 2023 •

edited

webkit-early-warning-system commented Jul 19, 2023 •

edited

grorg Jul 19, 2023

dcrousso Jul 20, 2023

grorg Jul 19, 2023

grorg Jul 19, 2023

dcrousso Jul 20, 2023

webkit-early-warning-system commented Jul 20, 2023 •

edited

webkit-early-warning-system commented Jul 20, 2023 •

edited

webkit-early-warning-system commented Jul 20, 2023 •

edited

nt1m Jul 20, 2023

webkit-early-warning-system commented Jul 20, 2023 •

edited

webkit-commit-queue commented Jul 21, 2023

		CSSParserTokenRange rangeCopy = range;
		CSSParserTokenRange args = consumeFunction(rangeCopy);

[css-easing-2] Implement linear(...) easing function for css animations #15936

[css-easing-2] Implement linear(...) easing function for css animations #15936

Conversation

dcrousso commented Jul 19, 2023 • edited by webkit-early-warning-system

2b0ebfa

webkit-early-warning-system commented Jul 19, 2023 • edited

webkit-early-warning-system commented Jul 19, 2023 • edited

grorg Jul 19, 2023

Choose a reason for hiding this comment

dcrousso Jul 20, 2023

Choose a reason for hiding this comment

grorg Jul 19, 2023

Choose a reason for hiding this comment

grorg Jul 19, 2023

Choose a reason for hiding this comment

dcrousso Jul 20, 2023

Choose a reason for hiding this comment

webkit-early-warning-system commented Jul 20, 2023 • edited

webkit-early-warning-system commented Jul 20, 2023 • edited

webkit-early-warning-system commented Jul 20, 2023 • edited

nt1m Jul 20, 2023

Choose a reason for hiding this comment

webkit-early-warning-system commented Jul 20, 2023 • edited

webkit-commit-queue commented Jul 21, 2023

dcrousso commented Jul 19, 2023 •

edited by webkit-early-warning-system

`2b0ebfa`

webkit-early-warning-system commented Jul 19, 2023 •

edited

webkit-early-warning-system commented Jul 19, 2023 •

edited

webkit-early-warning-system commented Jul 20, 2023 •

edited

webkit-early-warning-system commented Jul 20, 2023 •

edited

webkit-early-warning-system commented Jul 20, 2023 •

edited

webkit-early-warning-system commented Jul 20, 2023 •

edited