[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / 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.testRunner)
26         testRunner.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>