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