test_cubic_bezier_limits.html (6662B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="../testcommon.js"></script> 6 <body> 7 <style> 8 @keyframes anim { 9 to { margin-left: 100px; } 10 } 11 12 .transition-div { 13 margin-left: 100px; 14 } 15 </style> 16 <div id="log"></div> 17 <script> 18 'use strict'; 19 20 // We clamp +infinity or -inifinity value in floating point to 21 // maximum floating point value or -maxinum floating point value. 22 const max_float = '3.40282e38'; 23 24 test(function(t) { 25 var div = addDiv(t); 26 var anim = div.animate({ }, 100 * MS_PER_SEC); 27 28 anim.effect.updateTiming({ easing: 'cubic-bezier(0, 1e+39, 0, 0)' }); 29 assert_equals(anim.effect.getComputedTiming().easing, 30 'cubic-bezier(0, ' + max_float + ', 0, 0)', 31 'y1 control point for effect easing is out of upper boundary'); 32 33 anim.effect.updateTiming({ easing: 'cubic-bezier(0, 0, 0, 1e+39)' }); 34 assert_equals(anim.effect.getComputedTiming().easing, 35 'cubic-bezier(0, 0, 0, ' + max_float + ')', 36 'y2 control point for effect easing is out of upper boundary'); 37 38 anim.effect.updateTiming({ easing: 'cubic-bezier(0, -1e+39, 0, 0)' }); 39 assert_equals(anim.effect.getComputedTiming().easing, 40 'cubic-bezier(0, ' + '-' + max_float + ', 0, 0)', 41 'y1 control point for effect easing is out of lower boundary'); 42 43 anim.effect.updateTiming({ easing: 'cubic-bezier(0, 0, 0, -1e+39)' }); 44 assert_equals(anim.effect.getComputedTiming().easing, 45 'cubic-bezier(0, 0, 0, ' + '-' + max_float + ')', 46 'y2 control point for effect easing is out of lower boundary'); 47 48 }, 'Clamp y1 and y2 control point out of boundaries for effect easing' ); 49 50 test(function(t) { 51 var div = addDiv(t); 52 var anim = div.animate({ }, 100 * MS_PER_SEC); 53 54 anim.effect.setKeyframes([ { easing: 'cubic-bezier(0, 1e+39, 0, 0)' }]); 55 assert_equals(anim.effect.getKeyframes()[0].easing, 56 'cubic-bezier(0, ' + max_float + ', 0, 0)', 57 'y1 control point for keyframe easing is out of upper boundary'); 58 59 anim.effect.setKeyframes([ { easing: 'cubic-bezier(0, 0, 0, 1e+39)' }]); 60 assert_equals(anim.effect.getKeyframes()[0].easing, 61 'cubic-bezier(0, 0, 0, ' + max_float + ')', 62 'y2 control point for keyframe easing is out of upper boundary'); 63 64 anim.effect.setKeyframes([ { easing: 'cubic-bezier(0, -1e+39, 0, 0)' }]); 65 assert_equals(anim.effect.getKeyframes()[0].easing, 66 'cubic-bezier(0, ' + '-' + max_float + ', 0, 0)', 67 'y1 control point for keyframe easing is out of lower boundary'); 68 69 anim.effect.setKeyframes([ { easing: 'cubic-bezier(0, 0, 0, -1e+39)' }]); 70 assert_equals(anim.effect.getKeyframes()[0].easing, 71 'cubic-bezier(0, 0, 0, ' + '-' + max_float + ')', 72 'y2 control point for keyframe easing is out of lower boundary'); 73 74 }, 'Clamp y1 and y2 control point out of boundaries for keyframe easing' ); 75 76 test(function(t) { 77 var div = addDiv(t); 78 79 div.style.animation = 'anim 100s cubic-bezier(0, 1e+39, 0, 0)'; 80 81 assert_equals(div.getAnimations()[0].effect.getKeyframes()[0].easing, 82 'cubic-bezier(0, ' + max_float + ', 0, 0)', 83 'y1 control point for CSS animation is out of upper boundary'); 84 85 div.style.animation = 'anim 100s cubic-bezier(0, 0, 0, 1e+39)'; 86 assert_equals(div.getAnimations()[0].effect.getKeyframes()[0].easing, 87 'cubic-bezier(0, 0, 0, ' + max_float + ')', 88 'y2 control point for CSS animation is out of upper boundary'); 89 90 div.style.animation = 'anim 100s cubic-bezier(0, -1e+39, 0, 0)'; 91 assert_equals(div.getAnimations()[0].effect.getKeyframes()[0].easing, 92 'cubic-bezier(0, ' + '-' + max_float + ', 0, 0)', 93 'y1 control point for CSS animation is out of lower boundary'); 94 95 div.style.animation = 'anim 100s cubic-bezier(0, 0, 0, -1e+39)'; 96 assert_equals(div.getAnimations()[0].effect.getKeyframes()[0].easing, 97 'cubic-bezier(0, 0, 0, ' + '-' + max_float + ')', 98 'y2 control point for CSS animation is out of lower boundary'); 99 100 }, 'Clamp y1 and y2 control point out of boundaries for CSS animation' ); 101 102 test(function(t) { 103 var div = addDiv(t, {'class': 'transition-div'}); 104 105 div.style.transition = 'margin-left 100s cubic-bezier(0, 1e+39, 0, 0)'; 106 flushComputedStyle(div); 107 div.style.marginLeft = '0px'; 108 assert_equals(div.getAnimations()[0].effect.getTiming().easing, 109 'cubic-bezier(0, ' + max_float + ', 0, 0)', 110 'y1 control point for CSS transition on upper boundary'); 111 div.style.transition = ''; 112 div.style.marginLeft = ''; 113 114 div.style.transition = 'margin-left 100s cubic-bezier(0, 0, 0, 1e+39)'; 115 flushComputedStyle(div); 116 div.style.marginLeft = '0px'; 117 assert_equals(div.getAnimations()[0].effect.getTiming().easing, 118 'cubic-bezier(0, 0, 0, ' + max_float + ')', 119 'y2 control point for CSS transition on upper boundary'); 120 div.style.transition = ''; 121 div.style.marginLeft = ''; 122 123 div.style.transition = 'margin-left 100s cubic-bezier(0, -1e+39, 0, 0)'; 124 flushComputedStyle(div); 125 div.style.marginLeft = '0px'; 126 assert_equals(div.getAnimations()[0].effect.getTiming().easing, 127 'cubic-bezier(0, ' + '-' + max_float + ', 0, 0)', 128 'y1 control point for CSS transition on lower boundary'); 129 div.style.transition = ''; 130 div.style.marginLeft = ''; 131 132 div.style.transition = 'margin-left 100s cubic-bezier(0, 0, 0, -1e+39)'; 133 flushComputedStyle(div); 134 div.style.marginLeft = '0px'; 135 assert_equals(div.getAnimations()[0].effect.getTiming().easing, 136 'cubic-bezier(0, 0, 0, ' + '-' + max_float + ')', 137 'y2 control point for CSS transition on lower boundary'); 138 139 }, 'Clamp y1 and y2 control point out of boundaries for CSS transition' ); 140 141 test(function(t) { 142 var div = addDiv(t); 143 var anim = div.animate({ }, { duration: 100 * MS_PER_SEC, fill: 'forwards' }); 144 145 anim.pause(); 146 // The positive steepest function on both edges. 147 anim.effect.updateTiming({ easing: 'cubic-bezier(0, 1e+39, 0, 1e+39)' }); 148 assert_equals(anim.effect.getComputedTiming().progress, 0.0, 149 'progress on lower edge for the highest value of y1 and y2 control points'); 150 151 anim.finish(); 152 assert_equals(anim.effect.getComputedTiming().progress, 1.0, 153 'progress on upper edge for the highest value of y1 and y2 control points'); 154 155 // The negative steepest function on both edges. 156 anim.effect.updateTiming({ easing: 'cubic-bezier(0, -1e+39, 0, -1e+39)' }); 157 anim.currentTime = 0; 158 assert_equals(anim.effect.getComputedTiming().progress, 0.0, 159 'progress on lower edge for the lowest value of y1 and y2 control points'); 160 161 anim.finish(); 162 assert_equals(anim.effect.getComputedTiming().progress, 1.0, 163 'progress on lower edge for the lowest value of y1 and y2 control points'); 164 165 }, 'Calculated values on both edges'); 166 167 </script> 168 </body>