effect-value-context.html (3896B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>The effect value of a keyframe effect: Property values that depend on 4 their context (target element)</title> 5 <link rel="help" href="https://drafts.csswg.org/web-animations/#calculating-computed-keyframes"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="../../testcommon.js"></script> 9 <body> 10 <div id="log"></div> 11 <script> 12 'use strict'; 13 14 test(t => { 15 const div = createDiv(t); 16 div.style.fontSize = '10px'; 17 const animation = div.animate([ { marginLeft: '10em' }, 18 { marginLeft: '20em' } ], 1000); 19 animation.currentTime = 500; 20 assert_equals(getComputedStyle(div).marginLeft, '150px', 21 'Effect value before updating font-size'); 22 div.style.fontSize = '20px'; 23 assert_equals(getComputedStyle(div).marginLeft, '300px', 24 'Effect value after updating font-size'); 25 }, 'Effect values reflect changes to font-size on element'); 26 27 test(t => { 28 const parentDiv = createDiv(t); 29 const div = createDiv(t); 30 parentDiv.appendChild(div); 31 parentDiv.style.fontSize = '10px'; 32 33 const animation = div.animate([ { marginLeft: '10em' }, 34 { marginLeft: '20em' } ], 1000); 35 animation.currentTime = 500; 36 assert_equals(getComputedStyle(div).marginLeft, '150px', 37 'Effect value before updating font-size on parent element'); 38 parentDiv.style.fontSize = '20px'; 39 assert_equals(getComputedStyle(div).marginLeft, '300px', 40 'Effect value after updating font-size on parent element'); 41 }, 'Effect values reflect changes to font-size on parent element'); 42 43 promise_test(t => { 44 const parentDiv = createDiv(t); 45 const div = createDiv(t); 46 parentDiv.appendChild(div); 47 parentDiv.style.fontSize = '10px'; 48 const animation = div.animate([ { marginLeft: '10em' }, 49 { marginLeft: '20em' } ], 1000); 50 51 animation.pause(); 52 animation.currentTime = 500; 53 parentDiv.style.fontSize = '20px'; 54 55 return animation.ready.then(() => { 56 assert_equals(getComputedStyle(div).marginLeft, '300px', 57 'Effect value after updating font-size on parent element'); 58 }); 59 }, 'Effect values reflect changes to font-size when computed style is not' 60 + ' immediately flushed'); 61 62 promise_test(t => { 63 const divWith10pxFontSize = createDiv(t); 64 divWith10pxFontSize.style.fontSize = '10px'; 65 const divWith20pxFontSize = createDiv(t); 66 divWith20pxFontSize.style.fontSize = '20px'; 67 68 const div = createDiv(t); 69 div.remove(); // Detach 70 const animation = div.animate([ { marginLeft: '10em' }, 71 { marginLeft: '20em' } ], 1000); 72 animation.pause(); 73 74 return animation.ready.then(() => { 75 animation.currentTime = 500; 76 77 divWith10pxFontSize.appendChild(div); 78 assert_equals(getComputedStyle(div).marginLeft, '150px', 79 'Effect value after attaching to font-size:10px parent'); 80 divWith20pxFontSize.appendChild(div); 81 assert_equals(getComputedStyle(div).marginLeft, '300px', 82 'Effect value after attaching to font-size:20px parent'); 83 }); 84 }, 'Effect values reflect changes to font-size from reparenting'); 85 86 test(t => { 87 const divA = createDiv(t); 88 divA.style.fontSize = '10px'; 89 90 const divB = createDiv(t); 91 divB.style.fontSize = '20px'; 92 93 const animation = divA.animate([ { marginLeft: '10em' }, 94 { marginLeft: '20em' } ], 1000); 95 animation.currentTime = 500; 96 assert_equals(getComputedStyle(divA).marginLeft, '150px', 97 'Effect value before updating target element'); 98 99 animation.effect.target = divB; 100 assert_equals(getComputedStyle(divB).marginLeft, '300px', 101 'Effect value after updating target element'); 102 }, 'Effect values reflect changes to target element'); 103 104 </script> 105 </body>