custom-property-animation-used-in-shorthand.html (769B)
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 6 <style> 7 8 @property --angle { 9 syntax: "<angle>"; 10 inherits: false; 11 initial-value: 0deg; 12 } 13 14 @keyframes angle-animation { 15 from { --angle: 0deg } 16 to { --angle: 180deg } 17 } 18 19 #target { 20 animation: angle-animation 1000s linear -500s paused; 21 background: linear-gradient(var(--angle), black, white); 22 } 23 24 </style> 25 26 <div id="target"></div> 27 28 <script> 29 30 test(() => { 31 assert_equals(getComputedStyle(target).backgroundImage, 'linear-gradient(90deg, rgb(0, 0, 0), rgb(255, 255, 255))') 32 }, "Animated custom property is applied in a shorthand property."); 33 34 </script>