[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

LayoutTests/imported/w3c/web-platform-tests/css/css-easing/linear-timing-functions-output.tentative-expected.txt

@@ -0,0 +1,7 @@
+
+PASS linear function easing with output greater than 1
+PASS linear function easing with output less than 1
+PASS linear function easing, steps equivalent
+PASS linear function easing, input value being unspecified in the first entry implies zero
+PASS linear function easing, input value being unspecified in the last entry implies max input value
+

LayoutTests/imported/w3c/web-platform-tests/css/css-easing/linear-timing-functions-output.tentative.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<meta name="assert" content="This test checks the output of linear timing functions" />
+<title>Tests for the output of linear timing functions</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/6533">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/util.js"></script>
+<script src="testcommon.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+function assert_style_left_at(animation, time, expected_y) {
+  animation.currentTime = time;
+  assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left),
+                       expected_y * 100,
+                       0.01,
+                       'The left of the animation should be approximately ' +
+                       expected_y * 100 + ' at ' + time + 'ms');
+}
+
+function assert_animations_equal_at(actual_animation, expected_animation, time) {
+  actual_animation.currentTime = time;
+  var actual_left = pxToNum(getComputedStyle(actual_animation.effect.target).left);
+  expected_animation.currentTime = time;
+  var expected_left = pxToNum(getComputedStyle(expected_animation.effect.target).left);
+  assert_approx_equals(actual_left,
+                       expected_left,
+                       0.01,
+                       'The left of the animation should be approximately ' +
+                       expected_left + ' at ' + time + 'ms');
+}
+
+function create_animated_div(t, easing_function) {
+  var target = createDiv(t);
+  target.style.position = 'absolute';
+  return target.animate(
+    [ { left: '0px' },
+      { left: '100px' } ],
+      { duration: 1000,
+        fill: 'forwards',
+        easing: easing_function });
+}
+
+test(function(t) {
+  var anim = create_animated_div(t, 'linear(0, 1.5, 1)');
+
+  assert_style_left_at(anim, 0, 0.0);
+  assert_style_left_at(anim, 250, 0.75);
+  assert_style_left_at(anim, 500, 1.5);
+  assert_style_left_at(anim, 750, 1.25);
+  assert_style_left_at(anim, 1000, 1.00);
+}, 'linear function easing with output greater than 1');
+
+test(function(t) {
+  var anim = create_animated_div(t, 'linear(1, -0.5, 0)');
+
+  assert_style_left_at(anim, 0, 1.0);
+  assert_style_left_at(anim, 250, 0.25);
+  assert_style_left_at(anim, 500, -0.5);
+  assert_style_left_at(anim, 750, -0.25);
+  assert_style_left_at(anim, 1000, 0.00);
+}, 'linear function easing with output less than 1');
+
+test(function(t) {
+  var anim = create_animated_div(t, 'linear(0.2 0% 20%, 0.4 20% 40%, 0.6 40% 60%, 0.8 60% 80%, 1.0 80% 100%)');
+  var equiv = create_animated_div(t, 'steps(5, jump-start)');
+
+  assert_animations_equal_at(anim, equiv, 0);
+  assert_animations_equal_at(anim, equiv, 200);
+  assert_animations_equal_at(anim, equiv, 400);
+  assert_animations_equal_at(anim, equiv, 600);
+  assert_animations_equal_at(anim, equiv, 800);
+  assert_animations_equal_at(anim, equiv, 1000);
+}, 'linear function easing, steps equivalent');
+
+test(function(t) {
+  var anim = create_animated_div(t, 'linear(0, 0.1 -10%, 1)');
+  var equiv = create_animated_div(t, 'linear(0, 0.1 0%, 1)');
+
+  assert_animations_equal_at(anim, equiv, 0);
+  assert_animations_equal_at(anim, equiv, 100);
+  assert_animations_equal_at(anim, equiv, 550);
+  assert_animations_equal_at(anim, equiv, 1000);
+}, 'linear function easing, input value being unspecified in the first entry implies zero');
+
+test(function(t) {
+  var anim = create_animated_div(t, 'linear(0, 0.9 110%, 1)');
+  var equiv = create_animated_div(t, 'linear(0, 0.9 110%, 1 110%)');
+
+  assert_animations_equal_at(anim, equiv, 0);
+  assert_animations_equal_at(anim, equiv, 450);
+  assert_animations_equal_at(anim, equiv, 900);
+  assert_animations_equal_at(anim, equiv, 950);
+  assert_animations_equal_at(anim, equiv, 1000);
+}, 'linear function easing, input value being unspecified in the last entry implies max input value');
+</script>
+</body>

