paced-value-animation-overwrites-keyTimes.html (1582B)
1 <!doctype html> 2 <title>Paced value animation doesn't overwrite keyTimes</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <meta charset="utf-8"> 7 <link rel="author" title="Edvard Thörnros" href="mailto:edvardt@opera.com"> 8 <link rel="help" href="https://www.w3.org/TR/SMIL20/animation.html#animationNS-animateMotionElement"> 9 <link rel="bug" href="https://bugs.chromium.org/p/chromium/issues/detail?id=231525&hotlist_id=5524&sort=%20rank%20-ID"> 10 11 <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="500" height="500"> 12 <rect x="151" y="1" width="98" height="98" fill="red"/> 13 <rect id="rect" x="0" y="0" width="100" height="100" fill="green"> 14 <animate id="animate1" attributeName="x" dur="10s" calcMode="paced" values="100; 150; 200;" keyTimes="0; 0.2; 1"/> 15 </rect> 16 </svg> 17 18 <script> 19 async_test(function(t) { 20 window.onload = t.step_func(function() { 21 let svg = document.getElementById('svg'); 22 let animate1 = document.getElementById('animate1'); 23 let rect = document.getElementById('rect'); 24 t.step_timeout(function() { 25 // animate1's keyTimes should not be affected by starting with calcMode=paced 26 animate1.setAttribute('calcMode', 'linear'); 27 svg.pauseAnimations(); 28 svg.setCurrentTime(2); 29 window.requestAnimationFrame(t.step_func(function() { 30 window.requestAnimationFrame(t.step_func_done(function() { 31 assert_approx_equals(rect.x.animVal.value, 150, 5); 32 })); 33 })); 34 }, 10); 35 }); 36 }); 37 </script>