LayoutTests/animations/fill-unset-properties.html

   1 <html>
   2 <head>
   3 <title>Unfilled Properties Test</title>
   4 <style type="text/css" media="screen">
   5 #box {
   6     height: 50px;
   7     width: 200px;
   8     background-color: blue;
   9     -webkit-transition-duration: 1s,2s;
  10     -webkit-transition-property: opacity, left, opacity, top, width, opacity, height, opacity;
  11     -webkit-transition-delay: 3s,4s,5s;
  12     -webkit-transition-timing-function: linear;
  13     -webkit-animation-name: a, b, c, d, e;
  14     -webkit-animation-duration: 10s, 20s;
  15     -webkit-animation-delay: 1s;
  16 }
  17 @-webkit-keyframes a { }
  18 @-webkit-keyframes b { }
  19 @-webkit-keyframes c { }
  20 @-webkit-keyframes d { }
  21 @-webkit-keyframes e { }
  22 </style>
  23   <script type="text/javascript" charset="utf-8">
  24     if (window.layoutTestController)
  25         layoutTestController.dumpAsText();
  26
  27     const kExpectedResults = [
  28       { 'property': 'webkitTransitionDuration', 'value': '2s, 2s, 1s, 1s, 2s' },
  29       { 'property': 'webkitTransitionProperty', 'value': 'left, top, width, height, opacity' },
  30       { 'property': 'webkitTransitionDelay',    'value': '4s, 3s, 4s, 3s, 4s' },
  31       { 'property': 'webkitTransitionTimingFunction', 'value': 'cubic-bezier(0, 0, 1, 1), cubic-bezier(0, 0, 1, 1), cubic-bezier(0, 0, 1, 1), cubic-bezier(0, 0, 1, 1), cubic-bezier(0, 0, 1, 1)' },
  32       { 'property': 'webkitAnimationName',      'value': 'a, b, c, d, e' },
  33       { 'property': 'webkitAnimationDuration',  'value': '10s, 20s, 10s, 20s, 10s' },
  34       { 'property': 'webkitAnimationDelay',     'value': '1s, 1s, 1s, 1s, 1s' },
  35     ];
  36
  37     function start()
  38     {
  39         var box = document.getElementById('box');
  40         var resultsString = "";
  41         var boxStyle = window.getComputedStyle(box);
  42
  43         kExpectedResults.forEach(function(curItem) {
  44           var computedValue = boxStyle[curItem.property];
  45           var expectedValue = curItem.value;
  46           if (computedValue == expectedValue)
  47             resultsString += "Testing " + curItem.property + ": PASS" + "<br>";
  48           else
  49             resultsString += "Testing " + curItem.property + " expected <code>" + curItem.value + "</code> got <code>" + computedValue + "</code>: FAIL" + "<br>";
  50         });
  51
  52         var results = document.getElementById('result');
  53         results.innerHTML = resultsString;
  54     }
  55
  56     window.addEventListener('load', start, false);
  57   </script>
  58 </head>
  59 <body>
  60 <div id="box">
  61 </div>
  62 <div id="result">
  63 </div>
  64 </body>
  65 </html>