test_animations_variable_changes.html (1533B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Tests that animations respond to changes to variables</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="../testcommon.js"></script> 7 <style> 8 :root { 9 --width: 100px; 10 } 11 .wider { 12 --width: 200px; 13 } 14 @keyframes widen { 15 to { margin-left: var(--width) } 16 } 17 </style> 18 <body> 19 <div id="log"></div> 20 <script> 21 22 test(() => { 23 const div = document.createElement('div'); 24 document.body.append(div); 25 26 div.style.animation = 'widen step-start 100s'; 27 assert_equals(getComputedStyle(div).marginLeft, '100px', 28 'Animation value before updating CSS variable'); 29 30 div.classList.add('wider'); 31 32 assert_equals(getComputedStyle(div).marginLeft, '200px', 33 'Animation value after updating CSS variable'); 34 35 div.remove(); 36 }, 'Animation reflects changes to custom properties'); 37 38 test(() => { 39 const parent = document.createElement('div'); 40 const child = document.createElement('div'); 41 parent.append(child); 42 document.body.append(parent); 43 44 child.style.animation = 'widen step-start 100s'; 45 assert_equals(getComputedStyle(child).marginLeft, '100px', 46 'Animation value before updating CSS variable'); 47 48 parent.classList.add('wider'); 49 50 assert_equals(getComputedStyle(child).marginLeft, '200px', 51 'Animation value after updating CSS variable'); 52 53 parent.remove(); 54 child.remove(); 55 }, 'Animation reflect changes to custom properties on parent'); 56 57 </script> 58 </body>