keysplines-x-limits.html (3153B)
1 <!DOCTYPE html> 2 <title>'keySplines' with x-values outside of the 0 to 1 range</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <svg> 6 <rect x="10" width="10" height="10" fill="blue"> 7 <animate attributeName="x" values="0; 250" dur="5s"/> 8 </rect> 9 <rect x="10" width="10" height="10" y="20" fill="blue"> 10 <animate attributeName="x" values="0; 250" dur="5s" 11 keyTimes="0; 1" keySplines="-1 0 1 1" calcMode="spline"/> 12 </rect> 13 <rect x="10" width="10" height="10" y="30" fill="blue"> 14 <animate attributeName="x" values="0; 250" dur="5s" 15 keyTimes="0; 1" keySplines="2 0 1 1" calcMode="spline"/> 16 </rect> 17 <rect x="10" width="10" height="10" y="10" fill="blue"> 18 <animate attributeName="x" values="0; 250" dur="5s" 19 keyTimes="0; 1" keySplines="0 0 -1 1" calcMode="spline"/> 20 </rect> 21 <rect x="10" width="10" height="10" y="40" fill="blue"> 22 <animate attributeName="x" values="0; 250" dur="5s" 23 keyTimes="0; 1" keySplines="0 0 2 1" calcMode="spline"/> 24 </rect> 25 <rect x="10" width="10" height="10" y="50" fill="blue"> 26 <animateMotion values="0,50; 250,50" dur="5s" keyPoints="0; 1" 27 keyTimes="0; 1" keySplines="-10 0 1 1" 28 calcMode="spline"/> 29 </rect> 30 <rect x="10" width="10" height="10" y="60" fill="blue"> 31 <animateMotion values="0,60; 250,60" dur="5s" keyPoints="0; 1" 32 keyTimes="0; 1" keySplines="10 0 1 1" 33 calcMode="spline"/> 34 </rect> 35 <rect x="10" width="10" height="10" y="70" fill="blue"> 36 <animateMotion values="0,70; 250,70" dur="5s" keyPoints="0; 1" 37 keyTimes="0; 1" keySplines="0 0 -10 1" 38 calcMode="spline"/> 39 </rect> 40 <rect x="10" width="10" height="10" y="80" fill="blue"> 41 <animateMotion values="0,80; 250,80" dur="5s" keyPoints="0; 1" 42 keyTimes="0; 1" keySplines="0 0 10 1" 43 calcMode="spline"/> 44 </rect> 45 </svg> 46 <script> 47 async_test(t => { 48 let svg = document.querySelector('svg'); 49 svg.pauseAnimations(); 50 svg.setCurrentTime(2.5); 51 window.onload = t.step_func(() => { 52 requestAnimationFrame(t.step_func_done(() => { 53 let rects = document.getElementsByTagName('rect'); 54 assert_equals(rects[0].getBBox().x, 125, 'animations applied'); 55 assert_equals(rects[1].getBBox().x, 10, 'first control point x less than zero'); 56 assert_equals(rects[2].getBBox().x, 10, 'first control point x greater than one'); 57 assert_equals(rects[3].getBBox().x, 10, 'second control point x less than zero'); 58 assert_equals(rects[4].getBBox().x, 10, 'second control point x greater than one'); 59 assert_equals(rects[5].getBBox().x, 10, 'first control point x less than zero'); 60 assert_equals(rects[6].getBBox().x, 10, 'first control point x greater than one'); 61 assert_equals(rects[7].getBBox().x, 10, 'second control point x less than zero'); 62 assert_equals(rects[8].getBBox().x, 10, 'second control point x greater than one'); 63 })); 64 }); 65 }); 66 </script>