CSSAnimation-compositeOrder.tentative.html (1558B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Animation composite order</title> 4 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-composite-order"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/testcommon.js"></script> 8 <style> 9 @keyframes margin50 { 10 from { 11 margin-left: 50px; 12 } 13 to { 14 margin-left: 50px; 15 } 16 } 17 @keyframes margin100 { 18 from { 19 margin-left: 100px; 20 } 21 to { 22 margin-left: 100px; 23 } 24 } 25 </style> 26 <div id="log"</div> 27 <script> 28 'use strict'; 29 30 promise_test(async t => { 31 const div = addDiv(t); 32 div.style.animation = 'margin100 100s'; 33 assert_equals(getComputedStyle(div).marginLeft, '100px'); 34 div.style.animation = 'margin50 100s, margin100 100s'; 35 // The margin should be unaffected by margin50 since it is named earlier 36 // in the animation list. 37 assert_equals(getComputedStyle(div).marginLeft, '100px'); 38 }, "Animations are composited by their order in the animation-name property."); 39 40 promise_test(async t => { 41 const div = addDiv(t); 42 const animA = div.animate({margin: ["100px","100px"]}, 100000); 43 assert_equals(getComputedStyle(div).marginLeft, '100px'); 44 div.style.animation = 'margin50 100s'; 45 // Wait for animation starts 46 await animA.ready; 47 await waitForAnimationFrames(1); 48 assert_equals(getComputedStyle(div).marginLeft, '100px', 49 "A higher-priority animation is not overriden by a more recent" 50 + "one."); 51 }, 'Web-animation replaces CSS animation'); 52 53 </script>