layout/reftests/transform-3d/animate-preserve3d-child.html

   1 <!DOCTYPE HTML>
   2 <html class="reftest-wait">
   3 <title>Testcase, bug 1176969</title>
   4 <style>
   5
   6 body { padding: 50px }
   7
   8 #grandparent { perspective: 400px }
   9
  10 @keyframes spin {
  11   0%, 85% { transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); }
  12   90%, 100% { transform: rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg); }
  13 }
  14
  15 #parent {
  16   background: blue;
  17   height: 200px; width: 200px;
  18   border: 1px solid black;
  19   transform-style: preserve-3d;
  20   /* use a -99.9s delay to start at 99.9% and then move to 0% */
  21   animation: spin 100s -99.9s linear 2;
  22 }
  23
  24 @keyframes noop {
  25   from, to { transform: translateZ(15px) }
  26 }
  27
  28 #child {
  29   height: 100px; width: 100px; margin: 50px;
  30   background: yellow;
  31   box-shadow: 3px 3px olive;
  32   animation: noop infinite 10s linear;
  33 }
  34
  35 </style>
  36
  37 <div id="grandparent">
  38   <div id="parent">
  39     <div id="child">
  40     </div>
  41   </div>
  42 </div>
  43
  44 <script>
  45
  46 document.getElementById("parent")
  47         .addEventListener("animationiteration", IterationListener);
  48
  49 function IterationListener(event) {
  50   setTimeout(RemoveReftestWait, 0);
  51 }
  52
  53 function RemoveReftestWait() {
  54   document.documentElement.classList.remove("reftest-wait");
  55 }
  56
  57 </script>