animation-duration-auto.tentative.html (1605B)
1 <!DOCTYPE html> 2 <title>animation-duration: auto</title> 3 <link rel="help" src="https://github.com/w3c/csswg-drafts/issues/6530"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/web-animations/testcommon.js"></script> 7 <script src="./support/testcommon.js"></script> 8 <script src="/css/support/parsing-testcommon.js"></script> 9 <script src="/css/support/computed-testcommon.js"></script> 10 <style> 11 #scroller { 12 overflow: hidden; 13 width: 100px; 14 height: 100px; 15 } 16 #scroller > #content { 17 height: 200px; 18 width: 200px; 19 } 20 21 @keyframes anim { 22 from { z-index: 0; } 23 to { z-index: 100; } 24 } 25 26 #scroller { 27 scroll-timeline: --timeline; 28 } 29 30 #element { 31 z-index: -1; 32 animation-name: anim; 33 animation-duration: auto; 34 animation-timeline: --timeline; 35 } 36 </style> 37 <main> 38 <div id=scroller> 39 <div id=content></div> 40 <div id=element></div> 41 </div> 42 </main> 43 <script> 44 promise_test(async (t) => { 45 await waitForCSSScrollTimelineStyle(); 46 assert_equals(getComputedStyle(element).zIndex, '0'); 47 }, 'A value of auto can be specified for animation-duration'); 48 </script> 49 50 <div id="target"></div> 51 <script> 52 test_valid_value('animation-duration', 'auto'); 53 test_computed_value('animation-duration', 'auto', '0s'); 54 test_valid_value('animation', 'auto cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim'); 55 test_computed_value('animation', 56 'auto cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim', 57 '0s cubic-bezier(0, -2, 1, 3) -3s 4 reverse both paused anim'); 58 </script>