src/third_party/WebKit/LayoutTests/animations/wrong-keyframe-name.html

   1 <!DOCTYPE html>
   2 <style>
   3 #test1 {
   4     -webkit-animation-fill-mode: forwards;
   5     -webkit-animation-duration: 1s;
   6     -webkit-animation-name: green;
   7 }
   8 #test2 {
   9     -webkit-animation-fill-mode: forwards;
  10     -webkit-animation-duration: 1s;
  11 }
  12 #test3 {
  13     -webkit-animation-fill-mode: forwards;
  14     -webkit-animation-duration: 1s;
  15     -webkit-animation-name: notredorgreen;
  16 }
  17 @-webkit-keyframes green {
  18     from {
  19       background-color: white;
  20     }
  21     to {
  22       background-color: green;
  23     }
  24 }
  25 @-webkit-keyframes red {
  26     from {
  27       background-color: white;
  28     }
  29     to {
  30       background-color: red;
  31     }
  32 }
  33 </style>
  34 Tests that an animation does not run when it specifies an incorrect name.
  35 <div id="result">FAIL - nothing happened</div>
  36 <div id="test1"></div>
  37 <div id="test2"></div>
  38 <div id="test3"></div>
  39 <script>
  40 if (window.testRunner) {
  41     testRunner.dumpAsText();
  42     testRunner.waitUntilDone();
  43 }
  44 var pass = true;
  45 test1.addEventListener('webkitAnimationStart', function() {
  46     test2.style.webkitAnimationName = 'green';
  47 });
  48 test2.addEventListener('webkitAnimationStart', function() {
  49     result.innerText = pass ? 'PASS' : 'FAIL';
  50     if (window.testRunner)
  51         testRunner.notifyDone();
  52 });
  53 test3.addEventListener('webkitAnimationStart', function() {
  54     pass = false;
  55 });
  56 </script>