Tests: Import timing function tests

Author: Calme1709

Tests/LibWeb/Text/expected/wpt-import/css/css-easing/linear-timing-functions-syntax.txt

@@ -0,0 +1,41 @@
+Harness status: OK
+
+Found 35 tests
+
+12 Pass
+23 Fail
+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%, 1 100% )" should set the property value
+Fail	e.style['animation-timing-function'] = "linear(0, 1)" should set the property value
+Pass	e.style['animation-timing-function'] = "linear(-10, -5, 0, 5, 10)" should set the property value
+Fail	e.style['animation-timing-function'] = "linear(-10 -10%, -5 -5%, 0, 5, 10)" should set the property value
+Fail	e.style['animation-timing-function'] = "linear(0 calc(0%), 0 calc(100%))" should set the property value
+Fail	e.style['animation-timing-function'] = "linear(0 calc(50% - 50%), 0 calc(50% + 50%))" should set the property value
+Fail	e.style['animation-timing-function'] = "linear(0 calc(50%), 0 100%)" should set the property value
+Fail	e.style['animation-timing-function'] = "linear(0 0% 50%, 1 50% 100%)" should set the property value
+Fail	e.style['animation-timing-function'] = "linear(0, 0.5 25% 75%, 1 100% 100%)" should set the property value
+Fail	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
+Pass	e.style['animation-timing-function'] = "linear(0, 0 40%, 1, 0.5, 1)" should set the property value
+Fail	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	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
+Fail	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
+Fail	e.style['animation-timing-function'] = "linear(0 0% 100%)" should not set the property value
+Fail	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% )'
+Fail	Property animation-timing-function value 'linear(0, 1)'
+Fail	Property animation-timing-function value 'linear(-10, -5, 0, 5, 10)'
+Fail	Property animation-timing-function value 'linear(-10 -10%, -5 -5%, 0, 5, 10)'
+Fail	Property animation-timing-function value 'linear(0 calc(0%), 0 calc(100%))'
+Fail	Property animation-timing-function value 'linear(0 calc(50% - 50%), 0 calc(50% + 50%))'
+Fail	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%)'
+Fail	Property animation-timing-function value 'linear(0, 0.5 25% 75%, 1 100% 100%)'
+Fail	Property animation-timing-function value 'linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 0.998, 1 100% 100%)'
+Fail	Property animation-timing-function value 'linear(0, 0 40%, 1, 0.5, 1)'
+Fail	Property animation-timing-function value 'linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 1.004, 0.998, 1 100% 100%)'

Tests/LibWeb/Text/expected/wpt-import/css/css-easing/step-timing-functions-syntax.txt

@@ -0,0 +1,21 @@
+Harness status: OK
+
+Found 15 tests
+
+14 Pass
+1 Fail
+Pass	e.style['animation-timing-function'] = "step-start" should set the property value
+Pass	e.style['animation-timing-function'] = "step-end" should set the property value
+Pass	e.style['animation-timing-function'] = "steps(1, start)" should set the property value
+Pass	e.style['animation-timing-function'] = "steps(1, end)" should set the property value
+Pass	e.style['animation-timing-function'] = "steps(1, jump-start)" should set the property value
+Pass	e.style['animation-timing-function'] = "steps(1, jump-end)" should set the property value
+Pass	e.style['animation-timing-function'] = "steps(1, 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'] = "steps(0, start)" should not set the property value
+Pass	e.style['animation-timing-function'] = "steps(0, end)" should not set the property value
+Pass	e.style['animation-timing-function'] = "steps(0, jump-start)" should not set the property value
+Pass	e.style['animation-timing-function'] = "steps(0, jump-end)" should not set the property value
+Pass	e.style['animation-timing-function'] = "steps(0, jump-both)" should not set the property value
+Pass	e.style['animation-timing-function'] = "steps(1, jump-none)" should not set the property value
+Fail	e.style['animation-timing-function'] = "steps(calc(0/0), jump-none)" should not set the property value

Tests/LibWeb/Text/expected/wpt-import/css/css-easing/timing-functions-syntax-invalid.txt

@@ -0,0 +1,18 @@
+Harness status: OK
+
+Found 13 tests
+
+13 Pass
+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
+Pass	e.style['animation-timing-function'] = "steps(1, jump-none)" should not set the property value
+Pass	e.style['animation-timing-function'] = "steps(-100, jump-none)" should not set the property value
+Pass	e.style['animation-timing-function'] = "steps(0, start)" should not set the property value
+Pass	e.style['animation-timing-function'] = "steps(-100, start)" should not set the property value

