<!DOCTYPE HTML> <html> <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=613888 --> <head> <title>Test for Bug 613888</title> <script type="text/javascript" src="/MochiKit/MochiKit.js"></script> <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> <style type="text/css"> #animated-elements-container > span { color: black; background: white; transition: color 10s ease-out, background 1s ease-out; } #animated-elements-container > span.another { color: white; background: black; } </style> </head> <body> <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=613888">Mozilla Bug 613888</a> <pre id="animated-elements-container"> <span should-restyle="true">canceled on a half of the animation</span> <span should-restyle="true">canceled too fast, and restyled on transitionend</span> <span>canceled too fast, but not restyled on transitionend</span> </pre> <pre id="test"> <script class="testbody" type="text/javascript"> /** Test for Bug 613888: that we don't cancel transitions when they're about to end (current interpolated value rounds to ending value) and they get an unrelated style change. **/ var count_remaining = 6; window.addEventListener('load', function() { var cases = Array.slice(document.querySelectorAll('#animated-elements-container > span')); cases.forEach(function(aTarget) { aTarget.addEventListener('transitionend', function(aEvent) { if (aTarget.hasAttribute('should-restyle')) aTarget.style.outline = '1px solid'; var attr = 'transitionend-' + aEvent.propertyName; if (aTarget.hasAttribute(attr)) { // It's possible, given bad timers, that we might get a // transition that completed before we reversed it, which could // lead to two transitionend events for the same thing. We // don't want to decrement count_remaining in this case. return; } aTarget.setAttribute(attr, "true"); if (--count_remaining == 0) { cases.forEach(function(aCase, aIndex) { ok(aCase.hasAttribute('transitionend-color'), "transitionend for color was fired for case "+aIndex); ok(aCase.hasAttribute('transitionend-background-color'), "transitionend for background-color was fired for case "+aIndex); }); SimpleTest.finish(); } }, false); }); cases.forEach(aCase => aCase.className = 'another' ); window.setTimeout(() => cases[0].className = '', 500); window.setTimeout(() => cases[1].className = cases[2].className = '', 250); }, false); SimpleTest.waitForExplicitFinish(); SimpleTest.requestFlakyTimeout("untriaged"); </script> </pre> </body> </html>