animation-composition-keyframes.html (3320B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>animation-composition test in keyframes</title> 4 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-composition"> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <script src="support/testcommon.js"></script> 8 <style> 9 @keyframes anim { 10 from { 11 animation-composition: add; 12 filter: blur(10px); 13 width: 100px; 14 } 15 50% { 16 animation-composition: accumulate; 17 filter: blur(15px); 18 width: 228px; 19 } 20 to { 21 animation-composition: replace; 22 filter: blur(50px); 23 width: 1337px; 24 } 25 } 26 27 .anim-target { 28 animation: anim 1s; 29 animation-fill-mode: forwards; 30 animation-timing-function: linear; 31 filter: blur(5px); 32 width: 50px; 33 } 34 35 .replace { 36 animation-composition: replace; 37 } 38 39 .add { 40 animation-composition: add; 41 } 42 43 .accumulate { 44 animation-composition: accumulate; 45 } 46 </style> 47 <div id="log"></div> 48 <script> 49 function run_test_case(element, property, composite_type, timing_value_map) { 50 element.classList.add(composite_type); 51 const anim = element.getAnimations()[0]; 52 for (const [time, value] of Object.entries(timing_value_map)) { 53 anim.currentTime = time; 54 const property_value = getComputedStyle(element).getPropertyValue(property); 55 assert_equals(property_value, value, "at time " + time); 56 } 57 element.classList.remove(composite_type); 58 } 59 60 const test_cases = [ 61 ["filter", { 62 "replace": { 63 0: "blur(5px) blur(10px)", 64 250: "blur(12.5px) blur(5px)", 65 500: "blur(20px)", 66 1000: "blur(50px)" 67 }, 68 "add": { 69 0: "blur(5px) blur(10px)", 70 250: "blur(12.5px) blur(5px)", 71 500: "blur(20px)", 72 1000: "blur(50px)" 73 }, 74 "accumulate": { 75 0: "blur(5px) blur(10px)", 76 250: "blur(12.5px) blur(5px)", 77 500: "blur(20px)", 78 1000: "blur(50px)" 79 } 80 }], 81 ["width", { 82 "replace": { 83 0: "150px", 84 250: "214px", 85 500: "278px", 86 1000: "1337px" 87 }, 88 "add": { 89 0: "150px", 90 250: "214px", 91 500: "278px", 92 1000: "1337px" 93 }, 94 "accumulate": { 95 0: "150px", 96 250: "214px", 97 500: "278px", 98 1000: "1337px" 99 } 100 }] 101 ] 102 103 for (const test_case of test_cases) { 104 const property = test_case[0]; 105 const test_data = test_case[1]; 106 for (const [composite_type, expected_values] of Object.entries(test_data)) { 107 test(t => { 108 let elem = addDiv(t, {"class": "anim-target"}); 109 run_test_case(elem, property, composite_type, expected_values); 110 }, "animation-composition: " + composite_type + " of property " + property); 111 } 112 } 113 </script>