custom-property-animation-non-inherited-used-by-standard-property.html (820B)
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="target"></div> 7 <script> 8 9 test(() => { 10 CSS.registerProperty({ 11 name: "--my-length", 12 syntax: "<length>", 13 inherits: false, 14 initialValue: "0px" 15 }); 16 17 target.style.marginLeft = "var(--my-length)"; 18 19 const duration = 1000; 20 const animation = target.animate({ "--my-length": "100px" }, duration); 21 animation.pause(); 22 animation.currentTime = duration / 4; 23 24 assert_equals(getComputedStyle(target).marginLeft, "25px"); 25 }, "Animating a non-inherited CSS variable is reflected on a standard property using that variable as a value"); 26 27 </script>