LayoutTests/transitions/started-while-suspended.html

   1 <title>Test that new transitions do not run while we are suspended</title>
   2 <style>
   3 #box {
   4     position: relative;
   5     left: 0px;
   6     height: 100px;
   7     width: 100px;
   8     background-color: blue;
   9     -webkit-transition: left 0.1s;
  10 }
  11 </style>
  12 <script>
  13 var box;
  14
  15 function suspend()
  16 {
  17     if (window.internals)
  18         internals.suspendAnimations(document);
  19 }
  20
  21 function resume()
  22 {
  23     if (window.internals)
  24         internals.resumeAnimations(document);
  25 }
  26
  27 function transitionEnded(event)
  28 {
  29     log("Transition ended on element with id: " + event.target.id);
  30 }
  31
  32 function suspendAndContinue()
  33 {
  34     log("*** Suspending Animations/Transitions");
  35     suspend();
  36     setTimeout(function() {
  37         if (window.internals)
  38             log("Transitions should be suspended: " + (window.internals.animationsAreSuspended(document) ? "PASS" : "FAIL"));
  39         log("*** Setting left property to 200px. We should NOT see transition events.")
  40         box.style.left = "200px";
  41         setTimeout(function() {
  42             endTest();
  43         }, 200);
  44     }, 100);
  45 }
  46
  47 function resumeAndContinue()
  48 {
  49 }
  50
  51 function endTest()
  52 {
  53     log("*** Resuming Animations/Transitions");
  54     resume();
  55     if (window.internals)
  56         log("Transitions should not be suspended: " + (window.internals.animationsAreSuspended(document) ? "FAIL" : "PASS"));
  57
  58     resume(); // Just in case.
  59     log("*** Test finished");
  60     if (window.testRunner)
  61         testRunner.notifyDone();
  62 }
  63
  64 function startTest()
  65 {
  66     log("*** Starting test.")
  67
  68     box = document.getElementById("box");
  69     document.addEventListener("webkitTransitionEnd", transitionEnded, false);
  70
  71     if (window.internals)
  72         log("Transitions should not be suspended: " + (window.internals.animationsAreSuspended(document) ? "FAIL" : "PASS"));
  73
  74     setTimeout(function() {
  75         log("*** Setting left property to 100px. We should see transition events.")
  76         box.style.left = "100px";
  77         setTimeout(function() {
  78             suspendAndContinue();
  79         }, 200);
  80     }, 50);
  81 }
  82
  83 function log(message)
  84 {
  85     var results = document.getElementById("results");
  86     results.innerHTML = results.innerHTML + message + "<br>";
  87 }
  88
  89 if (window.testRunner) {
  90     testRunner.waitUntilDone();
  91     testRunner.dumpAsText();
  92 }
  93
  94 window.addEventListener("load", startTest, false);
  95
  96 </script>
  97 <p>This test sets the left property on the box below. It will only have reproducible output when run in the test system</p>
  98 <div id="box"></div>
  99 <div id="results">
 100 </div>