The Tor Browser: layout/style/test/test_transitions_computed

     1 <!DOCTYPE HTML>

     2 <html>

     3 <!--

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

     5 -->

     6 <head>

     7   <title>Test for Bug 435441</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 <body>

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

    13 <div id="content" style="display: none"></div>

    14 <pre id="test">

    15 <script type="application/javascript">

    17 /** Test for Bug 435441 **/

    20 /*

    21  * test that when transition properties are inherited, the length of the

    22  * computed value stays the same

    23  */

    25 var p = document.getElementById("content");

    26 var c = document.createElement("div");

    27 p.appendChild(c);

    28 var cs = getComputedStyle(c, "");

    30 p.style.transitionProperty = "margin-left, margin-right";

    31 c.style.transitionProperty = "inherit";

    32 is(cs.transitionProperty, "margin-left, margin-right",

    33    "computed style match with no other properties");

    34 c.style.transitionDuration = "5s";

    35 is(cs.transitionProperty, "margin-left, margin-right",

    36    "computed style match with shorter property");

    37 is(cs.transitionDuration, "5s",

    38    "shorter property not extended");

    39 c.style.transitionDuration = "5s, 4s, 3s, 2000ms";

    40 is(cs.transitionProperty, "margin-left, margin-right",

    41    "computed style match with longer property");

    42 is(cs.transitionDuration, "5s, 4s, 3s, 2s",

    43    "longer property computed correctly");

    44 p.style.transitionProperty = "";

    45 c.style.transitionProperty = "";

    46 c.style.transitionDuration = "";

    48 // and repeat the above set of tests with property and duration swapped

    49 p.style.transitionDuration = "5s, 4s";

    50 c.style.transitionDuration = "inherit";

    51 is(cs.transitionDuration, "5s, 4s",

    52    "computed style match with no other properties");

    53 c.style.transitionProperty = "margin-left";

    54 is(cs.transitionDuration, "5s, 4s",

    55    "computed style match with shorter property");

    56 is(cs.transitionProperty, "margin-left",

    57    "shorter property not extended");

    58 c.style.transitionProperty =

    59   "margin-left, margin-right, margin-top, margin-bottom";

    60 is(cs.transitionDuration, "5s, 4s",

    61    "computed style match with longer property");

    62 is(cs.transitionProperty,

    63    "margin-left, margin-right, margin-top, margin-bottom",

    64    "longer property computed correctly");

    65 p.style.transitionDuration = "";

    66 c.style.transitionDuration = "";

    67 c.style.transitionProperty = "";

    69 // And do the same pair of tests for animations:

    71 p.style.animationName = "bounce, roll";

    72 c.style.animationName = "inherit";

    73 is(cs.animationName, "bounce, roll",

    74    "computed style match with no other properties");

    75 c.style.animationDuration = "5s";

    76 is(cs.animationName, "bounce, roll",

    77    "computed style match with shorter property");

    78 is(cs.animationDuration, "5s",

    79    "shorter property not extended");

    80 c.style.animationDuration = "5s, 4s, 3s, 2000ms";

    81 is(cs.animationName, "bounce, roll",

    82    "computed style match with longer property");

    83 is(cs.animationDuration, "5s, 4s, 3s, 2s",

    84    "longer property computed correctly");

    85 p.style.animationName = "";

    86 c.style.animationName = "";

    87 c.style.animationDuration = "";

    89 // and repeat the above set of tests with name and duration swapped

    90 p.style.animationDuration = "5s, 4s";

    91 c.style.animationDuration = "inherit";

    92 is(cs.animationDuration, "5s, 4s",

    93    "computed style match with no other properties");

    94 c.style.animationName = "bounce";

    95 is(cs.animationDuration, "5s, 4s",

    96    "computed style match with shorter property");

    97 is(cs.animationName, "bounce",

    98    "shorter property not extended");

    99 c.style.animationName =

   100   "bounce, roll, wiggle, spin";

   101 is(cs.animationDuration, "5s, 4s",

   102    "computed style match with longer property");

   103 is(cs.animationName,

   104    "bounce, roll, wiggle, spin",

   105    "longer property computed correctly");

   106 p.style.animationDuration = "";

   107 c.style.animationDuration = "";

   108 c.style.animationName = "";

   110 </script>

   111 </pre>

   112 </body>

   113 </html>

The Tor Browser / file revision