The Tor Browser: layout/style/test/test_transitions_events.html@deefc01c0e14 (annotated)

layout/style/test/test_transitions_events.html@deefc01c0e14 (annotated)

layout/style/test/test_transitions_events.html

Thu, 15 Jan 2015 21:03:48 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Thu, 15 Jan 2015 21:03:48 +0100
branch: TOR_BUG_9701
changeset 11: deefc01c0e14
permissions: -rw-r--r--

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.)

 <!DOCTYPE HTML>
 <html>
 <!--
 https://bugzilla.mozilla.org/show_bug.cgi?id=531585
 -->
 <head>
   <title>Test for Bug 531585 (transitionend event)</title>
   <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
 </head>
 <style type="text/css">
 .bar { margin: 10px; }
 #one { transition-duration: 500ms; transition-property: all; }
 #two { transition: margin-left 1s; }
 #three { transition: margin 0.5s 0.25s; }
 #four, #five, #six, #seven::before, #seven::after {
   transition: 500ms color;
   border-color: black; /* don't derive from color */
   -moz-column-rule-color: black; /* don't derive from color */
   -moz-text-decoration-color: black; /* don't derive from color */
 }
 #four {
   /* give the reversing transition a long duration; the reversing will
      still be quick */
   transition-duration: 30s;
   transition-timing-function: cubic-bezier(0, 1, 1, 0);
 }
 #seven::before, #seven::after {
   content: "x";
   transition-duration: 50ms;
 }
 #seven[foo]::before, #seven[foo]::after { color: lime; }
 </style>
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=531585">Mozilla Bug 531585</a>
 <p id="display">
 <span id="one" style="color:blue"></span>
 <span id="two"></span>
 <span id="three"></span>
 <span id="four" style="color: blue"></span>
 <span id="five" style="color: blue"></span>
 <span id="six" style="color: blue"></span>
 <span id="seven" style="color: blue"></span>
 </p>
 <pre id="test">
 <script type="application/javascript">
 /** Test for Bug 531585 (transitionend event) **/
 SimpleTest.waitForExplicitFinish();
 var gTestCount = 0;
 function started_test() { ++gTestCount; }
 function finished_test() { if (--gTestCount == 0) { SimpleTest.finish(); } }
 function $(id) { return document.getElementById(id); }
 function cs(id) { return getComputedStyle($(id), ""); }
 var got_one_root = false;
 var got_one_target = false;
 var got_one_target_bordertop = false;
 var got_one_target_borderright = false;
 var got_one_target_borderbottom = false;
 var got_one_target_borderleft = false;
 var got_one_target_columnrule = false;
 var got_one_target_textdecorationcolor = false;
 var got_two_target = false;
 var got_three_top = false;
 var got_three_right = false;
 var got_three_bottom = false;
 var got_three_left = false;
 var got_four_root = false;
 var got_body = false;
 var did_stops = false;
 var got_before = false;
 document.documentElement.addEventListener("transitionend",
   function(event) {
     if (event.target == $("one")) {
       ok(!got_one_root, "transitionend on one on root");
       is(event.propertyName, "border-right-color",
          "propertyName for transitionend on one");
       is(event.elapsedTime, 0.5,
          "elapsedTime for transitionend on one");
       is(cs("one").borderRightColor, "rgb(0, 255, 0)",
          "computed style for transitionend on one");
       got_one_root = true;
       finished_test();
     } else if (event.target == $("four")) {
       ok(!got_four_root, "transitionend on four on root");
       is(event.propertyName, "color",
          "propertyName for transitionend on four");
       // Reported time should (really?) be shortened by reversing.
       ok(event.elapsedTime < 30,
          "elapsedTime for transitionend on four");
       is(cs("four").color, "rgb(0, 0, 255)",
          "computed style for transitionend on four (end of reverse transition)");
       got_four_root = true;
       finished_test();
     } else if (event.target == document.body) {
       // A synthesized event.
       ok(!got_body, "transitionend on body on root");
       is(event.propertyName, "some-unknown-prop",
          "propertyName for transitionend on body");
       // Reported time should (really?) be shortened by reversing.
       is(event.elapsedTime, 0.5,
          "elapsedTime for transitionend on body");
       got_body = true;
       finished_test();
     } else if (event.target == $("seven")) {
       if (!got_before) {
         got_before = true;
         is(event.pseudoElement, "::before");
       } else {
         is(event.pseudoElement, "::after");
       }
       is(event.propertyName, "color");
       is(event.isTrusted, true);
     } else {
       if (!did_stops &&
           (event.target == $("five") || event.target == $("six"))) {
         todo(false,
              "timeout to stop transitions firing later than it should be");
         return;
       }
       ok(false,
          "unexpected event on " + event.target.nodeName +
          " element with id '" + event.target.id + "' " +
          "elapsedTime=" + event.elapsedTime +
          " propertyName='" + event.propertyName + "'");
     }
   }, false);
 $("one").addEventListener("transitionend",
   function(event) {
     switch (event.propertyName) {
       case "color":
         ok(!got_one_target,
            "transitionend on one on target (color)");
         got_one_target = true;
         event.stopPropagation();
         break;
       case "border-top-color":
         ok(!got_one_target_bordertop,
            "transitionend on one on target (border-top-color)");
         got_one_target_bordertop = true;
         event.stopPropagation();
         break;
       case "border-right-color":
         ok(!got_one_target_borderright,
            "transitionend on one on target (border-right-color)");
         got_one_target_borderright = true;
         // Let this event through to body
         break;
       case "border-bottom-color":
         ok(!got_one_target_borderbottom,
            "transitionend on one on target (border-bottom-color)");
         got_one_target_borderbottom = true;
         event.stopPropagation();
         break;
       case "border-left-color":
         ok(!got_one_target_borderleft,
            "transitionend on one on target (border-left-color)");
         got_one_target_borderleft = true;
         event.stopPropagation();
         break;
       case "-moz-column-rule-color":
         ok(!got_one_target_columnrule,
            "transitionend on one on target (-moz-column-rule-color)");
         got_one_target_columnrule = true;
         event.stopPropagation();
         break;
       case "-moz-text-decoration-color":
         ok(!got_one_target_textdecorationcolor,
            "transitionend on one on target (-moz-text-decoration-color)");
         got_one_target_textdecorationcolor = true;
         event.stopPropagation();
         break;
       default:
         ok(false, "unexpected property name " + event.propertyName +
                   " for transitionend on one on target");
     }
     is(event.elapsedTime, 0.5,
        "elapsedTime for transitionend on one");
     is(cs("one").getPropertyValue(event.propertyName), "rgb(0, 255, 0)",
        "computed style of " + event.propertyName + " for transitionend on one");
     finished_test();
   }, false);
 started_test();
 started_test();
 started_test();
 started_test();
 started_test();
 started_test();
 $("one").style.color = "lime";
 $("two").addEventListener("transitionend",
   function(event) {
     event.stopPropagation();
     ok(!got_two_target, "transitionend on two on target");
     is(event.propertyName, "margin-left",
        "propertyName for transitionend on two");
     is(event.elapsedTime, 1,
        "elapsedTime for transitionend on two");
     is(event.bubbles, true,
        "transitionend events should bubble");
     is(event.cancelable, false,
        "transitionend events should not be cancelable");
     is(cs("two").marginLeft, "10px",
        "computed style for transitionend on two");
     got_two_target = true;
     finished_test();
   }, false);
 started_test();
 $("two").className = "bar";
 $("three").addEventListener("transitionend",
   function(event) {
     event.stopPropagation();
     switch (event.propertyName) {
       case "margin-top":
         ok(!got_three_top, "should only get margin-top once");
         got_three_top = true;
         break;
       case "margin-right":
         ok(!got_three_right, "should only get margin-right once");
         got_three_right = true;
         break;
       case "margin-bottom":
         ok(!got_three_bottom, "should only get margin-bottom once");
         got_three_bottom = true;
         break;
       case "margin-left":
         ok(!got_three_left, "should only get margin-left once");
         got_three_left = true;
         break;
       default:
         ok(false, "unexpected property name " + event.propertyName +
                   " for transitionend on three");
     }
     is(event.elapsedTime, 0.5,
        "elapsedTime for transitionend on three");
     is(cs("three").getPropertyValue(event.propertyName), "10px",
        "computed style for transitionend on three");
     finished_test();
   }, true);
 started_test();
 started_test();
 started_test();
 started_test();
 $("three").className = "bar";
 // We reverse the transition on four, and we should only get an event
 // at the end of the second transition.
 started_test();
 $("four").style.color = "lime";
 // We cancel the transition on five by changing 'transition-property',
 // and should thus get no event.
 $("five").style.color = "lime";
 // We cancel the transition on six by changing 'transition-duration' and
 // then changing the value, so we should get no event.
 $("six").style.color = "lime";
 started_test();
 started_test();
 $("seven").setAttribute("foo", "bar");
 setTimeout(function() {
              if (cs("five") != "rgb(0, 255, 0)" &&
                  cs("six") != "rgb(0, 255, 0)") {
                // The transition hasn't finished already.
                did_stops = true;
              }
              $("five").style.transitionProperty = "margin-left";
              $("six").style.transitionDuration = "0s";
              $("six").style.transitionDelay = "0s";
              $("six").style.color = "blue";
            }, 100);
 function poll_start_reversal() {
   if (cs("four").color != "rgb(0, 0, 255)") {
     // The forward transition has started.
     $("four").style.color = "blue";
   } else {
     // The forward transition has not started yet.
     setTimeout(poll_start_reversal, 20);
   }
 }
 setTimeout(poll_start_reversal, 200);
 // And make our own event to dispatch to the body.
 started_test();
 var e = new TransitionEvent("transitionend",
                             {
                               bubbles: true,
                               cancelable: true,
                               propertyName: "some-unknown-prop",
                               elapsedTime: 0.5,
                               pseudoElement: "pseudo"
                             });
 is(e.bubbles, true);
 is(e.cancelable, true);
 is(e.propertyName, "some-unknown-prop");
 is(e.elapsedTime, "0.5");
 is(e.pseudoElement, "pseudo");
 is(e.isTrusted, false)
 document.body.dispatchEvent(e);
 </script>
 </pre>
 </body>
 </html>

The Tor Browser / annotate

layout/style/test/test_transitions_events.html@deefc01c0e14 (annotated)

layout/style/test/test_transitions_events.html