LayoutTests/imported/w3c/web-platform-tests/css/css-easing/linear-timing-functions-syntax.tentative-expected.txt

@@ -0,0 +1,21 @@
+
+PASS e.style['animation-timing-function'] = "linear(0 0%, 1 100%)" should set the property value
+PASS e.style['animation-timing-function'] = "linear(0 0% 50%, 1 50% 100%)" should set the property value
+PASS e.style['animation-timing-function'] = "linear(0, 0.5 25% 75%, 1 100% 100%)" should set the property value
+PASS e.style['animation-timing-function'] = "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 1.004, 0.998, 1 100% 100%)" should set the property value
+PASS e.style['animation-timing-function'] = "linear()" should not set the property value
+PASS e.style['animation-timing-function'] = "linear(0)" should not set the property value
+PASS e.style['animation-timing-function'] = "linear(100%)" should not set the property value
+PASS e.style['animation-timing-function'] = "linear(0% 1 50%)" should not set the property value
+PASS e.style['animation-timing-function'] = "linear(0 0% 100%)" should not set the property value
+PASS e.style['animation-timing-function'] = "linear(0% 100% 0)" should not set the property value
+PASS e.style['animation-timing-function'] = "linear(0 calc(50px - 50%), 0 calc(50em + 50em))" should not set the property value
+PASS e.style['animation-timing-function'] = "linear(0 calc(50%, 50%), 0 calc(50% + 50%))" should not set the property value
+PASS Property animation-timing-function value 'linear(0, 1)'
+PASS Property animation-timing-function value 'linear(0 calc(0%), 0 calc(100%))'
+PASS Property animation-timing-function value 'linear(0 calc(50% - 50%), 0 calc(50% + 50%))'
+PASS Property animation-timing-function value 'linear(0 calc(min(50%, 60%)), 0 100%)'
+PASS Property animation-timing-function value 'linear(0 0% 50%, 1 50% 100%)'
+PASS Property animation-timing-function value 'linear(0, 0.5 25% 75%, 1 100% 100%)'
+PASS Property animation-timing-function value 'linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 0.998, 1 100% 100%)'
+

