LayoutTests/animations/animation-shorthand-overriding.html

   1 <html>
   2 <head>
   3 <title>Test animation shorthand property</title>
   4 <style type="text/css">
   5 @-webkit-keyframes circle {
   6     from { -webkit-transform:rotate(0deg); }
   7     to { -webkit-transform:rotate(360deg); }
   8 }
   9 @-webkit-keyframes inner-circle {
  10     from { -webkit-transform:rotate(0deg); }
  11     to { -webkit-transform:rotate(-360deg); }
  12 }
  13
  14 div > div {
  15     -webkit-animation: 5s linear normal none;
  16 }
  17
  18 div {
  19     margin: 20px auto 0;
  20 }
  21
  22 div > div {
  23     width:100px;
  24     height:100px;
  25     background-color:black;
  26     font-size:100px;
  27     line-height:1;
  28     -webkit-animation-name: inner-circle;
  29 }
  30 </style>
  31   <script type="text/javascript" charset="utf-8">
  32     if (window.layoutTestController)
  33         layoutTestController.dumpAsText();
  34
  35     const kProperties = [
  36       "webkitAnimationName",
  37       "webkitAnimationDuration",
  38       "webkitAnimationTimingFunction",
  39       "webkitAnimationDelay",
  40       "webkitAnimationIterationCount",
  41       "webkitAnimationDirection",
  42       "webkitAnimationFillMode"
  43     ];
  44     const kExpectedResult =  { id: 'a',  values: [ "inner-circle", "5s", "linear", "0s", "1", "normal", "none" ] };
  45
  46     function start()
  47     {
  48       var resultsString = " ";
  49       var el = document.getElementById(kExpectedResult.id);
  50       var elStyle = window.getComputedStyle(el);
  51
  52       for (var i=0; i < kProperties.length; i++) {
  53           var computedValue = elStyle[kProperties[i]];
  54           var expectedValue = kExpectedResult.values[i];
  55           if (computedValue == expectedValue)
  56             resultsString += "Testing " + kProperties[i] + " on " + kExpectedResult.id + ": PASS" + "<br>";
  57           else
  58             resultsString += "Testing " + kProperties[i] + " on " + kExpectedResult.id + " expected <code>" + expectedValue + "</code> got <code>" + computedValue + "</code>: FAIL" + "<br>";
  59       }
  60
  61       var results = document.getElementById('result');
  62       results.innerHTML = resultsString;
  63     }
  64
  65     window.addEventListener('load', start, false);
  66   </script>
  67 </head>
  68 <body>
  69 <div><div id="a"></div></div>
  70 <div id="result"/>
  71 </body>
  72 </html>