box-shadow-responsive.html (2275B)
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: 'boxShadow', 17 from: 'green 20px 20px 20px 20px', 18 to: 'inherit', 19 }); 20 await responsiveTest.ready; 21 responsiveTest.inheritedValue = 'blue 0px 0px 0px 0px'; 22 responsiveTest.assertResponsive([ 23 {at: 0.25, is: 'rgb(0, 96, 64) 15px 15px 15px 15px'}, 24 {at: 0.75, is: 'rgb(0, 32, 191) 5px 5px 5px 5px'}, 25 ]); 26 responsiveTest.inheritedValue = 'yellow 100px 100px 100px 100px'; 27 responsiveTest.assertResponsive([ 28 {at: 0.25, is: 'rgb(64, 160, 0) 40px 40px 40px 40px'}, 29 {at: 0.75, is: 'rgb(191, 223, 0) 80px 80px 80px 80px'}, 30 ]); 31 }, 'Animating to inherit responsive to change in style'); 32 33 promise_test(async t => { 34 const responsiveTest = 35 createResponsiveTest(t, { 36 property: 'boxShadow', 37 from: 'inherit', 38 to: 'green 20px 20px 20px 20px', 39 }); 40 await responsiveTest.ready; 41 responsiveTest.inheritedValue = 42 'blue 0px 0px 0px 0px, yellow 100px 100px 100px 100px'; 43 responsiveTest.assertResponsive([ 44 { 45 at: 0.25, 46 is: 'rgb(0, 32, 191) 5px 5px 5px 5px, ' + 47 'rgba(255, 255, 0, 0.75) 75px 75px 75px 75px' 48 }, 49 { 50 at: 0.75, 51 is: 'rgb(0, 96, 64) 15px 15px 15px 15px, ' + 52 'rgba(255, 255, 0, 0.25) 25px 25px 25px 25px' 53 }, 54 ]); 55 responsiveTest.inheritedValue = 'yellow 100px 100px 100px 100px'; 56 responsiveTest.assertResponsive([ 57 {at: 0.25, is: 'rgb(191, 223, 0) 80px 80px 80px 80px'}, 58 {at: 0.75, is: 'rgb(64, 160, 0) 40px 40px 40px 40px'}, 59 ]); 60 }, 'Animating from inherit responsive to change in style'); 61 </script>