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