Tests/LibWeb/Text/expected/wpt-import/css/css-transitions/parsing/transition-timing-function-computed.txt

@@ -0,0 +1,28 @@
+Harness status: OK
+
+Found 22 tests
+
+20 Pass
+2 Fail
+Pass	Property transition-timing-function value 'linear'
+Pass	Property transition-timing-function value 'ease'
+Pass	Property transition-timing-function value 'ease-in'
+Pass	Property transition-timing-function value 'ease-out'
+Pass	Property transition-timing-function value 'ease-in-out'
+Pass	Property transition-timing-function value 'cubic-bezier(0.1, 0.2, 0.8, 0.9)'
+Pass	Property transition-timing-function value 'cubic-bezier(0, -2, 1, 3)'
+Pass	Property transition-timing-function value 'cubic-bezier(0, 0.7, 1, 1.3)'
+Pass	Property transition-timing-function value 'step-start'
+Pass	Property transition-timing-function value 'step-end'
+Pass	Property transition-timing-function value 'steps(4)'
+Pass	Property transition-timing-function value 'steps(4, start)'
+Pass	Property transition-timing-function value 'steps(2, end)'
+Pass	Property transition-timing-function value 'steps(2, jump-start)'
+Pass	Property transition-timing-function value 'steps(2, jump-end)'
+Pass	Property transition-timing-function value 'steps(2, jump-both)'
+Pass	Property transition-timing-function value 'steps(2, jump-none)'
+Fail	Property transition-timing-function value 'steps(calc(2 * sibling-index()), jump-none)'
+Fail	Property transition-timing-function value 'steps(sibling-index(), jump-none)'
+Pass	Property transition-timing-function value 'steps(calc(2 * sign(1em - 1000px)), jump-none)'
+Pass	Property transition-timing-function value 'steps(calc(2 * sign(1em - 1000px)), start)'
+Pass	Property transition-timing-function value 'linear, ease, linear'

Tests/LibWeb/Text/input/wpt-import/css/css-easing/linear-timing-functions-syntax.html

@@ -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>

Tests/LibWeb/Text/input/wpt-import/css/css-easing/step-timing-functions-syntax.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>

Tests/LibWeb/Text/input/wpt-import/css/css-easing/timing-functions-syntax-invalid.html

@@ -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>

Tests/LibWeb/Text/input/wpt-import/css/css-transitions/parsing/transition-timing-function-computed.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedStyle().transitionTimingFunction</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions/#propdef-transition-timing-function">
+<meta name="assert" content="transition-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" style="font-size: 16px;"></div>
+<script>
+test_computed_value("transition-timing-function", "linear");
+
+test_computed_value("transition-timing-function", "ease");
+test_computed_value("transition-timing-function", "ease-in");
+test_computed_value("transition-timing-function", "ease-out");
+test_computed_value("transition-timing-function", "ease-in-out");
+test_computed_value("transition-timing-function", "cubic-bezier(0.1, 0.2, 0.8, 0.9)");
+test_computed_value("transition-timing-function", "cubic-bezier(0, -2, 1, 3)");
+test_computed_value("transition-timing-function", "cubic-bezier(0, 0.7, 1, 1.3)");
+
+test_computed_value("transition-timing-function", "step-start", "steps(1, start)");
+test_computed_value("transition-timing-function", "step-end", "steps(1)");
+test_computed_value("transition-timing-function", "steps(4)");
+test_computed_value("transition-timing-function", "steps(4, start)");
+test_computed_value("transition-timing-function", "steps(2, end)", "steps(2)");
+test_computed_value("transition-timing-function", "steps(2, jump-start)");
+test_computed_value("transition-timing-function", "steps(2, jump-end)", "steps(2)");
+test_computed_value("transition-timing-function", "steps(2, jump-both)");
+test_computed_value("transition-timing-function", "steps(2, jump-none)");
+test_computed_value("transition-timing-function", "steps(calc(2 * sibling-index()), jump-none)", "steps(2, jump-none)");
+test_computed_value("transition-timing-function", "steps(sibling-index(), jump-none)", "steps(2, jump-none)");
+test_computed_value("transition-timing-function", "steps(calc(2 * sign(1em - 1000px)), jump-none)", "steps(2, jump-none)");
+test_computed_value("transition-timing-function", "steps(calc(2 * sign(1em - 1000px)), start)", "steps(1, start)");
+
+test_computed_value("transition-timing-function", "linear, ease, linear");
+</script>
+</body>
+</html>