| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| @keyframes test { |
| from { --x: green; } |
| to { --x: lime; } |
| } |
| #parentA, #parentB { |
| --x: red; |
| } |
| #targetA, #targetB { |
| background-color: var(--x); |
| } |
| #parentA { |
| animation: test 10s -2s; |
| } |
| #parentB { |
| animation: test 10s -8s; |
| } |
| </style> |
| <div id="parentA"> |
| <div id="targetA"></div> |
| </div> |
| <div id="parentB"> |
| <div id="targetB"></div> |
| </div> |
| <script> |
| test(() => { |
| assert_equals(getComputedStyle(targetA).getPropertyValue('--x'), ' green'); |
| assert_equals(getComputedStyle(targetB).getPropertyValue('--x'), ' lime'); |
| }, 'CSS Animations on custom properties should get inherited'); |
| |
| test(() => { |
| assert_equals(getComputedStyle(targetA).backgroundColor, 'rgb(0, 128, 0)'); |
| assert_equals(getComputedStyle(targetB).backgroundColor, 'rgb(0, 255, 0)'); |
| }, 'CSS Animations on custom properties that get inherited should be reflected in var() references'); |
| </script> |
