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     -webkit-animation-fill-mode: forwards, backwards;
  17 }
  18 @-webkit-keyframes a { }
  19 @-webkit-keyframes b { }
  20 @-webkit-keyframes c { }
  21 @-webkit-keyframes d { }
  22 @-webkit-keyframes e { }
  23 </style>
  24   <script type="text/javascript" charset="utf-8">
  25     if (window.layoutTestController)
  26         layoutTestController.dumpAsText();
  27
  28     const kExpectedResults = [
  29       { 'property': 'webkitTransitionDuration', 'value': '2s, 2s, 1s, 1s, 2s' },
  30       { 'property': 'webkitTransitionProperty', 'value': 'left, top, width, height, opacity' },
  31       { 'property': 'webkitTransitionDelay',    'value': '4s, 3s, 4s, 3s, 4s' },
  32       { 'property': 'webkitTransitionTimingFunction', 'value': 'linear, linear, linear, linear, linear' },
  33       { 'property': 'webkitAnimationName',      'value': 'a, b, c, d, e' },
  34       { 'property': 'webkitAnimationDuration',  'value': '10s, 20s, 10s, 20s, 10s' },
  35       { 'property': 'webkitAnimationDelay',     'value': '1s, 1s, 1s, 1s, 1s' },
  36       { 'property': 'webkitAnimationFillMode',  'value': 'forwards, backwards, forwards, backwards, forwards' },
  37     ];
  38
  39     function start()
  40     {
  41         var box = document.getElementById('box');
  42         var resultsString = "";
  43         var boxStyle = window.getComputedStyle(box);
  44
  45         kExpectedResults.forEach(function(curItem) {
  46           var computedValue = boxStyle[curItem.property];
  47           var expectedValue = curItem.value;
  48           if (computedValue == expectedValue)
  49             resultsString += "Testing " + curItem.property + ": PASS" + "<br>";
  50           else
  51             resultsString += "Testing " + curItem.property + " expected <code>" + curItem.value + "</code> got <code>" + computedValue + "</code>: FAIL" + "<br>";
  52         });
  53
  54         var results = document.getElementById('result');
  55         results.innerHTML = resultsString;
  56     }
  57
  58     window.addEventListener('load', start, false);
  59   </script>
  60 </head>
  61 <body>
  62 <div id="box">
  63 </div>
  64 <div id="result">
  65 </div>
  66 </body>
  67 </html>