merge-timeline-offset-keyframes.html (3891B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Merge timeline offset keyframes</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/web-animations/testcommon.js"></script> 9 <script src="support/testcommon.js"></script> 10 <script src="/web-animations/resources/keyframe-utils.js"></script> 11 </head> 12 <style> 13 @keyframes anim-1 { 14 entry 0% { opacity: 0 } 15 entry 100% { opacity: 1 } 16 contain 0% { opacity: 0.8 } 17 entry 100% { opacity: 0.5 } 18 } 19 @keyframes anim-2 { 20 entry 0% { opacity: 0 } 21 entry 100% { opacity: 1 } 22 contain 0% { opacity: 0.8 } 23 entry 100% { opacity: 0.5; animation-timing-function: ease } 24 } 25 26 #scroller { 27 border: 10px solid lightgray; 28 overflow-y: scroll; 29 overflow-x: hidden; 30 width: 300px; 31 height: 200px; 32 } 33 #target { 34 margin-bottom: 800px; 35 margin-top: 800px; 36 margin-left: 10px; 37 margin-right: 10px; 38 width: 100px; 39 height: 100px; 40 z-index: -1; 41 background-color: green; 42 animation-duration: auto; 43 animation-fill-mode: both; 44 animation-timing-function: linear; 45 view-timeline: --target; 46 animation-timeline: --target; 47 } 48 #target.anim-1 { 49 animation-name: anim-1; 50 } 51 #target.anim-2 { 52 animation-name: anim-2; 53 } 54 </style> 55 <body> 56 <div id="scroller"> 57 <div id="target"></div> 58 </div> 59 </body> 60 <script> 61 async function runTests() { 62 promise_test(async t => { 63 target.classList.add('anim-1'); 64 const anim = target.getAnimations()[0]; 65 await anim.ready; 66 t.add_cleanup(() => { 67 target.classList.remove('anim-1'); 68 }); 69 const keyframes = anim.effect.getKeyframes(); 70 const expected = [ 71 { 72 offset: 1, easing: "linear", composite: "replace", opacity: "1", 73 computedOffset: 1 74 }, 75 { 76 offset: { rangeName: "entry", offset: CSS.percent(0) }, 77 easing: "linear", composite: "auto", opacity: "0", 78 computedOffset: 0 79 }, 80 { 81 offset: { rangeName: "contain", offset: CSS.percent(0) }, 82 easing: "linear", composite: "auto", opacity: "0.8", 83 computedOffset: 1/3 84 }, 85 { 86 offset: { rangeName: "entry", offset: CSS.percent(100) }, 87 easing: "linear", composite: "auto", opacity: "0.5", 88 computedOffset : 1/3 89 }]; 90 assert_frame_lists_equal(keyframes, expected); 91 }, 'Keyframes with same easing and timeline offset are merged.'); 92 93 promise_test(async t => { 94 target.classList.add('anim-2'); 95 const anim = target.getAnimations()[0]; 96 await anim.ready; 97 98 t.add_cleanup(() => { 99 target.classList.remove('anim-2'); 100 }); 101 102 const keyframes = anim.effect.getKeyframes(); 103 const expected = [ 104 { 105 offset: 1, easing: "linear", composite: "replace", opacity: "1", 106 computedOffset: 1 107 }, 108 { 109 offset: { rangeName: "entry", offset: CSS.percent(0) }, 110 easing: "linear", composite: "auto", opacity: "0", 111 computedOffset: 0 112 }, 113 { 114 offset: { rangeName: "entry", offset: CSS.percent(100) }, 115 easing: "linear", composite: "auto", opacity: "1", 116 computedOffset: 1/3 117 }, 118 { 119 offset: { rangeName: "contain", offset: CSS.percent(0) }, 120 easing: "linear", composite: "auto", opacity: "0.8", 121 computedOffset: 1/3 122 }, 123 { 124 offset: { rangeName: "entry", offset: CSS.percent(100) }, 125 easing: "ease", composite: "auto", opacity: "0.5", 126 computedOffset : 1/3 127 }]; 128 assert_frame_lists_equal(keyframes, expected); 129 }, 'Keyframes with same timeline offset but different easing function ' + 130 'are not merged.'); 131 } 132 133 window.onload = runTests(); 134 </script> 135 </html>