linear-timing-functions-syntax.html (4202B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Easing: getComputedStyle().animationTimingFunction with linear(...)</title> 6 <link rel="help" href="https://drafts.csswg.org/css-easing-2/#the-linear-easing-function"> 7 <meta name="assert" content="animation-timing-function: linear(...) parsing tests"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/computed-testcommon.js"></script> 11 <script src="/css/support/parsing-testcommon.js"></script> 12 </head> 13 <body> 14 <div id="target"></div> 15 <script> 16 test_valid_value("animation-timing-function", "linear(0 0%, 1 100%)"); 17 test_valid_value("animation-timing-function", "linear( 0 0%, 1 100% )", "linear(0 0%, 1 100%)"); 18 test_valid_value("animation-timing-function", "linear(0, 1)"); 19 test_valid_value("animation-timing-function", "linear(-10, -5, 0, 5, 10)"); 20 test_valid_value("animation-timing-function", "linear(-10 -10%, -5 -5%, 0, 5, 10)"); 21 test_valid_value("animation-timing-function", "linear(0 calc(0%), 0 calc(100%))"); 22 test_valid_value("animation-timing-function", "linear(0 calc(50% - 50%), 0 calc(50% + 50%))", "linear(0 calc(0%), 0 calc(100%))"); 23 test_valid_value("animation-timing-function", "linear(0 calc(50%), 0 100%)"); 24 test_valid_value("animation-timing-function", "linear(0 0% 50%, 1 50% 100%)"); 25 test_valid_value("animation-timing-function", "linear(0, 0.5 25% 75%, 1 100% 100%)"); 26 test_valid_value("animation-timing-function", "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 0.998, 1 100% 100%)"); 27 test_valid_value("animation-timing-function", "linear(0, 0 40%, 1, 0.5, 1)"); 28 test_valid_value("animation-timing-function", "linear(0, 1.3, 1, 0.92, 1, 0.99, 1, 1.004, 0.998, 1 100% 100%)"); 29 test_valid_value("animation-timing-function", "linear(calc(0/0), 1)", "linear(0 0%, 1 100%)"); 30 31 test_invalid_value("animation-timing-function", "linear()"); 32 test_invalid_value("animation-timing-function", "linear(0)"); 33 test_invalid_value("animation-timing-function", "linear(100%)"); 34 test_invalid_value("animation-timing-function", "linear(0% 1 50%)"); 35 test_invalid_value("animation-timing-function", "linear(0 0% 100%)"); 36 test_invalid_value("animation-timing-function", "linear(0% 100% 0)"); 37 test_invalid_value("animation-timing-function", "linear(0 calc(50px - 50%), 0 calc(50em + 50em))"); 38 test_invalid_value("animation-timing-function", "linear(0 calc(50%, 50%), 0 calc(50% + 50%))"); 39 40 test_computed_value("animation-timing-function", "linear(0 0%, 1 100%)"); 41 test_computed_value("animation-timing-function", "linear( 0 0%, 1 100% )", "linear(0 0%, 1 100%)"); 42 test_computed_value("animation-timing-function", "linear(0, 1)", "linear(0 0%, 1 100%)"); 43 test_computed_value("animation-timing-function", "linear(-10, -5, 0, 5, 10)", "linear(-10 0%, -5 25%, 0 50%, 5 75%, 10 100%)"); 44 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%)"); 45 test_computed_value("animation-timing-function", "linear(0 calc(0%), 0 calc(100%))", "linear(0 0%, 0 100%)"); 46 test_computed_value("animation-timing-function", "linear(0 calc(50% - 50%), 0 calc(50% + 50%))", "linear(0 0%, 0 100%)"); 47 test_computed_value("animation-timing-function", "linear(0 calc(min(50%, 60%)), 0 100%)", "linear(0 50%, 0 100%)"); 48 test_computed_value("animation-timing-function", "linear(0 0% 50%, 1 50% 100%)", "linear(0 0%, 0 50%, 1 50%, 1 100%)"); 49 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%)"); 50 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%)"); 51 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%)"); 52 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%)"); 53 </script> 54 </body> 55 </html>