animation-base-response-001.html (1807B)
1 <!DOCTYPE html> 2 <title>Test that non-animated style is responsive to animated properties</title> 3 <link rel="help" href="https://drafts.csswg.org/css-animations/"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 @keyframes font_size_animation { 8 from { font-size: 10px; } 9 to { font-size: 20px; } 10 } 11 @keyframes var_animation { 12 from { --x: 10px; } 13 to { --x: 20px; } 14 } 15 #targets > div { 16 animation-duration: 1000s; 17 animation-delay: -500s; 18 animation-timing-function: steps(2, end); 19 } 20 21 #target1 { 22 animation-name: font_size_animation; 23 font-size: 1px; 24 width: 1em; 25 } 26 #ref1 { 27 width: 15px; 28 } 29 30 #target2 { 31 animation-name: font_size_animation; 32 font-size: 1px; 33 width: 1ex; 34 } 35 #ref2 { 36 font-size: 15px; 37 width: 1ex; 38 } 39 40 #target3 { 41 animation-name: var_animation; 42 --x: 0px; 43 width: var(--x); 44 } 45 #ref3 { 46 width: 20px; 47 } 48 </style> 49 <div id="targets"> 50 <div id="target1"></div> 51 <div id="target2"></div> 52 <div id="target3"></div> 53 </div> 54 <div id="refs"> 55 <div id="ref1"></div> 56 <div id="ref2"></div> 57 <div id="ref3"></div> 58 </div> 59 <script> 60 61 // Test that the computed value of the given property is equal on 62 // 'target' and 'ref'. 63 function test_ref(target, ref, property, description) { 64 test(() => { 65 let actual = getComputedStyle(target).getPropertyValue(property); 66 let expected = getComputedStyle(ref).getPropertyValue(property); 67 assert_equals(actual, expected); 68 }, description); 69 } 70 71 test_ref(target1, ref1, 'width', 'em units respond to font-size animation'); 72 test_ref(target2, ref2, 'width', 'ex units respond to font-size animation'); 73 test_ref(target3, ref3, 'width', 'var() references respond to custom property animation'); 74 75 </script>