layout/style/test/test_transitions_dynamic_changes.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=525530
   5 -->
   6 <head>
   7   <title>Test for Bug 525530</title>
   8   <script 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=525530">Mozilla Bug 525530</a>
  13 <p id="display" style="text-indent: 100px"></p>
  14 <pre id="test">
  15 <script type="application/javascript">
  16
  17 /** Test for Bug 525530 **/
  18
  19 var p = document.getElementById("display");
  20 var cs = getComputedStyle(p, "");
  21 var utils = SpecialPowers.DOMWindowUtils;
  22
  23 p.style.transitionProperty = "all";
  24 p.style.transitionDuration = "4s";
  25 p.style.transitionDelay = "-2s";
  26 p.style.transitionTimingFunction = "linear";
  27
  28 is(cs.textIndent, "100px", "initial value");
  29
  30 p.style.textIndent = "0";
  31 is(cs.textIndent, "50px", "transition is halfway");
  32 p.style.transitionDuration = "0s";
  33 is(cs.textIndent, "50px", "changing duration doesn't change transitioning");
  34 p.style.transitionDelay = "0s";
  35 is(cs.textIndent, "50px", "changing delay doesn't change transitioning");
  36 p.style.transitionProperty = "text-indent";
  37 is(cs.textIndent, "50px",
  38    "irrelevant change to transition property doesn't change transitioning");
  39 p.style.transitionProperty = "letter-spacing";
  40 is(cs.textIndent, "0px",
  41    "relevant change to transition property does change transitioning");
  42
  43 /** Test for Bug 522643 */
  44 p.style.transitionDuration = "4s";
  45 p.style.transitionDelay = "-2s";
  46 p.style.transitionProperty = "text-indent";
  47 p.style.textIndent = "100px";
  48 is(cs.textIndent, "50px", "transition is halfway");
  49 p.style.transitionDuration = "0s";
  50 p.style.transitionDelay = "0s";
  51 is(cs.textIndent, "50px",
  52    "changing duration and delay doesn't change transitioning");
  53 p.style.textIndent = "0px";
  54 is(cs.textIndent, "0px",
  55    "changing property after changing duration and delay stops transition");
  56
  57 /** Test for Bug 1133375 */
  58 p.style.transitionDuration = "1s";
  59 p.style.transitionDelay = "-1s";
  60 p.style.transitionProperty = "text-indent";
  61 var endCount = 0;
  62 function incrementEndCount(event) { ++endCount; }
  63 p.addEventListener("transitionend", incrementEndCount);
  64 utils.advanceTimeAndRefresh(0);
  65 p.style.textIndent = "100px";
  66 is(cs.textIndent, "100px", "value should now be 100px");
  67 utils.advanceTimeAndRefresh(10);
  68 is(endCount, 0, "should not have started transition when combined duration less than or equal to 0");
  69 p.style.transitionDelay = "-2s";
  70 p.style.textIndent = "0";
  71 is(cs.textIndent, "0px", "value should now be 0px");
  72 utils.advanceTimeAndRefresh(10);
  73 is(endCount, 0, "should not have started transition when combined duration less than or equal to 0");
  74 utils.restoreNormalRefresh();
  75 p.style.textIndent = "";
  76
  77 /** Test for bug 1144410 */
  78 utils.advanceTimeAndRefresh(0);
  79 p.style.transition = "opacity 200ms linear";
  80 p.style.opacity = "1";
  81 is(cs.opacity, "1", "bug 1144410 test - initial opacity");
  82 p.style.opacity = "0";
  83 is(cs.opacity, "1", "bug 1144410 test - opacity after starting transition");
  84 utils.advanceTimeAndRefresh(100);
  85 is(cs.opacity, "0.5", "bug 1144410 test - opacity during transition");
  86 utils.advanceTimeAndRefresh(200);
  87 is(cs.opacity, "0", "bug 1144410 test - opacity after transition");
  88 document.body.style.display = "none";
  89 is(cs.opacity, "0", "bug 1144410 test - opacity after display:none");
  90 p.style.opacity = "1";
  91 document.body.style.display = "";
  92 is(cs.opacity, "1", "bug 1144410 test - second transition, initial opacity");
  93 p.style.opacity = "0";
  94 is(cs.opacity, "1", "bug 1144410 test - opacity after starting second transition");
  95 utils.advanceTimeAndRefresh(100);
  96 is(cs.opacity, "0.5", "bug 1144410 test - opacity during second transition");
  97 utils.advanceTimeAndRefresh(200);
  98 is(cs.opacity, "0", "bug 1144410 test - opacity after second transition");
  99 utils.restoreNormalRefresh();
 100 p.style.opacity = "";
 101 p.style.transition = "";
 102
 103 </script>
 104 </pre>
 105 </body>
 106 </html>