effect-value-overlapping-keyframes.html (3602B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>The effect value of a keyframe effect: Overlapping keyframes</title> 4 <link rel="help" href="https://drafts.csswg.org/web-animations/#the-effect-value-of-a-keyframe-animation-effect"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="../../testcommon.js"></script> 8 <body> 9 <div id="log"></div> 10 <div id="target"></div> 11 <script> 12 'use strict'; 13 14 function assert_opacity_value(opacity, expected, description) { 15 return assert_approx_equals(parseFloat(opacity), expected, 0.0001, description); 16 } 17 18 test(t => { 19 const div = createDiv(t); 20 const anim = div.animate([ { offset: 0, opacity: 0 }, 21 { offset: 0, opacity: 0.1 }, 22 { offset: 0, opacity: 0.2 }, 23 { offset: 1, opacity: 0.8 }, 24 { offset: 1, opacity: 0.9 }, 25 { offset: 1, opacity: 1 } ], 26 { duration: 1000, 27 easing: 'cubic-bezier(0.5, -0.5, 0.5, 1.5)' }); 28 assert_opacity_value(getComputedStyle(div).opacity, 0.2, 29 'When progress is zero the last keyframe with offset 0 should' 30 + ' be used'); 31 // http://cubic-bezier.com/#.5,-0.5,.5,1.5 32 // At t=0.15, the progress should be negative 33 anim.currentTime = 150; 34 assert_equals(getComputedStyle(div).opacity, '0', 35 'When progress is negative, the first keyframe with a 0 offset' 36 + ' should be used'); 37 // At t=0.71, the progress should be just less than 1 38 anim.currentTime = 710; 39 assert_approx_equals(parseFloat(getComputedStyle(div).opacity), 0.8, 0.01, 40 'When progress is just less than 1, the first keyframe with an' 41 + ' offset of 1 should be used as the interval endpoint'); 42 // At t=0.85, the progress should be > 1 43 anim.currentTime = 850; 44 assert_equals(getComputedStyle(div).opacity, '1', 45 'When progress is greater than 1.0, the last keyframe with a 1' 46 + ' offset should be used'); 47 anim.finish(); 48 assert_equals(getComputedStyle(div).opacity, '1', 49 'When progress is equal to 1.0, the last keyframe with a 1' 50 + ' offset should be used'); 51 }, 'Overlapping keyframes at 0 and 1 use the appropriate value when the' 52 + ' progress is outside the range [0, 1]'); 53 54 test(t => { 55 const div = createDiv(t); 56 const anim = div.animate([ { offset: 0, opacity: 0 }, 57 { offset: 0.5, opacity: 0.3 }, 58 { offset: 0.5, opacity: 0.5 }, 59 { offset: 0.5, opacity: 0.7 }, 60 { offset: 1, opacity: 1 } ], 1000); 61 anim.currentTime = 250; 62 assert_opacity_value(getComputedStyle(div).opacity, 0.15, 63 'Before the overlap point, the first keyframe from the' 64 + ' overlap point should be used as interval endpoint'); 65 anim.currentTime = 500; 66 assert_opacity_value(getComputedStyle(div).opacity, 0.7, 67 'At the overlap point, the last keyframe from the' 68 + ' overlap point should be used as interval startpoint'); 69 anim.currentTime = 750; 70 assert_opacity_value(getComputedStyle(div).opacity, 0.85, 71 'After the overlap point, the last keyframe from the' 72 + ' overlap point should be used as interval startpoint'); 73 }, 'Overlapping keyframes between 0 and 1 use the appropriate value on each' 74 + ' side of the overlap point'); 75 76 </script> 77 </body>