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