The Tor Browser: layout/style/test/test_transitions_cancel_near

     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 type="text/javascript" src="/MochiKit/MochiKit.js"></script>

     9   <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>

    10   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />

    11   <style type="text/css">

    12     #animated-elements-container > span {

    13       color: black;

    14       background: white;

    15       transition:

    16         color 10s ease-out,

    17         background 1s ease-out;

    18     }

    19     #animated-elements-container > span.another {

    20       color: white;

    21       background: black;

    22     }

    23   </style>

    24 </head>

    25 <body>

    26 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=613888">Mozilla Bug 613888</a>

    27 <pre id="animated-elements-container">

    28   <span should-restyle="true">canceled on a half of the animation</span>

    29   <span should-restyle="true">canceled too fast, and restyled on transitionend</span>

    30   <span>canceled too fast, but not restyled on transitionend</span>

    31 </pre>

    32 <pre id="test">

    33 <script class="testbody" type="text/javascript">

    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.  **/

    39 var count_remaining = 6;

    41 window.addEventListener('load', function() {

    42   var cases = Array.slice(document.querySelectorAll('#animated-elements-container > span'));

    44   cases.forEach(function(aTarget) {

    45     aTarget.addEventListener('transitionend', function(aEvent) {

    46       if (aTarget.hasAttribute('should-restyle'))

    47         aTarget.style.outline = '1px solid';

    48       var attr = 'transitionend-' + aEvent.propertyName;

    49       if (aTarget.hasAttribute(attr)) {

    50         // It's possible, given bad timers, that we might get a

    51         // transition that completed before we reversed it, which could

    52         // lead to two transitionend events for the same thing.  We

    53         // don't want to decrement count_remaining in this case.

    54         return;

    55       }

    56       aTarget.setAttribute(attr, "true");

    57       if (--count_remaining == 0) {

    58         cases.forEach(function(aCase, aIndex) {

    59           ok(aCase.hasAttribute('transitionend-color'),

    60              "transitionend for color was fired for case "+aIndex);

    61           ok(aCase.hasAttribute('transitionend-background-color'),

    62              "transitionend for background-color was fired for case "+aIndex);

    63         });

    64         SimpleTest.finish();

    65       }

    66     }, false);

    67   });

    69   cases.forEach(function(aCase) aCase.className = 'another' );

    71   window.setTimeout(function() cases[0].className = '', 500);

    72   window.setTimeout(function() cases[1].className = cases[2].className = '', 250);

    74 }, false);

    76 SimpleTest.waitForExplicitFinish();

    78 </script>

    79 </pre>

    80 </body>

    81 </html>

The Tor Browser / file revision