effect.html (1347B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Animation.effect</title> 4 <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-effect"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="../../testcommon.js"></script> 8 <body> 9 <div id="log"></div> 10 <script> 11 'use strict'; 12 13 test(t => { 14 const anim = new Animation(); 15 assert_equals(anim.effect, null, 'initial effect is null'); 16 17 const newEffect = new KeyframeEffect(createDiv(t), null); 18 anim.effect = newEffect; 19 assert_equals(anim.effect, newEffect, 'new effect is set'); 20 }, 'effect is set correctly.'); 21 22 test(t => { 23 const div = createDiv(t); 24 const animation = div.animate({ left: ['100px', '100px'] }, 25 { fill: 'forwards' }); 26 const effect = animation.effect; 27 28 assert_equals(getComputedStyle(div).left, '100px', 29 'animation is initially having an effect'); 30 31 animation.effect = null; 32 assert_equals(getComputedStyle(div).left, 'auto', 33 'animation no longer has an effect'); 34 35 animation.effect = effect; 36 assert_equals(getComputedStyle(div).left, '100px', 37 'animation has an effect again'); 38 }, 'Clearing and setting Animation.effect should update the computed style' 39 + ' of the target element'); 40 41 </script> 42 </body>