mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 10:07:15 +02:00
Tests: Import timing function tests
This commit is contained in:
Notes:
github-actions[bot]
2025-10-20 10:29:58 +00:00
Author: https://github.com/Calme1709 Commit: https://github.com/LadybirdBrowser/ladybird/commit/4c97b336c3a Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6459 Reviewed-by: https://github.com/AtkinsSJ ✅
@@ -0,0 +1,55 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<meta name="assert"
|
||||
content="This test checks the syntax output of step timing functions" />
|
||||
<title>Step timing function syntax tests</title>
|
||||
<link rel="help"
|
||||
href="https://drafts.csswg.org/css-easing-1/#step-timing-functions">
|
||||
<script src="../../resources/testharness.js"></script>
|
||||
<script src="../../resources/testharnessreport.js"></script>
|
||||
<script src="testcommon.js"></script>
|
||||
<script src="../../css/support/parsing-testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
test_valid_value("animation-timing-function", "step-start", "steps(1, start)");
|
||||
test_valid_value("animation-timing-function", "step-end", "steps(1)");
|
||||
test_valid_value("animation-timing-function", "steps(1, start)");
|
||||
test_valid_value("animation-timing-function", "steps(1, end)", "steps(1)");
|
||||
test_valid_value("animation-timing-function", "steps(1, jump-start)");
|
||||
test_valid_value("animation-timing-function", "steps(1, jump-end)", "steps(1)");
|
||||
test_valid_value("animation-timing-function", "steps(1, jump-both)");
|
||||
test_valid_value("animation-timing-function", "steps(2, jump-none)");
|
||||
|
||||
test_invalid_value("animation-timing-function", "steps(0, start)");
|
||||
test_invalid_value("animation-timing-function", "steps(0, end)");
|
||||
test_invalid_value("animation-timing-function", "steps(0, jump-start)");
|
||||
test_invalid_value("animation-timing-function", "steps(0, jump-end)");
|
||||
test_invalid_value("animation-timing-function", "steps(0, jump-both)");
|
||||
test_invalid_value("animation-timing-function", "steps(1, jump-none)");
|
||||
test_invalid_value("animation-timing-function", "steps(calc(0/0), jump-none)");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!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");
|
||||
test_invalid_value("animation-timing-function", "steps(1, jump-none)");
|
||||
test_invalid_value("animation-timing-function", "steps(-100, jump-none)");
|
||||
test_invalid_value("animation-timing-function", "steps(0, start)");
|
||||
test_invalid_value("animation-timing-function", "steps(-100, start)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user