custom-property-transition-mismatched-inherited-property-numbers.html (1784B)
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"><div id="target"></div></div> 7 <script> 8 9 test(() => { 10 const customProperty = generate_name(); 11 CSS.registerProperty({ 12 name: customProperty, 13 syntax: "<number>", 14 inherits: false, 15 initialValue: "1" 16 }); 17 18 // Create transitions for our custom property with 19 // a longer list of transition-duration values. 20 const container = document.getElementById("container"); 21 container.style.transitionProperty = customProperty; 22 container.style.transitionDuration = "100s, 200s"; 23 24 const target = document.getElementById("target"); 25 target.style.transitionProperty = "inherit"; 26 target.style.transitionDuration = "inherit"; 27 28 // Trigger a style change by getting the custom property 29 // value from the computed style. 30 getComputedStyle(target).getPropertyValue(customProperty); 31 32 // Set a new value for the custom property, which will yield a 33 // transition. 34 target.style.setProperty(customProperty, "2"); 35 const animations = target.getAnimations(); 36 assert_equals(animations.length, 1, "A single transition was generated"); 37 38 const transition = animations[0]; 39 assert_class_string(transition, "CSSTransition", "A CSSTransition is running"); 40 assert_equals(transition.transitionProperty, customProperty); 41 }, 'Using a single "transition-property" value set to a custom property and two "transition-duration" values correctly yields a CSS Transition when the transition properties are set on a parent and the child inherits.'); 42 43 </script>