custom-property-transition-non-inherited-used-by-standard-property.html (904B)
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 const customProperty = "--my-length"; 11 12 CSS.registerProperty({ 13 name: customProperty, 14 syntax: "<length>", 15 inherits: false, 16 initialValue: "100px" 17 }); 18 19 target.style.marginLeft = `var(${customProperty})`; 20 assert_equals(getComputedStyle(target).marginLeft, "100px"); 21 22 target.style.transition = `${customProperty} 1s -500ms linear`; 23 target.style.setProperty(customProperty, "200px"); 24 25 assert_equals(getComputedStyle(target).marginLeft, "150px"); 26 }, "Running a transition a non-inherited CSS variable is reflected on a standard property using that variable as a value"); 27 28 </script>