| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Animations: getComputedStyle().animationDuration</title> |
| <link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-duration"> |
| <meta name="assert" content="animation-duration converts to seconds."> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/computed-testcommon.js"></script> |
| <style> |
| #container { |
| container-type: inline-size; |
| width: 100px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="container"> |
| <div id="target"></div> |
| </div> |
| <script> |
| test_computed_value("animation-duration", "500ms", "0.5s"); |
| test_computed_value("animation-duration", "calc(2 * 3s)", "6s"); |
| test_computed_value("animation-duration", 'calc(10s + (sign(2cqw - 10px) * 5s))', '5s'); |
| test_computed_value("animation-duration", "20s, 10s"); |
| |
| // https://github.com/w3c/csswg-drafts/issues/6530 |
| test_computed_value("animation-duration", "auto", "0s"); |
| test_computed_value("animation-duration", "auto, auto", "0s, 0s"); |
| |
| // Test that the resolved value of the specified animation-duration |
| // is as expected given some value for animation-timeline. |
| function test_auto_duration(duration, timeline, expected) { |
| test((t) => { |
| t.add_cleanup(() => { |
| target.style = ""; |
| }); |
| target.style.animationDuration = duration; |
| target.style.animationTimeline = timeline; |
| assert_equals(expected, getComputedStyle(target).animationDuration); |
| }, `Resolved value of animation-duration:${duration} with animation-timeline:${timeline}`); |
| } |
| |
| test_auto_duration("auto", "auto", "0s"); |
| test_auto_duration("auto", "auto, auto", "auto"); |
| test_auto_duration("auto", "--t", "auto"); |
| test_auto_duration("auto", "--t, --t2", "auto"); |
| test_auto_duration("auto", "none", "auto"); |
| test_auto_duration("auto", "scroll()", "auto"); |
| test_auto_duration("auto", "view()", "auto"); |
| test_auto_duration("0s", "auto", "0s"); |
| test_auto_duration("0s", "auto, auto", "0s"); |
| |
| </script> |
| </body> |
| </html> |
