| 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; |
| 11 left: 10px; | 11 left: 10px; |
| 12 top: 10px; | 12 top: 10px; |
| 13 height: 20px; | 13 height: 20px; |
| 14 width: 20px; | 14 width: 20px; |
| 15 background-color: blue; | 15 background-color: blue; |
| 16 -webkit-animation-duration: 2s; | 16 animation-duration: 2s; |
| 17 -webkit-animation-timing-function: linear; | 17 animation-timing-function: linear; |
| 18 } | 18 } |
| 19 | 19 |
| 20 #box1 { | 20 #box1 { |
| 21 -webkit-animation-name: anim1; | 21 animation-name: anim1; |
| 22 } | 22 } |
| 23 @-webkit-keyframes anim1 { | 23 @keyframes anim1 { |
| 24 from { left: 10px; } | 24 from { left: 10px; } |
| 25 40% { left: 30px; } | 25 40% { left: 30px; } |
| 26 60% { left: 10px; } | 26 60% { left: 10px; } |
| 27 to { left: 20px; } | 27 to { left: 20px; } |
| 28 } | 28 } |
| 29 | 29 |
| 30 #box2 { | 30 #box2 { |
| 31 -webkit-animation-name: anim2; | 31 animation-name: anim2; |
| 32 background-color: red; | 32 background-color: red; |
| 33 } | 33 } |
| 34 @-webkit-keyframes anim2 { | 34 @keyframes anim2 { |
| 35 40% { left: 30px; } | 35 40% { left: 30px; } |
| 36 60% { left: 10px; } | 36 60% { left: 10px; } |
| 37 to { left: 20px; } | 37 to { left: 20px; } |
| 38 } | 38 } |
| 39 | 39 |
| 40 #box3 { | 40 #box3 { |
| 41 left: 20px; | 41 left: 20px; |
| 42 -webkit-animation-name: anim3; | 42 animation-name: anim3; |
| 43 background-color: green; | 43 background-color: green; |
| 44 } | 44 } |
| 45 @-webkit-keyframes anim3 { | 45 @keyframes anim3 { |
| 46 from { left: 10px; } | 46 from { left: 10px; } |
| 47 40% { left: 30px; } | 47 40% { left: 30px; } |
| 48 60% { left: 10px; } | 48 60% { left: 10px; } |
| 49 } | 49 } |
| 50 | 50 |
| 51 #box4 { | 51 #box4 { |
| 52 -webkit-animation-name: anim4; | 52 animation-name: anim4; |
| 53 background-color: yellow; | 53 background-color: yellow; |
| 54 } | 54 } |
| 55 @-webkit-keyframes anim4 { | 55 @keyframes anim4 { |
| 56 40% { left: 30px; } | 56 40% { left: 30px; } |
| 57 60% { left: 20px; } | 57 60% { left: 20px; } |
| 58 } | 58 } |
| 59 | 59 |
| 60 #result { | 60 #result { |
| 61 margin-top: 20px; | 61 margin-top: 20px; |
| 62 } | 62 } |
| 63 </style> | 63 </style> |
| 64 <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> |
| 65 <script type="text/javascript" charset="utf-8"> | 65 <script type="text/javascript" charset="utf-8"> |
| (...skipping 30 matching lines...) Expand all Loading... |
| 96 <div class="box" id="box2"> | 96 <div class="box" id="box2"> |
| 97 </div> | 97 </div> |
| 98 <div class="box" id="box3"> | 98 <div class="box" id="box3"> |
| 99 </div> | 99 </div> |
| 100 <div class="box" id="box4"> | 100 <div class="box" id="box4"> |
| 101 </div> | 101 </div> |
| 102 <div id="result"> | 102 <div id="result"> |
| 103 </div> | 103 </div> |
| 104 </body> | 104 </body> |
| 105 </html> | 105 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2522123002:
CSS Animations: Remove unnecessary webkit prefixes from layout tests (Closed)
