1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_transitions_cancel_near_end.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,81 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=613888
1.8 +-->
1.9 +<head>
1.10 + <title>Test for Bug 613888</title>
1.11 + <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
1.12 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.13 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.14 + <style type="text/css">
1.15 + #animated-elements-container > span {
1.16 + color: black;
1.17 + background: white;
1.18 + transition:
1.19 + color 10s ease-out,
1.20 + background 1s ease-out;
1.21 + }
1.22 + #animated-elements-container > span.another {
1.23 + color: white;
1.24 + background: black;
1.25 + }
1.26 + </style>
1.27 +</head>
1.28 +<body>
1.29 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=613888">Mozilla Bug 613888</a>
1.30 +<pre id="animated-elements-container">
1.31 + <span should-restyle="true">canceled on a half of the animation</span>
1.32 + <span should-restyle="true">canceled too fast, and restyled on transitionend</span>
1.33 + <span>canceled too fast, but not restyled on transitionend</span>
1.34 +</pre>
1.35 +<pre id="test">
1.36 +<script class="testbody" type="text/javascript">
1.37 +
1.38 +/** Test for Bug 613888: that we don't cancel transitions when they're
1.39 + about to end (current interpolated value rounds to ending value) and
1.40 + they get an unrelated style change. **/
1.41 +
1.42 +var count_remaining = 6;
1.43 +
1.44 +window.addEventListener('load', function() {
1.45 + var cases = Array.slice(document.querySelectorAll('#animated-elements-container > span'));
1.46 +
1.47 + cases.forEach(function(aTarget) {
1.48 + aTarget.addEventListener('transitionend', function(aEvent) {
1.49 + if (aTarget.hasAttribute('should-restyle'))
1.50 + aTarget.style.outline = '1px solid';
1.51 + var attr = 'transitionend-' + aEvent.propertyName;
1.52 + if (aTarget.hasAttribute(attr)) {
1.53 + // It's possible, given bad timers, that we might get a
1.54 + // transition that completed before we reversed it, which could
1.55 + // lead to two transitionend events for the same thing. We
1.56 + // don't want to decrement count_remaining in this case.
1.57 + return;
1.58 + }
1.59 + aTarget.setAttribute(attr, "true");
1.60 + if (--count_remaining == 0) {
1.61 + cases.forEach(function(aCase, aIndex) {
1.62 + ok(aCase.hasAttribute('transitionend-color'),
1.63 + "transitionend for color was fired for case "+aIndex);
1.64 + ok(aCase.hasAttribute('transitionend-background-color'),
1.65 + "transitionend for background-color was fired for case "+aIndex);
1.66 + });
1.67 + SimpleTest.finish();
1.68 + }
1.69 + }, false);
1.70 + });
1.71 +
1.72 + cases.forEach(function(aCase) aCase.className = 'another' );
1.73 +
1.74 + window.setTimeout(function() cases[0].className = '', 500);
1.75 + window.setTimeout(function() cases[1].className = cases[2].className = '', 250);
1.76 +
1.77 +}, false);
1.78 +
1.79 +SimpleTest.waitForExplicitFinish();
1.80 +
1.81 +</script>
1.82 +</pre>
1.83 +</body>
1.84 +</html>
