test_transitions_cancel_near_end.html (2741B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=613888 5 --> 6 <head> 7 <title>Test for Bug 613888</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 10 <style type="text/css"> 11 #animated-elements-container > span { 12 color: black; 13 background: white; 14 transition: 15 color 10s ease-out, 16 background 1s ease-out; 17 } 18 #animated-elements-container > span.another { 19 color: white; 20 background: black; 21 } 22 </style> 23 </head> 24 <body> 25 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=613888">Mozilla Bug 613888</a> 26 <pre id="animated-elements-container"> 27 <span should-restyle="true">canceled on a half of the animation</span> 28 <span should-restyle="true">canceled too fast, and restyled on transitionend</span> 29 <span>canceled too fast, but not restyled on transitionend</span> 30 </pre> 31 <pre id="test"> 32 <script class="testbody" type="text/javascript"> 33 34 /** 35 * Test for Bug 613888: that we don't cancel transitions when they're 36 * about to end (current interpolated value rounds to ending value) and 37 * they get an unrelated style change. 38 */ 39 40 var count_remaining = 6; 41 42 window.addEventListener('load', function() { 43 var cases = Array.from(document.querySelectorAll('#animated-elements-container > span')); 44 45 cases.forEach(function(aTarget) { 46 aTarget.addEventListener('transitionend', function(aEvent) { 47 if (aTarget.hasAttribute('should-restyle')) 48 aTarget.style.outline = '1px solid'; 49 var attr = 'transitionend-' + aEvent.propertyName; 50 if (aTarget.hasAttribute(attr)) { 51 // It's possible, given bad timers, that we might get a 52 // transition that completed before we reversed it, which could 53 // lead to two transitionend events for the same thing. We 54 // don't want to decrement count_remaining in this case. 55 return; 56 } 57 aTarget.setAttribute(attr, "true"); 58 if (--count_remaining == 0) { 59 cases.forEach(function(aCase, aIndex) { 60 ok(aCase.hasAttribute('transitionend-color'), 61 "transitionend for color was fired for case "+aIndex); 62 ok(aCase.hasAttribute('transitionend-background-color'), 63 "transitionend for background-color was fired for case "+aIndex); 64 }); 65 SimpleTest.finish(); 66 } 67 }); 68 }); 69 70 cases.forEach(aCase => aCase.className = 'another' ); 71 72 window.setTimeout(() => cases[0].className = '', 500); 73 window.setTimeout(() => cases[1].className = cases[2].className = '', 250); 74 75 }); 76 77 SimpleTest.waitForExplicitFinish(); 78 SimpleTest.requestFlakyTimeout("untriaged"); 79 80 </script> 81 </pre> 82 </body> 83 </html>