background-position-responsive.html (1847B)
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <title>Animation with neutral keyframe is responsive to change in underlying style</title> 6 <link rel="help" href="https://www.w3.org/TR/web-animations-1/#the-effect-value-of-a-keyframe-animation-effect"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="responsive-test.js"></script> 10 </head> 11 <body></body> 12 <script type="text/javascript"> 13 promise_test(async t => { 14 const responsiveTest = 15 createResponsiveTest(t, { 16 property: 'backgroundPosition', 17 to: '100px 100px' 18 }); 19 await responsiveTest.ready; 20 responsiveTest.underlyingValue = '20px 60px'; 21 responsiveTest.assertResponsive([ 22 {at: 0.25, is: '40px 70px'}, 23 {at: 0.75, is: '80px 90px'}, 24 ]); 25 responsiveTest.underlyingValue = '60px 20px'; 26 responsiveTest.assertResponsive([ 27 {at: 0.25, is: '70px 40px'}, 28 {at: 0.75, is: '90px 80px'}, 29 ]); 30 }, 'Animating from a neutral keyframe when the underlying style is ' + 31 'explicitly set'); 32 33 promise_test(async t => { 34 const responsiveTest = 35 createResponsiveTest(t, { 36 property: 'backgroundPosition', 37 from: 'inherit', 38 to: '100px 100px' 39 }); 40 await responsiveTest.ready; 41 responsiveTest.inheritedValue = '20px 60px'; 42 responsiveTest.assertResponsive([ 43 {at: 0.25, is: '40px 70px'}, 44 {at: 0.75, is: '80px 90px'}, 45 ]); 46 responsiveTest.inheritedValue = '60px 20px'; 47 responsiveTest.assertResponsive([ 48 {at: 0.25, is: '70px 40px'}, 49 {at: 0.75, is: '90px 80px'}, 50 ]); 51 }, 'Animating from a neutral keyframe when the underlying style is ' + 52 'inherited from the parent'); 53 </script>