animation-change-underlying-value-changed-in-flight.html (1362B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Changing the underlying value of an animated property with implicit keyframes</title> 4 <link rel="help" href="https://drafts.csswg.org/css-animations/"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/testcommon.js"></script> 8 <style> 9 10 @keyframes implicit-from { 11 to { margin-left: 100px } 12 } 13 14 @keyframes implicit-to { 15 from { margin-left: 100px } 16 } 17 18 </style> 19 <div id="log"></div> 20 <script> 21 'use strict'; 22 23 const implicit_keyframe_test = (animationName, offset) => { 24 test(t => { 25 const div = addDiv(t); 26 27 // Set up animation to be paused and be at its mid-way point through easing. 28 div.style.animation = `${animationName} 10s paused steps(2, start)`; 29 const animation = div.getAnimations()[0]; 30 31 assert_equals(getComputedStyle(div).marginLeft, "50px", "Computed style before changing the underlying style"); 32 33 // Change the underlying value. 34 div.style.marginLeft = "200px"; 35 assert_equals(getComputedStyle(div).marginLeft, "150px", "Computed style after changing the underlying style"); 36 }, `Changing the underlying value of an animated property with an implicit ${offset}% keyframe`); 37 }; 38 39 implicit_keyframe_test("implicit-from", "0"); 40 implicit_keyframe_test("implicit-to", "100"); 41 42 </script>