Blitz - WPT: linear-timing-functions-syntax.html

wpt / css / css-easing / linear-timing-functions-syntax.html

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

Subtest	Status	Message
e.style['animation-timing-function'] = "linear(0 0%, 1 100%)" should set the property value	PASS
e.style['animation-timing-function'] = "linear( 0 0%, 1 100% )" should set the property value	PASS
e.style['animation-timing-function'] = "linear(0, 1)" should set the property value	FAIL	assert_equals: serialization should be canonical expected "linear(0, 1)" but got "linear(0 0%, 1 100%)"
e.style['animation-timing-function'] = "linear(-10, -5, 0, 5, 10)" should set the property value	FAIL	assert_equals: serialization should be canonical expected "linear(-10, -5, 0, 5, 10)" but got "linear(-10 0%, -5 25%, 0 50%, 5 75%, 10 100%)"
e.style['animation-timing-function'] = "linear(-10 -10%, -5 -5%, 0, 5, 10)" should set the property value	FAIL	assert_equals: serialization should be canonical expected "linear(-10 -10%, -5 -5%, 0, 5, 10)" but got "linear(-10 -10%, -5 -5%, 0 30%, 5 65%, 10 100%)"
e.style['animation-timing-function'] = "linear(0 calc(0%), 0 calc(100%))" should set the property value	FAIL	assert_equals: serialization should be canonical expected "linear(0 calc(0%), 0 calc(100%))" but got "linear(0 0%, 0 100%)"
e.style['animation-timing-function'] = "linear(0 calc(50% - 50%), 0 calc(50% + 50%))" should set the property value	FAIL	assert_equals: serialization should be canonical expected "linear(0 calc(0%), 0 calc(100%))" but got "linear(0 0%, 0 100%)"
e.style['animation-timing-function'] = "linear(0 calc(50%), 0 100%)" should set the property value	FAIL	assert_equals: serialization should be canonical expected "linear(0 calc(50%), 0 100%)" but got "linear(0 50%, 0 100%)"
e.style['animation-timing-function'] = "linear(0 0% 50%, 1 50% 100%)" should set the property value	FAIL	assert_equals: serialization should be canonical expected "linear(0 0% 50%, 1 50% 100%)" but got "linear(0 0%, 0 50%, 1 50%, 1 100%)"
e.style['animation-timing-function'] = "linear(0, 0.5 25% 75%, 1 100% 100%)" should set the property value	FAIL	assert_equals: serialization should be canonical expected "linear(0, 0.5 25% 75%, 1 100% 100%)" but got "linear(0 0%, 0.5 25%, 0.5 75%, 1 100%, 1 100%)"
e.style['animation-timing-function'] = "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 0.998, 1 100% 100%)" should set the property value	FAIL	assert_equals: serialization should be canonical expected "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 0.998, 1 100% 100%)" but got "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%)"
e.style['animation-timing-function'] = "linear(0, 0 40%, 1, 0.5, 1)" should set the property value	FAIL	assert_equals: serialization should be canonical expected "linear(0, 0 40%, 1, 0.5, 1)" but got "linear(0 0%, 0 40%, 1 60%, 0.5 80%, 1 100%)"
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	FAIL	assert_equals: serialization should be canonical expected "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 1.004, 0.998, 1 100% 100%)" but got "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%)"
e.style['animation-timing-function'] = "linear(calc(0/0), 1)" 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 0%, 1 100%)'	PASS
Property animation-timing-function value 'linear( 0 0%, 1 100% )'	PASS
Property animation-timing-function value 'linear(0, 1)'	PASS
Property animation-timing-function value 'linear(-10, -5, 0, 5, 10)'	PASS
Property animation-timing-function value 'linear(-10 -10%, -5 -5%, 0, 5, 10)'	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%)'	PASS
Property animation-timing-function value 'linear(0, 0 40%, 1, 0.5, 1)'	PASS
Property animation-timing-function value 'linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 1.004, 0.998, 1 100% 100%)'	FAIL	assert_equals: expected "linear(0 0%, 1.3 11.111111%, 1 22.222222%, 0.92 33.333333%, 1 44.444444%, 0.99 55.555556%, 1 66.666667%, 1.004 77.777778%, 0.998 88.888889%, 1 100%, 1 100%)" but got "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%)"

Enable JavaScript in test iframe

/css/css-easing/linear-timing-functions-syntax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Easing: getComputedStyle().animationTimingFunction with linear(...)</title>
<link rel="help" href="https://drafts.csswg.org/css-easing-2/#the-linear-easing-function">
<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%, 1 100% )", "linear(0 0%, 1 100%)");
test_valid_value("animation-timing-function", "linear(0, 1)");
test_valid_value("animation-timing-function", "linear(-10, -5, 0, 5, 10)");
test_valid_value("animation-timing-function", "linear(-10 -10%, -5 -5%, 0, 5, 10)");
test_valid_value("animation-timing-function", "linear(0 calc(0%), 0 calc(100%))");
test_valid_value("animation-timing-function", "linear(0 calc(50% - 50%), 0 calc(50% + 50%))", "linear(0 calc(0%), 0 calc(100%))");
test_valid_value("animation-timing-function", "linear(0 calc(50%), 0 100%)");
test_valid_value("animation-timing-function", "linear(0 0% 50%, 1 50% 100%)");
test_valid_value("animation-timing-function", "linear(0, 0.5 25% 75%, 1 100% 100%)");
test_valid_value("animation-timing-function", "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 0.998, 1 100% 100%)");
test_valid_value("animation-timing-function", "linear(0, 0 40%, 1, 0.5, 1)");
test_valid_value("animation-timing-function", "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 1.004, 0.998, 1 100% 100%)");
test_valid_value("animation-timing-function", "linear(calc(0/0), 1)", "linear(0 0%, 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 0%, 1 100%)");
test_computed_value("animation-timing-function", "linear( 0 0%, 1 100% )", "linear(0 0%, 1 100%)");
test_computed_value("animation-timing-function", "linear(0, 1)", "linear(0 0%, 1 100%)");
test_computed_value("animation-timing-function", "linear(-10, -5, 0, 5, 10)", "linear(-10 0%, -5 25%, 0 50%, 5 75%, 10 100%)");
test_computed_value("animation-timing-function", "linear(-10 -10%, -5 -5%, 0, 5, 10)", "linear(-10 -10%, -5 -5%, 0 30%, 5 65%, 10 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%)");
test_computed_value("animation-timing-function", "linear(0, 0 40%, 1, 0.5, 1)", "linear(0 0%, 0 40%, 1 60%, 0.5 80%, 1 100%)");
test_computed_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.111111%, 1 22.222222%, 0.92 33.333333%, 1 44.444444%, 0.99 55.555556%, 1 66.666667%, 1.004 77.777778%, 0.998 88.888889%, 1 100%, 1 100%)");
</script>
</body>
</html>