| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <title>Busy!</title> | 4 <title>Busy!</title> |
| 5 <style type="text/css" media="screen"> | 5 <style type="text/css" media="screen"> |
| 6 .app-startup #app-loading { | 6 .app-startup #app-loading { |
| 7 width: 300px; | 7 width: 300px; |
| 8 height: 100px; | 8 height: 100px; |
| 9 position: absolute; | 9 position: absolute; |
| 10 background: #00FF00; | 10 background: #00FF00; |
| 11 } | 11 } |
| 12 .app-startup #app-loading-progress { | 12 .app-startup #app-loading-progress { |
| 13 position: absolute; | 13 position: absolute; |
| 14 top: 30px; | 14 top: 30px; |
| 15 left: 100px; | 15 left: 100px; |
| 16 } | 16 } |
| 17 .progress-indicator { | 17 .progress-indicator { |
| 18 width: 94px; | 18 width: 94px; |
| 19 height: 30px; | 19 height: 30px; |
| 20 background: url(busy-indicator-no.png) no-repeat center center; | 20 background: url(busy-indicator-no.png) no-repeat center center; |
| 21 display: none; | 21 display: none; |
| 22 } | 22 } |
| 23 .progress-indicator > div { | 23 .progress-indicator > div { |
| 24 position: absolute; | 24 position: absolute; |
| 25 background: url(busy-indicator.png) no-repeat; | 25 background: url(busy-indicator.png) no-repeat; |
| 26 width: 18px; | 26 width: 18px; |
| 27 height: 30px; | 27 height: 30px; |
| 28 opacity: 0; | 28 opacity: 0; |
| 29 -webkit-animation-duration: 2.4s; | 29 animation-duration: 2.4s; |
| 30 } | 30 } |
| 31 .progress-indicator.visible .progress-indicator0 { | 31 .progress-indicator.visible .progress-indicator0 { |
| 32 left: 0px; | 32 left: 0px; |
| 33 -webkit-animation-delay: 0.4s; | 33 animation-delay: 0.4s; |
| 34 } | 34 } |
| 35 .progress-indicator.visible .progress-indicator1 { | 35 .progress-indicator.visible .progress-indicator1 { |
| 36 left: 19px; | 36 left: 19px; |
| 37 -webkit-animation-delay: 0.8s; | 37 animation-delay: 0.8s; |
| 38 } | 38 } |
| 39 .progress-indicator.visible .progress-indicator2 { | 39 .progress-indicator.visible .progress-indicator2 { |
| 40 left: 38px; | 40 left: 38px; |
| 41 -webkit-animation-delay: 1.2s; | 41 animation-delay: 1.2s; |
| 42 } | 42 } |
| 43 .progress-indicator.visible .progress-indicator3 { | 43 .progress-indicator.visible .progress-indicator3 { |
| 44 left: 57px; | 44 left: 57px; |
| 45 -webkit-animation-delay: 1.6s; | 45 animation-delay: 1.6s; |
| 46 } | 46 } |
| 47 .progress-indicator.visible .progress-indicator4 { | 47 .progress-indicator.visible .progress-indicator4 { |
| 48 left: 76px; | 48 left: 76px; |
| 49 -webkit-animation-delay: 2s; | 49 animation-delay: 2s; |
| 50 } | 50 } |
| 51 .progress-indicator.visible { display: block; } | 51 .progress-indicator.visible { display: block; } |
| 52 .progress-indicator.visible > div { -webkit-animation-play-state: r
unning; } | 52 .progress-indicator.visible > div { animation-play-state: running;
} |
| 53 | 53 |
| 54 @-webkit-keyframes spinner { | 54 @keyframes spinner { |
| 55 0% { | 55 0% { |
| 56 transform: scale(0.7); | 56 transform: scale(0.7); |
| 57 opacity: 1; | 57 opacity: 1; |
| 58 } | 58 } |
| 59 10% { | 59 10% { |
| 60 transform: scale(1); | 60 transform: scale(1); |
| 61 opacity: 1; | 61 opacity: 1; |
| 62 } | 62 } |
| 63 25% { | 63 25% { |
| 64 transform: scale(0.7); | 64 transform: scale(0.7); |
| 65 opacity: 1; | 65 opacity: 1; |
| 66 } | 66 } |
| 67 30% { | 67 30% { |
| 68 transform: scale(0.7); | 68 transform: scale(0.7); |
| 69 opacity: 0; | 69 opacity: 0; |
| 70 } | 70 } |
| 71 100% { | 71 100% { |
| 72 transform: scale(0.7); | 72 transform: scale(0.7); |
| 73 opacity: 0; | 73 opacity: 0; |
| 74 } | 74 } |
| 75 } | 75 } |
| 76 .progress-indicator.visible > div { | 76 .progress-indicator.visible > div { |
| 77 -webkit-animation-name: spinner; | 77 animation-name: spinner; |
| 78 } | 78 } |
| 79 </style> | 79 </style> |
| 80 <script type="text/javascript" charset="utf-8"> | 80 <script type="text/javascript" charset="utf-8"> |
| 81 function testEnded() | 81 function testEnded() |
| 82 { | 82 { |
| 83 if (window.testRunner) | 83 if (window.testRunner) |
| 84 testRunner.notifyDone(); | 84 testRunner.notifyDone(); |
| 85 } | 85 } |
| 86 | 86 |
| 87 function startTest() | 87 function startTest() |
| 88 { | 88 { |
| 89 if (window.testRunner) | 89 if (window.testRunner) |
| 90 testRunner.waitUntilDone(); | 90 testRunner.waitUntilDone(); |
| 91 | 91 |
| 92 document.getElementById('app-loading-progress').addEventListener( | 92 document.getElementById('app-loading-progress').addEventListener( |
| 93 'webkitAnimationEnd', testEnded, false); | 93 'animationend', testEnded, false); |
| 94 } | 94 } |
| 95 | 95 |
| 96 window.addEventListener('load', startTest, false); | 96 window.addEventListener('load', startTest, false); |
| 97 </script> | 97 </script> |
| 98 </head> | 98 </head> |
| 99 <body class="app-startup"> | 99 <body class="app-startup"> |
| 100 <div id="app-loading"> | 100 <div id="app-loading"> |
| 101 <div id="app-loading-progress" class="progress-indicator visible"> | 101 <div id="app-loading-progress" class="progress-indicator visible"> |
| 102 <div class="progress-indicator0"></div> | 102 <div class="progress-indicator0"></div> |
| 103 <div class="progress-indicator1"></div> | 103 <div class="progress-indicator1"></div> |
| 104 <div class="progress-indicator2"></div> | 104 <div class="progress-indicator2"></div> |
| 105 <div class="progress-indicator3"></div> | 105 <div class="progress-indicator3"></div> |
| 106 <div class="progress-indicator4"></div> | 106 <div class="progress-indicator4"></div> |
| 107 </div> | 107 </div> |
| 108 </div> | 108 </div> |
| 109 </body> | 109 </body> |
| 110 </html> | 110 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2518273002:
Remove unnecessary webkit prefixes from animation layout tests (Closed)
