1216842-1.html (944B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <head> 4 <title>Bug 1216842: effect-level easing function produces negative values (compositor thread)</title> 5 <style> 6 #target { 7 width: 100px; height: 100px; 8 background: blue; 9 } 10 </style> 11 </head> 12 <body> 13 <div id="target"></div> 14 </body> 15 <script> 16 var target = document.getElementById("target"); 17 var effect = 18 new KeyframeEffect( 19 target, 20 { opacity: [0, 1] }, 21 { 22 fill: "forwards", 23 /* The function produces negative values in (0, 0.766312060) */ 24 easing: "cubic-bezier(0,-0.5,1,-0.5)", 25 duration: 100, 26 iterations: 0.75 /* To finish in the extraporation range */ 27 } 28 ); 29 var animation = new Animation(effect, document.timeline); 30 animation.play(); 31 animation.finished.then(function() { 32 document.documentElement.className = ""; 33 }); 34 </script> 35 </html>