<!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>