| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| @keyframes custom-property-animation { |
| from { --from: blue; --to: cyan; } |
| to { --from: green; --to: lime; } |
| } |
| @keyframes standard-property-animation { |
| from { background-color: var(--from); } |
| to { background-color: var(--to); } |
| } |
| div { |
| --from: red; |
| --to: red; |
| animation-name: standard-property-animation, custom-property-animation; |
| animation-duration: 10s; |
| animation-timing-function: linear; |
| } |
| #targetA { |
| animation-delay: -2.5s; |
| } |
| #targetB { |
| animation-delay: -7.5s; |
| } |
| </style> |
| <div id="targetA"></div> |
| <div id="targetB"></div> |
| <script> |
| test(() => { |
| assert_equals(getComputedStyle(targetA).getPropertyValue('--from'), ' blue'); |
| assert_equals(getComputedStyle(targetA).getPropertyValue('--to'), ' cyan'); |
| assert_equals(getComputedStyle(targetB).getPropertyValue('--from'), ' green'); |
| assert_equals(getComputedStyle(targetB).getPropertyValue('--to'), ' lime'); |
| }, 'CSS Animations on custom properties should be applied'); |
| |
| test(() => { |
| assert_equals(getComputedStyle(targetA).backgroundColor, 'rgb(0, 64, 255)'); |
| assert_equals(getComputedStyle(targetB).backgroundColor, 'rgb(0, 223, 0)'); |
| }, 'CSS Animations on custom properties should be reflected in var() references in animation keyframes'); |
| </script> |
