animation-duration-computed.html (2023B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Animations: getComputedStyle().animationDuration</title> 6 <link rel="help" href="https://drafts.csswg.org/css-animations/#propdef-animation-duration"> 7 <meta name="assert" content="animation-duration converts to seconds."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/computed-testcommon.js"></script> 11 <style> 12 #container { 13 container-type: inline-size; 14 width: 100px; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="container"> 20 <div id="target"></div> 21 </div> 22 <script> 23 test_computed_value("animation-duration", "500ms", "0.5s"); 24 test_computed_value("animation-duration", "calc(2 * 3s)", "6s"); 25 test_computed_value("animation-duration", 'calc(10s + (sign(2cqw - 10px) * 5s))', '5s'); 26 test_computed_value("animation-duration", "20s, 10s"); 27 28 // https://github.com/w3c/csswg-drafts/issues/6530 29 test_computed_value("animation-duration", "auto", "0s"); 30 test_computed_value("animation-duration", "auto, auto", "0s, 0s"); 31 32 // Test that the resolved value of the specified animation-duration 33 // is as expected given some value for animation-timeline. 34 function test_auto_duration(duration, timeline, expected) { 35 test((t) => { 36 t.add_cleanup(() => { 37 target.style = ""; 38 }); 39 target.style.animationDuration = duration; 40 target.style.animationTimeline = timeline; 41 assert_equals(expected, getComputedStyle(target).animationDuration); 42 }, `Resolved value of animation-duration:${duration} with animation-timeline:${timeline}`); 43 } 44 45 test_auto_duration("auto", "auto", "0s"); 46 test_auto_duration("auto", "auto, auto", "auto"); 47 test_auto_duration("auto", "--t", "auto"); 48 test_auto_duration("auto", "--t, --t2", "auto"); 49 test_auto_duration("auto", "none", "auto"); 50 test_auto_duration("auto", "scroll()", "auto"); 51 test_auto_duration("auto", "view()", "auto"); 52 test_auto_duration("0s", "auto", "0s"); 53 test_auto_duration("0s", "auto, auto", "0s"); 54 55 </script> 56 </body> 57 </html>