src/third_party/WebKit/LayoutTests/animations/fill-mode-forwards2.html

   1 <html>
   2 <head>
   3 <script>
   4     if (window.testRunner) {
   5         testRunner.dumpAsText();
   6         testRunner.waitUntilDone();
   7     }
   8
   9     function animationEnded() {
  10         var result = document.getElementById("result");
  11         var square = document.getElementById('square');
  12         var opacity = document.defaultView.getComputedStyle(square, null).getPropertyValue('opacity');
  13
  14         if (opacity == 0.5)
  15             result.innerHTML = "PASS - Test working";
  16         else
  17             result.innerHTML = "FAIL - A opacity value must be 0.5";
  18
  19
  20         if(window.testRunner)
  21             testRunner.notifyDone();
  22     }
  23 </script>
  24 <style>
  25     body {
  26         margin-left: 100px;
  27         margin-top: 50px;
  28     }
  29     #square {
  30         width: 100px;
  31         height: 100px;
  32         position: absolute;
  33         top: 100px;
  34         background-color: blue;
  35         opacity: 0;
  36         -webkit-animation-name: pop;
  37         -webkit-animation-duration: 1s;
  38         -webkit-animation-fill-mode: forwards;
  39     }
  40     @-webkit-keyframes pop {
  41         0% { -webkit-transform: scale(0.05); opacity: 0; }
  42         33% { -webkit-transform: scale(1.00); opacity: 1; }
  43         66% { -webkit-transform: scale(1.66); opacity: 1; }
  44         100% { -webkit-transform: scale(0.95); opacity: 0.5; }
  45     }
  46 </style>
  47 </head>
  48
  49 <body>
  50     <div id="square" onwebkitanimationend="animationEnded();"></div>
  51     <div id="result"></div>
  52 </body>
  53 </html>
  54