LayoutTests/animations/animation-shorthand.html

   1 <html>
   2 <head>
   3 <title>Test animation shorthand property</title>
   4 <style type="text/css" media="screen">
   5 .box {
   6   height: 10px;
   7   width: 10px;
   8   background-color: blue;
   9 }
  10 #a {
  11 }
  12 #b {
  13   -webkit-animation: none;
  14 }
  15 #c {
  16   -webkit-animation: anim1 10s;
  17 }
  18 #d {
  19   -webkit-animation: anim1 10s linear;
  20 }
  21 #e {
  22   -webkit-animation: anim1 10s linear 5s;
  23 }
  24 #f {
  25   -webkit-animation: anim1 10s linear 5s 3;
  26 }
  27 #g {
  28   -webkit-animation: anim1 10s linear 5s infinite alternate;
  29 }
  30 #h {
  31   -webkit-animation: anim1 10s linear 5s infinite alternate forwards;
  32 }
  33 #i {
  34   -webkit-animation: anim1 10s linear normal none;
  35 }
  36 #j {
  37   -webkit-animation: anim1 10s linear infinite backwards, anim2 3s none, anim3 5s both;
  38 }
  39
  40 @-webkit-keyframes anim1 { }
  41 @-webkit-keyframes anim2 { }
  42 </style>
  43   <script type="text/javascript" charset="utf-8">
  44     if (window.layoutTestController)
  45         layoutTestController.dumpAsText();
  46
  47     const kProperties = [
  48       "webkitAnimationName",
  49       "webkitAnimationDuration",
  50       "webkitAnimationTimingFunction",
  51       "webkitAnimationDelay",
  52       "webkitAnimationIterationCount",
  53       "webkitAnimationDirection",
  54       "webkitAnimationFillMode"
  55     ];
  56     const kExpectedResults = [
  57       { id: 'a',  values: [ "none", "0s", "cubic-bezier(0.25, 0.1, 0.25, 1)", "0s", "1", "normal", "none" ] },
  58       { id: 'b',  values: [ "none", "0s", "cubic-bezier(0.25, 0.1, 0.25, 1)", "0s", "1", "normal", "none" ] },
  59       { id: 'c',  values: [ "anim1", "10s", "cubic-bezier(0.25, 0.1, 0.25, 1)", "0s", "1", "normal", "none" ] },
  60       { id: 'd',  values: [ "anim1", "10s", "linear", "0s", "1", "normal", "none" ] },
  61       { id: 'e',  values: [ "anim1", "10s", "linear", "5s", "1", "normal", "none" ] },
  62       { id: 'f',  values: [ "anim1", "10s", "linear", "5s", "3", "normal", "none" ] },
  63       { id: 'g',  values: [ "anim1", "10s", "linear", "5s", "infinite", "alternate", "none" ] },
  64       { id: 'h',  values: [ "anim1", "10s", "linear", "5s", "infinite", "alternate", "forwards" ] },
  65       { id: 'i',  values: [ "anim1", "10s", "linear", "0s", "1", "normal", "none" ] },
  66       { id: 'j',  values: [ "anim1, anim2, anim3", "10s, 3s, 5s", "linear, cubic-bezier(0.25, 0.1, 0.25, 1), cubic-bezier(0.25, 0.1, 0.25, 1)", "0s, 0s, 0s", "infinite, 1, 1", "normal, normal, normal", "backwards, none, both" ] }
  67     ];
  68
  69     function start()
  70     {
  71       var resultsString = "";
  72       kExpectedResults.forEach(function(curItem) {
  73         var el = document.getElementById(curItem.id);
  74         var elStyle = window.getComputedStyle(el);
  75
  76         for (var i=0; i < kProperties.length; i++) {
  77           var computedValue = elStyle[kProperties[i]];
  78           var expectedValue = curItem.values[i];
  79           if (computedValue == expectedValue)
  80             resultsString += "Testing " + kProperties[i] + " on " + curItem.id + ": PASS" + "<br>";
  81           else
  82             resultsString += "Testing " + kProperties[i] + " on " + curItem.id + " expected <code>" + expectedValue + "</code> got <code>" + computedValue + "</code>: FAIL" + "<br>";
  83
  84         }
  85       });
  86
  87       var results = document.getElementById('result');
  88       results.innerHTML = resultsString;
  89     }
  90
  91     window.addEventListener('load', start, false);
  92   </script>
  93 </head>
  94 <body>
  95 <div id="a" class="box"></div>
  96 <div id="b" class="box"></div>
  97 <div id="c" class="box"></div>
  98 <div id="d" class="box"></div>
  99 <div id="e" class="box"></div>
 100 <div id="f" class="box"></div>
 101 <div id="g" class="box"></div>
 102 <div id="h" class="box"></div>
 103 <div id="i" class="box"></div>
 104 <div id="j" class="box"></div>
 105 <div id="result">
 106 </div>
 107 </body>
 108 </html>