<!doctype html> <meta charset=utf-8> <title>animation-composition test</title> <link rel="help" href="https://w3c.github.io/csswg-drafts/css-animations-2/#animation-composition"> <script src=/resources/testharness.js></script> <script src=/resources/testharnessreport.js></script> <script src="support/testcommon.js"></script> <style> @keyframes anim { from { filter: blur(10px); width: 100px; } 50% { filter: blur(15px); width: 228px; } to { filter: blur(20px); width: 1337px; } } .anim-target { animation: anim 1s; animation-fill-mode: forwards; animation-timing-function: linear; filter: blur(5px); width: 50px; } .replace { animation-composition: replace; } .add { animation-composition: add; } .accumulate { animation-composition: accumulate; } </style> <div id="log"></div> <script> function run_test_case(element, property, composite_type, timing_value_map) { element.classList.add(composite_type); const anim = element.getAnimations()[0]; for (const [time, value] of Object.entries(timing_value_map)) { anim.currentTime = time; const property_value = getComputedStyle(element).getPropertyValue(property); assert_equals(property_value, value, "at time " + time); } element.classList.remove(composite_type); } const test_cases = [ ["filter", { "replace": { 0: "blur(10px)", 250: "blur(12.5px)", 500: "blur(15px)", 1000: "blur(20px)" }, "add": { 0: "blur(5px) blur(10px)", 250: "blur(5px) blur(12.5px)", 500: "blur(5px) blur(15px)", 1000: "blur(5px) blur(20px)" }, "accumulate": { 0: "blur(15px)", 250: "blur(17.5px)", 500: "blur(20px)", 1000: "blur(25px)" } }], ["width", { "replace": { 0: "100px", 250: "164px", 500: "228px", 1000: "1337px" }, "add": { 0: "150px", 250: "214px", 500: "278px", 1000: "1387px" }, "accumulate": { 0: "150px", 250: "214px", 500: "278px", 1000: "1387px" } }] ] for (const test_case of test_cases) { const property = test_case[0]; const test_data = test_case[1]; for (const [composite_type, expected_values] of Object.entries(test_data)) { test(t => { let elem = addDiv(t, {"class": "anim-target"}); run_test_case(elem, property, composite_type, expected_values); }, "animation-composition: " + composite_type + " of property " + property); } } </script>