| <!DOCTYPE html> |
| <title>Test that non-animated style is responsive to animated properties</title> |
| <link rel="help" href="https://drafts.csswg.org/css-animations/"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| @keyframes font_size_animation { |
| from { font-size: 10px; } |
| to { font-size: 20px; } |
| } |
| @keyframes var_animation { |
| from { --x: 10px; } |
| to { --x: 20px; } |
| } |
| #targets > div { |
| animation-duration: 1000s; |
| animation-delay: -500s; |
| animation-timing-function: steps(2, end); |
| } |
| |
| #target1 { |
| animation-name: font_size_animation; |
| font-size: 1px; |
| width: 1em; |
| } |
| #ref1 { |
| width: 15px; |
| } |
| |
| #target2 { |
| animation-name: font_size_animation; |
| font-size: 1px; |
| width: 1ex; |
| } |
| #ref2 { |
| font-size: 15px; |
| width: 1ex; |
| } |
| |
| #target3 { |
| animation-name: var_animation; |
| --x: 0px; |
| width: var(--x); |
| } |
| #ref3 { |
| width: 20px; |
| } |
| </style> |
| <div id="targets"> |
| <div id="target1"></div> |
| <div id="target2"></div> |
| <div id="target3"></div> |
| </div> |
| <div id="refs"> |
| <div id="ref1"></div> |
| <div id="ref2"></div> |
| <div id="ref3"></div> |
| </div> |
| <script> |
| |
| // Test that the computed value of the given property is equal on |
| // 'target' and 'ref'. |
| function test_ref(target, ref, property, description) { |
| test(() => { |
| let actual = getComputedStyle(target).getPropertyValue(property); |
| let expected = getComputedStyle(ref).getPropertyValue(property); |
| assert_equals(actual, expected); |
| }, description); |
| } |
| |
| test_ref(target1, ref1, 'width', 'em units respond to font-size animation'); |
| test_ref(target2, ref2, 'width', 'ex units respond to font-size animation'); |
| test_ref(target3, ref3, 'width', 'var() references respond to custom property animation'); |
| |
| </script> |
