| timothy_horton@apple.com | ad938aa | 2011-12-08 23:06:15 +0000 | [diff] [blame] | 1 | <html> |
| 2 | <head> |
| 3 | <style> |
| 4 | #box { |
| 5 | position: absolute; |
| 6 | left: 100px; |
| krit@webkit.org | 50fa702 | 2013-09-05 06:50:05 +0000 | [diff] [blame] | 7 | top: 200px; |
| timothy_horton@apple.com | ad938aa | 2011-12-08 23:06:15 +0000 | [diff] [blame] | 8 | height: 100px; |
| 9 | width: 100px; |
| 10 | background-color: red; |
| 11 | -webkit-animation: anim 1s linear infinite; |
| 12 | } |
| 13 | #boxShorthand { |
| 14 | position: absolute; |
| 15 | left: 100px; |
| krit@webkit.org | 50fa702 | 2013-09-05 06:50:05 +0000 | [diff] [blame] | 16 | top: 300px; |
| timothy_horton@apple.com | ad938aa | 2011-12-08 23:06:15 +0000 | [diff] [blame] | 17 | height: 100px; |
| 18 | width: 100px; |
| 19 | background-color: red; |
| 20 | -webkit-animation: animShorthand 1s linear infinite; |
| 21 | } |
| 22 | #boxStatic { |
| 23 | position: absolute; |
| 24 | left: 100px; |
| krit@webkit.org | 50fa702 | 2013-09-05 06:50:05 +0000 | [diff] [blame] | 25 | top: 400px; |
| timothy_horton@apple.com | ad938aa | 2011-12-08 23:06:15 +0000 | [diff] [blame] | 26 | height: 100px; |
| 27 | width: 100px; |
| 28 | background-color: red; |
| 29 | background-image: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 50%); |
| 30 | } |
| krit@webkit.org | 50fa702 | 2013-09-05 06:50:05 +0000 | [diff] [blame] | 31 | #boxAnim1 { |
| 32 | position: absolute; |
| 33 | left: 200px; |
| 34 | top: 200px; |
| 35 | height: 100px; |
| 36 | width: 100px; |
| 37 | background-color: red; |
| 38 | -webkit-animation: animCross1 1s linear infinite; |
| 39 | } |
| 40 | #boxAnim2 { |
| 41 | position: absolute; |
| 42 | left: 200px; |
| 43 | top: 300px; |
| 44 | height: 100px; |
| 45 | width: 100px; |
| 46 | background-color: red; |
| 47 | -webkit-animation: animCross2 1s linear infinite; |
| 48 | } |
| 49 | #boxAnim3 { |
| 50 | position: absolute; |
| 51 | left: 200px; |
| 52 | top: 400px; |
| 53 | height: 100px; |
| 54 | width: 100px; |
| 55 | background-color: red; |
| 56 | -webkit-animation: animCross3 1s linear infinite; |
| 57 | } |
| timothy_horton@apple.com | ad938aa | 2011-12-08 23:06:15 +0000 | [diff] [blame] | 58 | @-webkit-keyframes anim { |
| 59 | from { background-image: url(resources/blue-100.png); } |
| 60 | to { background-image: url(resources/green-100.png); } |
| 61 | } |
| 62 | @-webkit-keyframes animShorthand { |
| 63 | from { background: url(resources/blue-100.png); } |
| 64 | to { background: url(resources/green-100.png); } |
| 65 | } |
| krit@webkit.org | 50fa702 | 2013-09-05 06:50:05 +0000 | [diff] [blame] | 66 | @-webkit-keyframes animCross1 { |
| 67 | from { background-image: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 20%); } |
| 68 | to { background-image: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 0.8); } |
| 69 | } |
| 70 | @-webkit-keyframes animCross2 { |
| 71 | /* Image inputs are not identical - no animation.*/ |
| 72 | from { background-image: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 20%); } |
| 73 | to { background-image: -webkit-cross-fade(url(resources/green-100.png), url(resources/blue-100.png), 50%); } |
| 74 | } |
| 75 | @-webkit-keyframes animCross3 { |
| 76 | /* Direct image inputs are not identical - no animation.*/ |
| 77 | from { background-image: -webkit-cross-fade(-webkit-filter(url(resources/blue-100.png), contrast(0.5)), url(resources/green-100.png), 20%); } |
| 78 | to { background-image: -webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 50%); } |
| 79 | } |
| timothy_horton@apple.com | ad938aa | 2011-12-08 23:06:15 +0000 | [diff] [blame] | 80 | </style> |
| 81 | <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script> |
| 82 | <script type="text/javascript" charset="utf-8"> |
| 83 | const expectedValues = [ |
| 84 | // [animation-name, time, element-id, property, expected-value, tolerance] |
| krit@webkit.org | ebae578 | 2013-08-30 19:29:03 +0000 | [diff] [blame] | 85 | ["anim", 2.5, "box", "backgroundImage", "-webkit-cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05], |
| 86 | ["anim", 2.5, ["box", "static:boxStatic"], "backgroundImage", "-webkit-cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05], |
| 87 | ["animShorthand", 2.5, ["boxShorthand", "static:boxStatic"], "backgroundImage", "-webkit-cross-fade(url(blue-100.png), url(green-100.png), 50%)", 0.05], |
| krit@webkit.org | 50fa702 | 2013-09-05 06:50:05 +0000 | [diff] [blame] | 88 | ["animCross1", 2.5, "boxAnim1", "backgroundImage", "-webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 0.5)", 0.05], |
| 89 | ["animCross2", 2.5, "boxAnim2", "backgroundImage", "-webkit-cross-fade(url(resources/green-100.png), url(resources/blue-100.png), 50%)", 0], |
| 90 | ["animCross3", 2.5, "boxAnim3", "backgroundImage", "-webkit-cross-fade(url(resources/blue-100.png), url(resources/green-100.png), 50%)", 0], |
| timothy_horton@apple.com | ad938aa | 2011-12-08 23:06:15 +0000 | [diff] [blame] | 91 | ]; |
| 92 | |
| 93 | var doPixelTest = true; |
| 94 | var disablePauseAPI = false; |
| 95 | runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTest); |
| 96 | </script> |
| 97 | </head> |
| 98 | <body> |
| 99 | <div id="box"></div> |
| 100 | <div id="boxStatic"></div> |
| 101 | <div id="boxShorthand"></div> |
| krit@webkit.org | 50fa702 | 2013-09-05 06:50:05 +0000 | [diff] [blame] | 102 | <div id="boxAnim1"></div> |
| 103 | <div id="boxAnim2"></div> |
| 104 | <div id="boxAnim3"></div> |
| timothy_horton@apple.com | ad938aa | 2011-12-08 23:06:15 +0000 | [diff] [blame] | 105 | <div id="result"></div> |
| 106 | </body> |
| 107 | </html> |
