<!DOCTYPE html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Animation with neutral keyframe is responsive to change in underlying style</title><linkrel="help"href="https://www.w3.org/TR/web-animations-1/#the-effect-value-of-a-keyframe-animation-effect"><scriptsrc="/resources/testharness.js"></script><scriptsrc="/resources/testharnessreport.js"></script><scriptsrc="responsive-test.js"></script></head><body></body><scripttype="text/javascript">promise_test(asynct=>{constresponsiveTest=createResponsiveTest(t,{property:'backgroundPosition',to:'100px 100px'});awaitresponsiveTest.ready;responsiveTest.underlyingValue='20px 60px';responsiveTest.assertResponsive([{at:0.25,is:'40px 70px'},{at:0.75,is:'80px 90px'},]);responsiveTest.underlyingValue='60px 20px';responsiveTest.assertResponsive([{at:0.25,is:'70px 40px'},{at:0.75,is:'90px 80px'},]);},'Animating from a neutral keyframe when the underlying style is '+'explicitly set');promise_test(asynct=>{constresponsiveTest=createResponsiveTest(t,{property:'backgroundPosition',from:'inherit',to:'100px 100px'});awaitresponsiveTest.ready;responsiveTest.inheritedValue='20px 60px';responsiveTest.assertResponsive([{at:0.25,is:'40px 70px'},{at:0.75,is:'80px 90px'},]);responsiveTest.inheritedValue='60px 20px';responsiveTest.assertResponsive([{at:0.25,is:'70px 40px'},{at:0.75,is:'90px 80px'},]);},'Animating from a neutral keyframe when the underlying style is '+'inherited from the parent');</script>
