custom-property-animation-inherited-used-by-standard-property.html (874B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="../resources/utils.js"></script> 6 <div id="container"> 7 <div id="target"></div> 8 </div> 9 <script> 10 11 test(() => { 12 CSS.registerProperty({ 13 name: "--my-length", 14 syntax: "<length>", 15 inherits: true, 16 initialValue: "0px" 17 }); 18 19 target.style.marginLeft = "var(--my-length)"; 20 21 const duration = 1000; 22 const animation = container.animate({ "--my-length": "100px" }, duration); 23 animation.pause(); 24 animation.currentTime = duration / 4; 25 26 assert_equals(getComputedStyle(target).marginLeft, "25px"); 27 }, "Animating an inherited CSS variable on a parent is reflected on a standard property using that variable as a value on a child"); 28 29 </script>