LayoutTests/imported/w3c/web-platform-tests/css/css-easing/linear-timing-functions-syntax.tentative.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Easing: getComputedStyle().animationTimingFunction with linear(...)</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/6533">
+<meta name="assert" content="animation-timing-function: linear(...) parsing tests">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_valid_value("animation-timing-function", "linear(0 0%, 1 100%)");
+test_valid_value("animation-timing-function", "linear(0 0% 50%, 1 50% 100%)", "linear(0 0%, 0 50%, 1 50%, 1 100%)");
+test_valid_value("animation-timing-function", "linear(0, 0.5 25% 75%, 1 100% 100%)", "linear(0 0%, 0.5 25%, 0.5 75%, 1 100%, 1 100%)");
+test_valid_value("animation-timing-function", "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 1.004, 0.998, 1 100% 100%)", "linear(0 0%, 1.3 11.1111%, 1 22.2222%, 0.92 33.3333%, 1 44.4444%, 0.99 55.5556%, 1 66.6667%, 1.004 77.7778%, 0.998 88.8889%, 1 100%, 1 100%)");
+
+test_invalid_value("animation-timing-function", "linear()");
+test_invalid_value("animation-timing-function", "linear(0)");
+test_invalid_value("animation-timing-function", "linear(100%)");
+test_invalid_value("animation-timing-function", "linear(0% 1 50%)");
+test_invalid_value("animation-timing-function", "linear(0 0% 100%)");
+test_invalid_value("animation-timing-function", "linear(0% 100% 0)");
+test_invalid_value("animation-timing-function", "linear(0 calc(50px - 50%), 0 calc(50em + 50em))");
+test_invalid_value("animation-timing-function", "linear(0 calc(50%, 50%), 0 calc(50% + 50%))");
+
+test_computed_value("animation-timing-function", "linear(0, 1)", "linear(0 0%, 1 100%)");
+test_computed_value("animation-timing-function", "linear(0 calc(0%), 0 calc(100%))", "linear(0 0%, 0 100%)");
+test_computed_value("animation-timing-function", "linear(0 calc(50% - 50%), 0 calc(50% + 50%))", "linear(0 0%, 0 100%)");
+test_computed_value("animation-timing-function", "linear(0 calc(min(50%, 60%)), 0 100%)", "linear(0 50%, 0 100%)");
+test_computed_value("animation-timing-function", "linear(0 0% 50%, 1 50% 100%)", "linear(0 0%, 0 50%, 1 50%, 1 100%)");
+test_computed_value("animation-timing-function", "linear(0, 0.5 25% 75%, 1 100% 100%)", "linear(0 0%, 0.5 25%, 0.5 75%, 1 100%, 1 100%)");
+test_computed_value("animation-timing-function", "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 0.998, 1 100% 100%)", "linear(0 0%, 1.3 12.5%, 1 25%, 0.92 37.5%, 1 50%, 0.99 62.5%, 1 75%, 0.998 87.5%, 1 100%, 1 100%)");
+</script>
+</body>
+</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-computed-expected.txt

@@ -0,0 +1,17 @@
+
+PASS Property animation-timing-function value 'linear'
+PASS Property animation-timing-function value 'ease'
+PASS Property animation-timing-function value 'ease-in'
+PASS Property animation-timing-function value 'ease-out'
+PASS Property animation-timing-function value 'ease-in-out'
+PASS Property animation-timing-function value 'cubic-bezier(0.1, 0.2, 0.8, 0.9)'
+PASS Property animation-timing-function value 'cubic-bezier(0, -2, 1, 3)'
+PASS Property animation-timing-function value 'cubic-bezier(0, 0.7, 1, 1.3)'
+PASS Property animation-timing-function value 'steps(4, start)'
+PASS Property animation-timing-function value 'steps(2, end)'
+PASS Property animation-timing-function value 'steps(2, jump-start)'
+PASS Property animation-timing-function value 'steps(2, jump-end)'
+PASS Property animation-timing-function value 'steps(2, jump-both)'
+PASS Property animation-timing-function value 'steps(2, jump-none)'
+PASS Property animation-timing-function value 'linear, ease, linear'
+

LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-computed.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Easing: getComputedStyle().animationTimingFunction</title>
+<link rel="help" href="https://drafts.csswg.org/css-easing/#timing-functions">
+<meta name="assert" content="animation-timing-function computed value is a computed <easing-function> list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("animation-timing-function", "linear");
+
+test_computed_value("animation-timing-function", "ease");
+test_computed_value("animation-timing-function", "ease-in");
+test_computed_value("animation-timing-function", "ease-out");
+test_computed_value("animation-timing-function", "ease-in-out");
+test_computed_value("animation-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)");
+test_computed_value("animation-timing-function", "cubic-bezier(0, -2, 1, 3)");
+test_computed_value("animation-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)");
+
+
+test_computed_value("animation-timing-function", "steps(4, start)");
+test_computed_value("animation-timing-function", "steps(2, end)", "steps(2)");
+test_computed_value("animation-timing-function", "steps(2, jump-start)");
+test_computed_value("animation-timing-function", "steps(2, jump-end)", "steps(2)");
+test_computed_value("animation-timing-function", "steps(2, jump-both)");
+test_computed_value("animation-timing-function", "steps(2, jump-none)");
+
+test_computed_value("animation-timing-function", "linear, ease, linear");
+</script>
+</body>
+</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-invalid-expected.txt

