named-range-keyframes-with-document-timeline.tentative.html (1459B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>Named range keyframe offset when you have a document timeline</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="support/testcommon.js"></script> 9 <style> 10 @keyframes fade-in-animation { 11 from { opacity: 0 } 12 13 enter 0% { opacity: 0 } 14 enter 100% { opacity: 1 } 15 exit 0% { opacity: 1 } 16 exit 100% { opacity: 0 } 17 18 to { opacity: 1 } 19 } 20 21 #subject { 22 background-color: blue; 23 height: 200px; 24 width: 200px; 25 animation: linear both fade-in-animation; 26 animation-duration: 0.1s; 27 animation-play-state: paused; 28 } 29 </style> 30 <body onload="runTests()"> 31 <div id="subject"></div> 32 </body> 33 34 <script type="text/javascript"> 35 setup(assert_implements_animation_timeline); 36 37 function runTests() { 38 promise_test(async t => { 39 const anim = subject.getAnimations()[0]; 40 anim.currentTime = -1; 41 assert_equals(getComputedStyle(subject).opacity, "0", 42 'unexpected value in the before phase'); 43 44 anim.currentTime = 50; 45 assert_equals(getComputedStyle(subject).opacity, "0.5", 46 'unexpected value in the middle of the animation'); 47 48 anim.currentTime = 100; 49 assert_equals(getComputedStyle(subject).opacity, "1", 50 'unexpected value in the after phase'); 51 }); 52 } 53 </script> 54 </html>