animation-timeline-none.html (1386B)
1 <!DOCTYPE html> 2 <link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-timeline"> 3 <link rel="help" src="https://drafts.csswg.org/web-animations/#playing-an-animation-section"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/web-animations/testcommon.js"></script> 7 <style> 8 @keyframes expand { 9 from { width: 100px; } 10 to { width: 200px; } 11 } 12 13 .test { 14 width: 0px; 15 animation-name: expand; 16 animation-duration: 1s; 17 } 18 19 #element_timeline_none { 20 animation-timeline: none; 21 } 22 #element_unknown_timeline { 23 animation-timeline: --unknown_timeline; 24 } 25 26 </style> 27 <div class=test id=element_timeline_none></div> 28 <div class=test id=element_unknown_timeline></div> 29 <script> 30 promise_test(async (t) => { 31 assert_equals(getComputedStyle(element_timeline_none).width, '100px'); 32 await waitForAnimationFrames(3); 33 assert_equals(getComputedStyle(element_timeline_none).width, '100px'); 34 }, 'Animation with animation-timeline:none holds current time at zero'); 35 36 promise_test(async (t) => { 37 assert_equals(getComputedStyle(element_unknown_timeline).width, '100px'); 38 await waitForAnimationFrames(3); 39 assert_equals(getComputedStyle(element_unknown_timeline).width, '100px'); 40 }, 'Animation with unknown timeline name holds current time at zero'); 41 </script>