layout/reftests/transform-3d/animate-backface-hidden.html

   1 <!DOCTYPE HTML>
   2 <html class="reftest-wait reftest-no-flush">
   3 <title>Testcase, bug 1186061</title>
   4 <style>
   5
   6 html { overflow: hidden }
   7
   8 body { padding: 50px }
   9
  10 @keyframes flip {
  11   0%, 85% { transform: rotateX(170deg); }
  12   90%, 100% { transform: rotateX(10deg); }
  13 }
  14
  15 #test {
  16   background: blue;
  17   height: 200px; width: 200px;
  18   backface-visibility: hidden;
  19   /* use a -99.9s delay to start at 99.9% and then move to 0% */
  20   animation: flip 100s -99.9s linear 2 paused;
  21 }
  22
  23 </style>
  24
  25 <div id="test">
  26 </div>
  27
  28 <script>
  29
  30 document.getElementById("test")
  31         .addEventListener("animationstart", StartListener);
  32
  33 function StartListener(event) {
  34   var test = document.getElementById("test");
  35   test.style.animationPlayState = 'running';
  36   test.addEventListener("animationiteration", IterationListener);
  37 }
  38
  39 function IterationListener(event) {
  40   setTimeout(RemoveReftestWait, 0);
  41 }
  42
  43 function RemoveReftestWait() {
  44   document.documentElement.classList.remove("reftest-wait");
  45 }
  46
  47 </script>