| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| CSS.registerProperty({ |
| name: '--percentage-xor-length', |
| syntax: '<length> | <percentage>', |
| initialValue: '400px', |
| inherits: false, |
| }); |
| </script> |
| <style> |
| @keyframes test { |
| from { --percentage-xor-length: 100px; } |
| to { --percentage-xor-length: 100%; } |
| } |
| #target { |
| animation-name: test; |
| animation-duration: 100s; |
| animation-delay: -50s; |
| animation-play-state: paused; |
| } |
| </style> |
| <div id="target">target</div> |
| <script> |
| test(() => { |
| let cs = getComputedStyle(target); |
| assert_equals(cs.getPropertyValue('--percentage-xor-length'), '100%'); |
| }, 'No smooth interpolation between <length> and <percentage>'); |
| </script> |
