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