custom-property-transition-mismatched-property-numbers.html (1519B)
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 = 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 target = document.getElementById("target"); 21 target.style.transitionProperty = customProperty; 22 target.style.transitionDuration = "100s, 200s"; 23 24 // Trigger a style change by getting the custom property 25 // value from the computed style. 26 getComputedStyle(target).getPropertyValue(customProperty); 27 28 // Set a new value for the custom property, which will yield a 29 // transition. 30 target.style.setProperty(customProperty, "2"); 31 const animations = target.getAnimations(); 32 assert_equals(animations.length, 1, "A single transition was generated"); 33 34 const transition = animations[0]; 35 assert_class_string(transition, "CSSTransition", "A CSSTransition is running"); 36 assert_equals(transition.transitionProperty, customProperty); 37 }, 'Using a single "transition-property" value set to a custom property and two "transition-duration" values correctly yields a CSS Transition.'); 38 39 </script>