<!DOCTYPE html><metacharset=utf-8><title>The effect value of a keyframe effect: Property values that depend on their context (target element)</title><linkrel="help"href="https://drafts.csswg.org/web-animations/#calculating-computed-keyframes"><scriptsrc="/resources/testharness.js"></script><scriptsrc="/resources/testharnessreport.js"></script><scriptsrc="../../testcommon.js"></script><body><divid="log"></div><script>'use strict';test(t=>{constdiv=createDiv(t);div.style.fontSize='10px';constanimation=div.animate([{marginLeft:'10em'},{marginLeft:'20em'}],1000);animation.currentTime=500;assert_equals(getComputedStyle(div).marginLeft,'150px','Effect value before updating font-size');div.style.fontSize='20px';assert_equals(getComputedStyle(div).marginLeft,'300px','Effect value after updating font-size');},'Effect values reflect changes to font-size on element');test(t=>{constparentDiv=createDiv(t);constdiv=createDiv(t);parentDiv.appendChild(div);parentDiv.style.fontSize='10px';constanimation=div.animate([{marginLeft:'10em'},{marginLeft:'20em'}],1000);animation.currentTime=500;assert_equals(getComputedStyle(div).marginLeft,'150px','Effect value before updating font-size on parent element');parentDiv.style.fontSize='20px';assert_equals(getComputedStyle(div).marginLeft,'300px','Effect value after updating font-size on parent element');},'Effect values reflect changes to font-size on parent element');promise_test(t=>{constparentDiv=createDiv(t);constdiv=createDiv(t);parentDiv.appendChild(div);parentDiv.style.fontSize='10px';constanimation=div.animate([{marginLeft:'10em'},{marginLeft:'20em'}],1000);animation.pause();animation.currentTime=500;parentDiv.style.fontSize='20px';returnanimation.ready.then(()=>{assert_equals(getComputedStyle(div).marginLeft,'300px','Effect value after updating font-size on parent element');});},'Effect values reflect changes to font-size when computed style is not'+' immediately flushed');promise_test(t=>{constdivWith10pxFontSize=createDiv(t);divWith10pxFontSize.style.fontSize='10px';constdivWith20pxFontSize=createDiv(t);divWith20pxFontSize.style.fontSize='20px';constdiv=createDiv(t);div.remove();// Detachconstanimation=div.animate([{marginLeft:'10em'},{marginLeft:'20em'}],1000);animation.pause();returnanimation.ready.then(()=>{animation.currentTime=500;divWith10pxFontSize.appendChild(div);assert_equals(getComputedStyle(div).marginLeft,'150px','Effect value after attaching to font-size:10px parent');divWith20pxFontSize.appendChild(div);assert_equals(getComputedStyle(div).marginLeft,'300px','Effect value after attaching to font-size:20px parent');});},'Effect values reflect changes to font-size from reparenting');test(t=>{constdivA=createDiv(t);divA.style.fontSize='10px';constdivB=createDiv(t);divB.style.fontSize='20px';constanimation=divA.animate([{marginLeft:'10em'},{marginLeft:'20em'}],1000);animation.currentTime=500;assert_equals(getComputedStyle(divA).marginLeft,'150px','Effect value before updating target element');animation.effect.target=divB;assert_equals(getComputedStyle(divB).marginLeft,'300px','Effect value after updating target element');},'Effect values reflect changes to target element');</script></body>