The Tor Browser: layout/style/test/test_transitions

Integrate friendly tips from Tor colleagues to make (or not) 4.5 alpha 3;
This includes removal of overloaded (but unused) methods, and addition of
a overlooked call to DataStruct::SetData(nsISupports, uint32_t, bool.)

     1 <!DOCTYPE HTML>

     2 <html>

     3 <!--

     4 https://bugzilla.mozilla.org/show_bug.cgi?id=531585

     5 -->

     6 <head>

     7   <title>Test for Bug 531585 (transitionend event)</title>

     8   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>

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

    10 </head>

    11 <style type="text/css">

    13 .bar { margin: 10px; }

    15 #one { transition-duration: 500ms; transition-property: all; }

    16 #two { transition: margin-left 1s; }

    17 #three { transition: margin 0.5s 0.25s; }

    19 #four, #five, #six, #seven::before, #seven::after {

    20   transition: 500ms color;

    21   border-color: black; /* don't derive from color */

    22   -moz-column-rule-color: black; /* don't derive from color */

    23   -moz-text-decoration-color: black; /* don't derive from color */

    24 }

    26 #four {

    27   /* give the reversing transition a long duration; the reversing will

    28      still be quick */

    29   transition-duration: 30s;

    30   transition-timing-function: cubic-bezier(0, 1, 1, 0);

    31 }

    33 #seven::before, #seven::after {

    34   content: "x";

    35   transition-duration: 50ms;

    36 }

    37 #seven[foo]::before, #seven[foo]::after { color: lime; }

    39 </style>

    40 <body>

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

    42 <p id="display">

    44 <span id="one" style="color:blue"></span>

    45 <span id="two"></span>

    46 <span id="three"></span>

    47 <span id="four" style="color: blue"></span>

    48 <span id="five" style="color: blue"></span>

    49 <span id="six" style="color: blue"></span>

    50 <span id="seven" style="color: blue"></span>

    52 </p>

    53 <pre id="test">

    54 <script type="application/javascript">

    56 /** Test for Bug 531585 (transitionend event) **/

    58 SimpleTest.waitForExplicitFinish();

    59 var gTestCount = 0;

    60 function started_test() { ++gTestCount; }

    61 function finished_test() { if (--gTestCount == 0) { SimpleTest.finish(); } }

    63 function $(id) { return document.getElementById(id); }

    64 function cs(id) { return getComputedStyle($(id), ""); }

    66 var got_one_root = false;

    67 var got_one_target = false;

    68 var got_one_target_bordertop = false;

    69 var got_one_target_borderright = false;

    70 var got_one_target_borderbottom = false;

    71 var got_one_target_borderleft = false;

    72 var got_one_target_columnrule = false;

    73 var got_one_target_textdecorationcolor = false;

    74 var got_two_target = false;

    75 var got_three_top = false;

    76 var got_three_right = false;

    77 var got_three_bottom = false;

    78 var got_three_left = false;

    79 var got_four_root = false;

    80 var got_body = false;

    81 var did_stops = false;

    82 var got_before = false;

    84 document.documentElement.addEventListener("transitionend",

    85   function(event) {

    86     if (event.target == $("one")) {

    87       ok(!got_one_root, "transitionend on one on root");

    88       is(event.propertyName, "border-right-color",

    89          "propertyName for transitionend on one");

    90       is(event.elapsedTime, 0.5,

    91          "elapsedTime for transitionend on one");

    92       is(cs("one").borderRightColor, "rgb(0, 255, 0)",

    93          "computed style for transitionend on one");

    94       got_one_root = true;

    95       finished_test();

    96     } else if (event.target == $("four")) {

    97       ok(!got_four_root, "transitionend on four on root");

    98       is(event.propertyName, "color",

    99          "propertyName for transitionend on four");

   100       // Reported time should (really?) be shortened by reversing.

   101       ok(event.elapsedTime < 30,

   102          "elapsedTime for transitionend on four");

   103       is(cs("four").color, "rgb(0, 0, 255)",

   104          "computed style for transitionend on four (end of reverse transition)");

   105       got_four_root = true;

   106       finished_test();

   107     } else if (event.target == document.body) {

   108       // A synthesized event.

   109       ok(!got_body, "transitionend on body on root");

   110       is(event.propertyName, "some-unknown-prop",

   111          "propertyName for transitionend on body");

   112       // Reported time should (really?) be shortened by reversing.

   113       is(event.elapsedTime, 0.5,

   114          "elapsedTime for transitionend on body");

   115       got_body = true;

   116       finished_test();

   117     } else if (event.target == $("seven")) {

   118       if (!got_before) {

   119         got_before = true;

   120         is(event.pseudoElement, "::before");

   121       } else {

   122         is(event.pseudoElement, "::after");

   123       }

   124       is(event.propertyName, "color");

   125       is(event.isTrusted, true);

   126     } else {

   127       if (!did_stops &&

   128           (event.target == $("five") || event.target == $("six"))) {

   129         todo(false,

   130              "timeout to stop transitions firing later than it should be");

   131         return;

   132       }

   133       ok(false,

   134          "unexpected event on " + event.target.nodeName +

   135          " element with id '" + event.target.id + "' " +

   136          "elapsedTime=" + event.elapsedTime +

   137          " propertyName='" + event.propertyName + "'");

   138     }

   139   }, false);

   141 $("one").addEventListener("transitionend",

   142   function(event) {

   143     switch (event.propertyName) {

   144       case "color":

   145         ok(!got_one_target,

   146            "transitionend on one on target (color)");

   147         got_one_target = true;

   148         event.stopPropagation();

   149         break;

   150       case "border-top-color":

   151         ok(!got_one_target_bordertop,

   152            "transitionend on one on target (border-top-color)");

   153         got_one_target_bordertop = true;

   154         event.stopPropagation();

   155         break;

   156       case "border-right-color":

   157         ok(!got_one_target_borderright,

   158            "transitionend on one on target (border-right-color)");

   159         got_one_target_borderright = true;

   160         // Let this event through to body

   161         break;

   162       case "border-bottom-color":

   163         ok(!got_one_target_borderbottom,

   164            "transitionend on one on target (border-bottom-color)");

   165         got_one_target_borderbottom = true;

   166         event.stopPropagation();

   167         break;

   168       case "border-left-color":

   169         ok(!got_one_target_borderleft,

   170            "transitionend on one on target (border-left-color)");

   171         got_one_target_borderleft = true;

   172         event.stopPropagation();

   173         break;

   174       case "-moz-column-rule-color":

   175         ok(!got_one_target_columnrule,

   176            "transitionend on one on target (-moz-column-rule-color)");

   177         got_one_target_columnrule = true;

   178         event.stopPropagation();

   179         break;

   180       case "-moz-text-decoration-color":

   181         ok(!got_one_target_textdecorationcolor,

   182            "transitionend on one on target (-moz-text-decoration-color)");

   183         got_one_target_textdecorationcolor = true;

   184         event.stopPropagation();

   185         break;

   186       default:

   187         ok(false, "unexpected property name " + event.propertyName +

   188                   " for transitionend on one on target");

   189     }

   190     is(event.elapsedTime, 0.5,

   191        "elapsedTime for transitionend on one");

   192     is(cs("one").getPropertyValue(event.propertyName), "rgb(0, 255, 0)",

   193        "computed style of " + event.propertyName + " for transitionend on one");

   194     finished_test();

   195   }, false);

   197 started_test();

   198 started_test();

   199 started_test();

   200 started_test();

   201 started_test();

   202 started_test();

   203 $("one").style.color = "lime";

   206 $("two").addEventListener("transitionend",

   207   function(event) {

   208     event.stopPropagation();

   210     ok(!got_two_target, "transitionend on two on target");

   211     is(event.propertyName, "margin-left",

   212        "propertyName for transitionend on two");

   213     is(event.elapsedTime, 1,

   214        "elapsedTime for transitionend on two");

   215     is(event.bubbles, true,

   216        "transitionend events should bubble");

   217     is(event.cancelable, false,

   218        "transitionend events should not be cancelable");

   219     is(cs("two").marginLeft, "10px",

   220        "computed style for transitionend on two");

   221     got_two_target = true;

   222     finished_test();

   223   }, false);

   225 started_test();

   226 $("two").className = "bar";

   228 $("three").addEventListener("transitionend",

   229   function(event) {

   230     event.stopPropagation();

   232     switch (event.propertyName) {

   233       case "margin-top":

   234         ok(!got_three_top, "should only get margin-top once");

   235         got_three_top = true;

   236         break;

   237       case "margin-right":

   238         ok(!got_three_right, "should only get margin-right once");

   239         got_three_right = true;

   240         break;

   241       case "margin-bottom":

   242         ok(!got_three_bottom, "should only get margin-bottom once");

   243         got_three_bottom = true;

   244         break;

   245       case "margin-left":

   246         ok(!got_three_left, "should only get margin-left once");

   247         got_three_left = true;

   248         break;

   249       default:

   250         ok(false, "unexpected property name " + event.propertyName +

   251                   " for transitionend on three");

   252     }

   253     is(event.elapsedTime, 0.5,

   254        "elapsedTime for transitionend on three");

   255     is(cs("three").getPropertyValue(event.propertyName), "10px",

   256        "computed style for transitionend on three");

   257     finished_test();

   258   }, true);

   260 started_test();

   261 started_test();

   262 started_test();

   263 started_test();

   264 $("three").className = "bar";

   266 // We reverse the transition on four, and we should only get an event

   267 // at the end of the second transition.

   268 started_test();

   269 $("four").style.color = "lime";

   271 // We cancel the transition on five by changing 'transition-property',

   272 // and should thus get no event.

   273 $("five").style.color = "lime";

   275 // We cancel the transition on six by changing 'transition-duration' and

   276 // then changing the value, so we should get no event.

   277 $("six").style.color = "lime";

   279 started_test();

   280 started_test();

   281 $("seven").setAttribute("foo", "bar");

   283 setTimeout(function() {

   284              if (cs("five") != "rgb(0, 255, 0)" &&

   285                  cs("six") != "rgb(0, 255, 0)") {

   286                // The transition hasn't finished already.

   287                did_stops = true;

   288              }

   289              $("five").style.transitionProperty = "margin-left";

   290              $("six").style.transitionDuration = "0s";

   291              $("six").style.transitionDelay = "0s";

   292              $("six").style.color = "blue";

   293            }, 100);

   294 function poll_start_reversal() {

   295   if (cs("four").color != "rgb(0, 0, 255)") {

   296     // The forward transition has started.

   297     $("four").style.color = "blue";

   298   } else {

   299     // The forward transition has not started yet.

   300     setTimeout(poll_start_reversal, 20);

   301   }

   302 }

   303 setTimeout(poll_start_reversal, 200);

   305 // And make our own event to dispatch to the body.

   306 started_test();

   308 var e = new TransitionEvent("transitionend",

   309                             {

   310                               bubbles: true,

   311                               cancelable: true,

   312                               propertyName: "some-unknown-prop",

   313                               elapsedTime: 0.5,

   314                               pseudoElement: "pseudo"

   315                             });

   316 is(e.bubbles, true);

   317 is(e.cancelable, true);

   318 is(e.propertyName, "some-unknown-prop");

   319 is(e.elapsedTime, "0.5");

   320 is(e.pseudoElement, "pseudo");

   321 is(e.isTrusted, false)

   323 document.body.dispatchEvent(e);

   325 </script>

   326 </pre>

   327 </body>

   328 </html>

The Tor Browser / file revision

layout/style/test/test_transitions_events.html@deefc01c0e14

layout/style/test/test_transitions_events.html