LayoutTests/animations/animation-shorthand-removed.html

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