| <!DOCTYPE html> |
| <html> |
| <meta charset="utf-8"> |
| <title>Named range keyframe offset when you have a document timeline</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <script src="support/testcommon.js"></script> |
| <style> |
| @keyframes fade-in-animation { |
| from { opacity: 0 } |
| |
| enter 0% { opacity: 0 } |
| enter 100% { opacity: 1 } |
| exit 0% { opacity: 1 } |
| exit 100% { opacity: 0 } |
| |
| to { opacity: 1 } |
| } |
| |
| #subject { |
| background-color: blue; |
| height: 200px; |
| width: 200px; |
| animation: linear both fade-in-animation; |
| animation-duration: 0.1s; |
| animation-play-state: paused; |
| } |
| </style> |
| <body onload="runTests()"> |
| <div id="subject"></div> |
| </body> |
| |
| <script type="text/javascript"> |
| setup(assert_implements_animation_timeline); |
| |
| function runTests() { |
| promise_test(async t => { |
| const anim = subject.getAnimations()[0]; |
| anim.currentTime = -1; |
| assert_equals(getComputedStyle(subject).opacity, "0", |
| 'unexpected value in the before phase'); |
| |
| anim.currentTime = 50; |
| assert_equals(getComputedStyle(subject).opacity, "0.5", |
| 'unexpected value in the middle of the animation'); |
| |
| anim.currentTime = 100; |
| assert_equals(getComputedStyle(subject).opacity, "1", |
| 'unexpected value in the after phase'); |
| }); |
| } |
| </script> |
| </html> |
