| OLD | NEW |
|---|
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| 2 "http://www.w3.org/TR/html4/loose.dtd"> | 2 "http://www.w3.org/TR/html4/loose.dtd"> |
| 3 | 3 |
| 4 <html lang="en"> | 4 <html lang="en"> |
| 5 <head> | 5 <head> |
| 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| 7 <title>Test animation with missing from and to keyframes</title> | 7 <title>Test animation with missing from and to keyframes</title> |
| 8 <style type="text/css" media="screen"> | 8 <style type="text/css" media="screen"> |
| 9 .box { | 9 .box { |
| 10 position: relative; | 10 position: relative; |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 51 | 51 |
| 52 #box4 { | 52 #box4 { |
| 53 -webkit-animation-name: anim4; | 53 -webkit-animation-name: anim4; |
| 54 background-color: yellow; | 54 background-color: yellow; |
| 55 } | 55 } |
| 56 @-webkit-keyframes anim4 { | 56 @-webkit-keyframes anim4 { |
| 57 40% { -webkit-transform: translateX(30px); } | 57 40% { -webkit-transform: translateX(30px); } |
| 58 60% { -webkit-transform: translateX(20px); } | 58 60% { -webkit-transform: translateX(20px); } |
| 59 } | 59 } |
| 60 | 60 |
| 61 #box5 { | |
| 62 -webkit-animation-name: anim5; | |
| 63 background-color: orange; | |
| 64 } | |
| 65 @-webkit-keyframes anim5 { | |
| 66 } | |
| 67 | |
| 68 #result { | 61 #result { |
| 69 margin-top: 20px; | 62 margin-top: 20px; |
| 70 } | 63 } |
| 71 </style> | 64 </style> |
| 72 <script src="resources/animation-test-helpers.js" type="text/javascript" chars
et="utf-8"></script> | 65 <script src="resources/animation-test-helpers.js" type="text/javascript" chars
et="utf-8"></script> |
| 73 <script type="text/javascript" charset="utf-8"> | 66 <script type="text/javascript" charset="utf-8"> |
| 74 | 67 |
| 75 const expectedValues = [ | 68 const expectedValues = [ |
| 76 // [animation-name, time, element-id, property, expected-value, tolerance] | 69 // [animation-name, time, element-id, property, expected-value, tolerance] |
| 77 ["anim1", 0.4, "box1", "webkitTransform.4", 20, 2], | 70 ["anim1", 0.4, "box1", "webkitTransform.4", 20, 2], |
| 78 ["anim1", 1.0, "box1", "webkitTransform.4", 20, 2], | 71 ["anim1", 1.0, "box1", "webkitTransform.4", 20, 2], |
| 79 ["anim1", 1.6, "box1", "webkitTransform.4", 15, 2], | 72 ["anim1", 1.6, "box1", "webkitTransform.4", 15, 2], |
| 80 ["anim2", 0.4, "box2", "webkitTransform.4", 20, 2], | 73 ["anim2", 0.4, "box2", "webkitTransform.4", 20, 2], |
| 81 ["anim2", 1.0, "box2", "webkitTransform.4", 20, 2], | 74 ["anim2", 1.0, "box2", "webkitTransform.4", 20, 2], |
| 82 ["anim2", 1.6, "box2", "webkitTransform.4", 15, 2], | 75 ["anim2", 1.6, "box2", "webkitTransform.4", 15, 2], |
| 83 ["anim3", 0.4, "box3", "webkitTransform.4", 20, 2], | 76 ["anim3", 0.4, "box3", "webkitTransform.4", 20, 2], |
| 84 ["anim3", 1.0, "box3", "webkitTransform.4", 20, 2], | 77 ["anim3", 1.0, "box3", "webkitTransform.4", 20, 2], |
| 85 ["anim3", 1.6, "box3", "webkitTransform.4", 15, 2], | 78 ["anim3", 1.6, "box3", "webkitTransform.4", 15, 2], |
| 86 ["anim4", 0.4, "box4", "webkitTransform.4", 20, 2], | 79 ["anim4", 0.4, "box4", "webkitTransform.4", 20, 2], |
| 87 ["anim4", 1.0, "box4", "webkitTransform.4", 25, 2], | 80 ["anim4", 1.0, "box4", "webkitTransform.4", 25, 2], |
| 88 ["anim4", 1.6, "box4", "webkitTransform.4", 15, 2] | 81 ["anim4", 1.6, "box4", "webkitTransform.4", 15, 2] |
| 89 ]; | 82 ]; |
| 90 | 83 |
| 91 runAnimationTest(expectedValues, function() { | 84 runAnimationTest(expectedValues); |
| 92 if (window.testRunner) { | |
| 93 var box5Element = document.getElementById('box5'); | |
| 94 if (internals.pauseAnimationAtTimeOnElement("anim5", 0.1, box5Element)
) | |
| 95 result += "FAIL - box5 animation was running<br>"; | |
| 96 else | |
| 97 result += "PASS - box5 animation was not running<br>"; | |
| 98 } | |
| 99 }); | |
| 100 | 85 |
| 101 </script> | 86 </script> |
| 102 </head> | 87 </head> |
| 103 <body> | 88 <body> |
| 104 This test performs animations of the transform property on five boxes over 2 sec
onds. | 89 This test performs animations of the transform property on four boxes over 2 sec
onds. |
| 105 Box 1 has all keyframes. Box 2 has a missing "from" keyframe. | 90 Box 1 has all keyframes. Box 2 has a missing "from" keyframe. |
| 106 Box 3 has a missing "to" keyframe. | 91 Box 3 has a missing "to" keyframe. |
| 107 Box 4 has both "from" and "to" keyframes missing, but other keyframes which | 92 Box 4 has both "from" and "to" keyframes missing, but other keyframes which |
| 108 should trigger the generation of "from" and "to". Box 5 has no keyframes, and | 93 should trigger the generation of "from" and "to". Box 5 has no keyframes, and |
| 109 should not animate. | 94 should not animate. |
| 110 The test takes 3 snapshots each and expects each result to be within a specified
range. | 95 The test takes 3 snapshots each and expects each result to be within a specified
range. |
| 111 <div class="box" id="box1"> | 96 <div class="box" id="box1"> |
| 112 </div> | 97 </div> |
| 113 <div class="box" id="box2"> | 98 <div class="box" id="box2"> |
| 114 </div> | 99 </div> |
| 115 <div class="box" id="box3"> | 100 <div class="box" id="box3"> |
| 116 </div> | 101 </div> |
| 117 <div class="box" id="box4"> | 102 <div class="box" id="box4"> |
| 118 </div> | 103 </div> |
| 119 <div class="box" id="box5"> | |
| 120 </div> | |
| 121 <div id="result"> | 104 <div id="result"> |
| 122 </div> | 105 </div> |
| 123 </body> | 106 </body> |
| 124 </html> | 107 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 14556022:
Simplify animation testing API (Closed)
Base URL: svn://svn.chromium.org/blink/trunk