layout/style/test/test_transitions_and_zoom.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=583219
   5 -->
   6 <head>
   7   <title>Test for Bug 583219</title>
   8   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  10   <style type="text/css">
  11
  12   #display {
  13     transition: margin-left 1s linear;
  14   }
  15
  16   </style>
  17 </head>
  18 <body>
  19 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=583219">Mozilla Bug 583219</a>
  20 <p id="display"></p>
  21 <pre id="test">
  22 <script type="application/javascript">
  23
  24 /** Test for Bug 583219 **/
  25
  26 var p = document.getElementById("display");
  27 var cs = getComputedStyle(p, "");
  28 cs.marginLeft;
  29
  30 p.addEventListener("transitionend", TransitionEndHandler);
  31 p.style.marginLeft = "100px";
  32 cs.marginLeft;
  33
  34 SpecialPowers.setFullZoom(window, 2.0)
  35
  36 SimpleTest.waitForExplicitFinish();
  37
  38 function TransitionEndHandler(event) {
  39   ok(true, "transition has completed");
  40   is(event.propertyName, "margin-left", "event.propertyName");
  41   is(cs.marginLeft, "100px", "value of margin-left");
  42   SpecialPowers.setFullZoom(window, 1.0)
  43   SimpleTest.finish();
  44 }
  45
  46 </script>
  47 </pre>
  48 </body>
  49 </html>