| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style type="text/css" media="screen"> | 4 <style type="text/css" media="screen"> |
| 5 body { | 5 body { |
| 6 margin: 0; | 6 margin: 0; |
| 7 } | 7 } |
| 8 | 8 |
| 9 .box { | 9 .box { |
| 10 position: relative; | 10 position: relative; |
| (...skipping 12 matching lines...) Expand all Loading... |
| 23 } | 23 } |
| 24 #indicator1 { | 24 #indicator1 { |
| 25 top: 0; | 25 top: 0; |
| 26 } | 26 } |
| 27 #indicator2 { | 27 #indicator2 { |
| 28 top: 100px; | 28 top: 100px; |
| 29 } | 29 } |
| 30 | 30 |
| 31 #box1 { | 31 #box1 { |
| 32 left: 200px; | 32 left: 200px; |
| 33 -webkit-animation: move-left 2s linear; | 33 animation: move-left 2s linear; |
| 34 } | 34 } |
| 35 | 35 |
| 36 #box2 { | 36 #box2 { |
| 37 transform: translateX(200px); | 37 transform: translateX(200px); |
| 38 -webkit-animation: move-transform 2s linear; | 38 animation: move-transform 2s linear; |
| 39 } | 39 } |
| 40 | 40 |
| 41 @-webkit-keyframes move-left { | 41 @keyframes move-left { |
| 42 0% { | 42 0% { |
| 43 opacity: 1; | 43 opacity: 1; |
| 44 } | 44 } |
| 45 25% { | 45 25% { |
| 46 opacity: 1; | 46 opacity: 1; |
| 47 } | 47 } |
| 48 50% { | 48 50% { |
| 49 left: 0; | 49 left: 0; |
| 50 opacity: 1; | 50 opacity: 1; |
| 51 } | 51 } |
| 52 100% { | 52 100% { |
| 53 left: 0; | 53 left: 0; |
| 54 opacity: 0; | 54 opacity: 0; |
| 55 } | 55 } |
| 56 } | 56 } |
| 57 | 57 |
| 58 @-webkit-keyframes move-transform { | 58 @keyframes move-transform { |
| 59 0% { | 59 0% { |
| 60 opacity: 1; | 60 opacity: 1; |
| 61 } | 61 } |
| 62 25% { | 62 25% { |
| 63 opacity: 1; | 63 opacity: 1; |
| 64 } | 64 } |
| 65 50% { | 65 50% { |
| 66 transform: translateX(0); | 66 transform: translateX(0); |
| 67 opacity: 1; | 67 opacity: 1; |
| 68 } | 68 } |
| 69 100% { | 69 100% { |
| 70 transform: translateX(0); | 70 transform: translateX(0); |
| 71 opacity: 0; | 71 opacity: 0; |
| 72 } | 72 } |
| 73 } | 73 } |
| 74 </style> | 74 </style> |
| 75 <script src="resources/animation-test-helpers.js" type="text/javascript"></scr
ipt> | 75 <script src="resources/animation-test-helpers.js" type="text/javascript"></scr
ipt> |
| 76 <script type="text/javascript"> | 76 <script type="text/javascript"> |
| 77 | 77 |
| 78 const expectedValues = [ | 78 const expectedValues = [ |
| 79 // [time, element-id, property, expected-value, tolerance] | 79 // [time, element-id, property, expected-value, tolerance] |
| 80 [0.5, "box1", "left", 100, 15], | 80 [0.5, "box1", "left", 100, 15], |
| 81 [0.5, "box2", "webkitTransform.4", 100, 15], | 81 [0.5, "box2", "transform.4", 100, 15], |
| 82 ]; | 82 ]; |
| 83 | 83 |
| 84 var doPixelTest = true; | 84 var doPixelTest = true; |
| 85 var disablePauseAPI = false; | 85 var disablePauseAPI = false; |
| 86 runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTe
st); | 86 runAnimationTest(expectedValues, null, undefined, disablePauseAPI, doPixelTe
st); |
| 87 </script> | 87 </script> |
| 88 </head> | 88 </head> |
| 89 <body> | 89 <body> |
| 90 <!-- In the pixel result, you should see two vertically adjacent green squares
. There should be no red. | 90 <!-- In the pixel result, you should see two vertically adjacent green squares
. There should be no red. |
| 91 Test is only reliable when run in DRT. --> | 91 Test is only reliable when run in DRT. --> |
| 92 <div class="indicator" id="indicator1"></div> | 92 <div class="indicator" id="indicator1"></div> |
| 93 <div class="indicator" id="indicator2"></div> | 93 <div class="indicator" id="indicator2"></div> |
| 94 | 94 |
| 95 <div class="box" id="box1"></div> | 95 <div class="box" id="box1"></div> |
| 96 <div class="box" id="box2"></div> | 96 <div class="box" id="box2"></div> |
| 97 | 97 |
| 98 <div id="result"></div> | 98 <div id="result"></div> |
| 99 </body> | 99 </body> |
| 100 </html> | 100 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2970883003:
Separate out animations tests with prefixing (Closed)
