LayoutTests/animations/fill-mode-forwards.html

   1 <html>
   2 <head>
   3 <script>
   4     if (window.layoutTestController) {
   5         layoutTestController.dumpAsText();
   6         layoutTestController.waitUntilDone();
   7     }
   8
   9     var pulsingSquareAnimationEnded = false;
  10     var popAnimationCounter = 0;
  11
  12     function addPopAnimation() {
  13         var square = document.getElementById("square");
  14         square.className = "pop";
  15         popAnimationCounter++;
  16     }
  17
  18     function removePopAnimation() {
  19         var square = document.getElementById("square");
  20         square.className = "";
  21
  22         if (popAnimationCounter == 2) {
  23             var result = document.getElementById("result");
  24             if (pulsingSquareAnimationEnded)
  25                 result.innerHTML = "FAIL - pop animation should not be finished after pulse animation"
  26             else
  27                 result.innerHTML = "PASS - Test working";
  28
  29             if (window.layoutTestController)
  30                 layoutTestController.notifyDone();
  31         }
  32     }
  33
  34     function pulsingSquareEnded() {
  35         pulsingSquareAnimationEnded = true;
  36     }
  37 </script>
  38 <style>
  39     body {
  40         margin-left: 100px;
  41         margin-top: 50px;
  42     }
  43     #square {
  44         width: 100px;
  45         height: 100px;
  46         position: absolute;
  47         top: 100px;
  48         background-color: blue;
  49         opacity: 0;
  50     }
  51
  52     #pulsing-square {
  53         width: 100px;
  54         height: 100px;
  55         position: absolute;
  56         top: 100px;
  57         left: 350px;
  58         background-color: red;
  59         opacity: 0;
  60         -webkit-animation-name: pulse;
  61         -webkit-animation-duration: 0.4s;
  62         -webkit-animation-timing-function: ease-out;
  63         -webkit-animation-iteration-count: 3;
  64     }
  65
  66     @-webkit-keyframes pulse {
  67         0% { -webkit-transform: scale(0.05); opacity: 1; }
  68         30% { opacity: 1; }
  69         60% { -webkit-transform: scale(0.8); opacity: 0; }
  70         100% { -webkit-transform: scale(0.8); opacity: 0; }
  71     }
  72
  73     @-webkit-keyframes pop {
  74         0% { -webkit-transform: scale(0.05); opacity: 0; }
  75         33% { -webkit-transform: scale(1.08); opacity: 1; }
  76         66% { -webkit-transform: scale(0.92); opacity: 1; }
  77         100% { -webkit-transform: scale(1.0); opacity: 1; }
  78     }
  79
  80     .pop {
  81         -webkit-animation-name: pop;
  82         -webkit-animation-duration: 0.1s;
  83         -webkit-animation-timing-function: ease-in-out;
  84         -webkit-animation-fill-mode: forwards;
  85     }
  86 </style>
  87 </head>
  88
  89 <body>
  90   <div id="square" onwebkitanimationend="removePopAnimation();"></div>
  91   <div id="pulsing-square" onwebkitanimationiteration="setTimeout(addPopAnimation(), 50);"
  92        onwebkitanimationend="pulsingSquareEnded()"></div>
  93   <div id="result"></div>
  94 </body>
  95 </html>
  96