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