@@ -0,0 +1,11 @@
+
+PASS e.style['animation-timing-function'] = "auto" should not set the property value
+PASS e.style['animation-timing-function'] = "ease-in ease-out" should not set the property value
+PASS e.style['animation-timing-function'] = "cubic-bezier(1, 2, 3)" should not set the property value
+PASS e.style['animation-timing-function'] = "cubic-bezier(1, 2, 3, infinite)" should not set the property value
+PASS e.style['animation-timing-function'] = "cubic-bezier(1, 2, 3, 4, 5)" should not set the property value
+PASS e.style['animation-timing-function'] = "cubic-bezier(-0.1, 0.1, 0.5, 0.9)" should not set the property value
+PASS e.style['animation-timing-function'] = "cubic-bezier(0.5, 0.1, 1.1, 0.9)" should not set the property value
+PASS e.style['animation-timing-function'] = "initial, cubic-bezier(0, -2, 1, 3)" should not set the property value
+PASS e.style['animation-timing-function'] = "cubic-bezier(0, -2, 1, 3), initial" should not set the property value
+

LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-invalid.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Easing: parsing animation-timing-function with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-easing/#timing-functions">
+<meta name="assert" content="animation-timing-function supports only the grammar '<timing-function> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("animation-timing-function", "auto");
+test_invalid_value("animation-timing-function", "ease-in ease-out");
+test_invalid_value("animation-timing-function", "cubic-bezier(1, 2, 3)");
+test_invalid_value("animation-timing-function", "cubic-bezier(1, 2, 3, infinite)");
+test_invalid_value("animation-timing-function", "cubic-bezier(1, 2, 3, 4, 5)");
+test_invalid_value("animation-timing-function", "cubic-bezier(-0.1, 0.1, 0.5, 0.9)");
+test_invalid_value("animation-timing-function", "cubic-bezier(0.5, 0.1, 1.1, 0.9)");
+
+test_invalid_value("animation-timing-function", "initial, cubic-bezier(0, -2, 1, 3)");
+test_invalid_value("animation-timing-function", "cubic-bezier(0, -2, 1, 3), initial");
+</script>
+</body>
+</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-valid-expected.txt

@@ -0,0 +1,17 @@
+
+PASS e.style['animation-timing-function'] = "linear" should set the property value
+PASS e.style['animation-timing-function'] = "ease" should set the property value
+PASS e.style['animation-timing-function'] = "ease-in" should set the property value
+PASS e.style['animation-timing-function'] = "ease-out" should set the property value
+PASS e.style['animation-timing-function'] = "ease-in-out" should set the property value
+PASS e.style['animation-timing-function'] = "cubic-bezier(0.1, 0.2, 0.8, 0.9)" should set the property value
+PASS e.style['animation-timing-function'] = "cubic-bezier(0, -2, 1, 3)" should set the property value
+PASS e.style['animation-timing-function'] = "cubic-bezier(0, 0.7, 1, 1.3)" should set the property value
+PASS e.style['animation-timing-function'] = "steps(4, start)" should set the property value
+PASS e.style['animation-timing-function'] = "steps(2, end)" should set the property value
+PASS e.style['animation-timing-function'] = "steps(2, jump-start)" should set the property value
+PASS e.style['animation-timing-function'] = "steps(2, jump-end)" should set the property value
+PASS e.style['animation-timing-function'] = "steps(2, jump-both)" should set the property value
+PASS e.style['animation-timing-function'] = "steps(2, jump-none)" should set the property value
+PASS e.style['animation-timing-function'] = "linear, ease, linear" should set the property value
+

LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-valid.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Easing: parsing animation-timing-function with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-easing/#timing-functions">
+<meta name="assert" content="animation-timing-function supports the full grammar '<timing-function> #'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("animation-timing-function", "linear");
+
+test_valid_value("animation-timing-function", "ease");
+test_valid_value("animation-timing-function", "ease-in");
+test_valid_value("animation-timing-function", "ease-out");
+test_valid_value("animation-timing-function", "ease-in-out");
+test_valid_value("animation-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)");
+test_valid_value("animation-timing-function", "cubic-bezier(0, -2, 1, 3)");
+test_valid_value("animation-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)");
+
+
+test_valid_value("animation-timing-function", "steps(4, start)");
+test_valid_value("animation-timing-function", "steps(2, end)", "steps(2)");
+test_valid_value("animation-timing-function", "steps(2, jump-start)");
+test_valid_value("animation-timing-function", "steps(2, jump-end)", "steps(2)");
+test_valid_value("animation-timing-function", "steps(2, jump-both)");
+test_valid_value("animation-timing-function", "steps(2, jump-none)");
+
+test_valid_value("animation-timing-function", "linear, ease, linear");
+</script>
+</body>
+</html>

LayoutTests/imported/w3c/web-platform-tests/css/css-easing/w3c-import.log

@@ -16,6 +16,11 @@ None
 List of files:
 /LayoutTests/imported/w3c/web-platform-tests/css/css-easing/META.yml
 /LayoutTests/imported/w3c/web-platform-tests/css/css-easing/cubic-bezier-timing-functions-output.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/linear-timing-functions-output.tentative.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/linear-timing-functions-syntax.tentative.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-output.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-easing/step-timing-functions-syntax.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-easing/testcommon.js
+/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-computed.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-invalid.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-easing/timing-functions-syntax-valid.html

LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/transition-timing-function.html

@@ -63,12 +63,13 @@
         promises.push(anim.ready);
       });
       Promise.all(promises).then(() => {
-        assert_equals(promises.length, 5, 'Unexpected animation count');
+        assert_equals(promises.length, 6, 'Unexpected animation count');
         verifyPosition('box1', 200);  // linear easing
         verifyPosition('box2', ease());
         verifyPosition('box3', easeIn());
         verifyPosition('box4', easeOut());
         verifyPosition('box5', easeInOut());
+        verifyPosition('box6', 400);
       });
     }, 'Ensure that transition easing functions are properly applied.');
   };
@@ -80,6 +81,7 @@
   <div id="box3" class="box" style="transition-timing-function: ease-in;"></div>
   <div id="box4" class="box" style="transition-timing-function: ease-out;"></div>
   <div id="box5" class="box" style="transition-timing-function: ease-in-out;"></div>
+  <div id="box6" class="box" style="transition-timing-function: linear(0, 1, 0);"></div>
 </div>
 </body>
 </html>

LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/parsing/transition-timing-function-valid-expected.txt

@@ -1,5 +1,8 @@
 
 PASS e.style['transition-timing-function'] = "linear" should set the property value
+PASS e.style['transition-timing-function'] = "linear(0 0%, 0.5 50%, 1 100%)" should set the property value
+PASS e.style['transition-timing-function'] = "linear(0 0%, 10 10%, 10 50%, 25.4 75%, 100 100%)" should set the property value
+PASS e.style['transition-timing-function'] = "linear(0 0%, 1 100%)" should set the property value
 PASS e.style['transition-timing-function'] = "ease" should set the property value
 PASS e.style['transition-timing-function'] = "ease-in" should set the property value
 PASS e.style['transition-timing-function'] = "ease-out" should set the property value

LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/parsing/transition-timing-function-valid.html

@@ -13,6 +13,9 @@
 <body>
 <script>
 test_valid_value("transition-timing-function", "linear");
+test_valid_value("transition-timing-function", "linear(0 0%, 0.5 50%, 1 100%)");
+test_valid_value("transition-timing-function", "linear(0 0%, 10 10%, 10 50%, 25.4 75%, 100 100%)");
+test_valid_value("transition-timing-function", "linear(0 0%, 1 100%)");
 
 test_valid_value("transition-timing-function", "ease");
 test_valid_value("transition-timing-function", "ease-in");

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

@@ -11,4 +11,5 @@ PASS parse '1s 2s width ease-in'
 PASS parse '1s ease-in 2s width'
 PASS parse 'width ease-in 1s 2s'
 PASS parse 'width .1s ease-in .2s'
+PASS parse '1s width linear(0, .5 10% 20%, 1, .5 50%, 1) 2s'