test_animations_styles_on_event.html (2199B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 Test that mouse movement immediately after finish() should involve 6 restyling for finished state (Bug 1228137) 7 </title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.js"></script> 10 <script src="/tests/SimpleTest/paint_listener.js"></script> 11 <script type="application/javascript" 12 src="animation_utils.js"></script> 13 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> 14 <style type="text/css"> 15 @keyframes anim { 16 0% { transform: translateX(0px) } 17 100% { transform: translateX(100px) } 18 } 19 .target { 20 /* The animation target needs geometry in order to qualify for OMTA */ 21 width: 100px; 22 height: 100px; 23 background-color: white; 24 } 25 </style> 26 </head> 27 <body> 28 <div id="display"></div> 29 <script type="application/javascript"> 30 SimpleTest.waitForExplicitFinish(); 31 32 window.onload = function () { 33 // To avoid the effect that newly created element's styles are 34 // not updated immediately, we need to add an element without 35 // animation properties first. 36 var [ div ] = new_div(""); 37 div.setAttribute("id", "bug1228137"); 38 39 waitForPaints().then(function() { 40 var initialRect = div.getBoundingClientRect(); 41 42 // Now we can set animation properties. 43 div.style.animation = "anim 100s linear forwards"; 44 45 div.addEventListener("mousemove", function(event) { 46 is(event.target.id, "bug1228137", 47 "The target of the animation should receive the mouse move event " + 48 "on the position of the animation's effect end."); 49 done_div(); 50 SimpleTest.finish(); 51 }); 52 53 var animation = div.getAnimations()[0]; 54 animation.finish(); 55 56 // Mouse over where the animation is positioned at finished state. 57 // We can't use synthesizeMouse here since synthesizeMouse causes 58 // layout flush. We need to check the position without explicit flushes. 59 synthesizeMouseAtPoint(initialRect.left + initialRect.width / 2 + 100, 60 initialRect.top + initialRect.height / 2, 61 { type: "mousemove" }, window); 62 }); 63 }; 64 </script> 65 </body> 66 </html>