LayoutTests/animations/computed-style.html

   1 <html>
   2 <head>
   3 <style type="text/css" media="screen">
   4     #test1 {
   5         width: 20px;
   6         height: 20px;
   7         background-color: blue;
   8         position: relative;
   9         -webkit-animation-name: anim1;
  10         -webkit-animation-duration: 10s;
  11         -webkit-animation-fill-mode: backwards;
  12         -webkit-animation-iteration-count: 10;
  13         -webkit-animation-timing-function: linear;
  14         -webkit-animation-direction: normal;
  15     }
  16     #test2 {
  17         width: 20px;
  18         height: 20px;
  19         background-color: blue;
  20         position: relative;
  21         -webkit-animation-name: anim2, anim3;
  22         -webkit-animation-duration: 5s, 2500ms;
  23         -webkit-animation-fill-mode: forwards, both;
  24         -webkit-animation-iteration-count: 10, infinite;
  25         -webkit-animation-timing-function: linear, ease-in-out;
  26         -webkit-animation-direction: normal, alternate;
  27     }
  28     #test3 {
  29         width: 20px;
  30         height: 20px;
  31         background-color: blue;
  32         position: relative;
  33         -webkit-animation-name: anim1, anim2, anim3;
  34         -webkit-animation-duration: 5s;
  35         -webkit-animation-timing-function: step-start, step-end, steps(5, end);
  36     }
  37     @-webkit-keyframes anim1 {
  38         from { left: 10px; }
  39         to { left: 20px; }
  40     }
  41     @-webkit-keyframes anim2 {
  42         from { width: 20px; }
  43         to { width: 25px; }
  44     }
  45     @-webkit-keyframes anim3 {
  46         from { left: 10px; }
  47         to { left: 20px; }
  48     }
  49 </style>
  50 <script src="../fast/js/resources/js-test-pre.js"></script>
  51 </head>
  52 <body>
  53 <p id="test1"></p>
  54 <p id="test2"></p>
  55 <p id="test3"></p>
  56 <p id="description"></p>
  57 <div id="console"></div>
  58 <script>
  59
  60 description("This tests computed style values from animation properties.");
  61
  62 var test1 = document.getElementById("test1");
  63 var test2 = document.getElementById("test2");
  64
  65 var test1Style = window.getComputedStyle(test1);
  66 var test2Style = window.getComputedStyle(test2);
  67 var test3Style = window.getComputedStyle(test3);
  68
  69 shouldBe("test1Style.webkitAnimationName", "'anim1'");
  70 shouldBe("test2Style.webkitAnimationName", "'anim2, anim3'");
  71 shouldBe("test3Style.webkitAnimationName", "'anim1, anim2, anim3'");
  72
  73 shouldBe("test1Style.webkitAnimationDuration", "'10s'");
  74 shouldBe("test2Style.webkitAnimationDuration", "'5s, 2.5s'");
  75
  76 shouldBe("test1Style.webkitAnimationFillMode", "'backwards'");
  77 shouldBe("test2Style.webkitAnimationFillMode", "'forwards, both'");
  78
  79 shouldBe("test1Style.webkitAnimationIterationCount", "'10'");
  80 shouldBe("test2Style.webkitAnimationIterationCount", "'10, infinite'");
  81
  82 shouldBe("test1Style.webkitAnimationTimingFunction", "'linear'");
  83 shouldBe("test2Style.webkitAnimationTimingFunction", "'linear, cubic-bezier(0.42, 0, 0.58, 1)'");
  84 shouldBe("test3Style.webkitAnimationTimingFunction", "'steps(1, start), steps(1, end), steps(5, end)'");
  85
  86 shouldBe("test1Style.webkitAnimationDirection", "'normal'");
  87 shouldBe("test2Style.webkitAnimationDirection", "'normal, alternate'");
  88
  89 debug("");
  90
  91 </script>
  92 <script src="../fast/js/resources/js-test-post.js"></script>
  93 </body>
  94 </html>