| OLD | NEW |
|---|
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <title>Test of -webkit-animation-play-state with first-letter pseudo element</
title> | |
| 4 <style type="text/css" media="screen"> | |
| 5 #box1 { | |
| 6 position: absolute; | |
| 7 height: 100px; | |
| 8 width: 100px; | |
| 9 background-color: blue; | |
| 10 color: red; | |
| 11 -webkit-animation: move1 0.2s linear; | |
| 12 } | |
| 13 #box1::first-letter { | |
| 14 color: white; | |
| 15 -webkit-animation: firstLetterAnimation 0.21s linear; | |
| 16 } | |
| 17 #box1.paused::first-letter { | |
| 18 -webkit-animation-play-state: paused; | |
| 19 } | |
| 20 #box1.running::first-letter { | |
| 21 -webkit-animation-play-state: running; | |
| 22 } | |
| 23 @-webkit-keyframes move1 { | |
| 24 from { left: 0px ; color: red;} | |
| 25 to { left: 400px; color: black;} | |
| 26 } | |
| 27 @-webkit-keyframes firstLetterAnimation { | |
| 28 from { color: white; } | |
| 29 to { color: green; } | |
| 30 } | |
| 31 </style> | |
| 32 <script src="resources/animation-test-helpers.js" type="text/javascript" chars
et="utf-8"></script> | |
| 33 <script type="text/javascript" charset="utf-8"> | |
| 34 | |
| 35 const expectedValues = [ | |
| 36 // [animation-name, time, element-id, property, expected-value, tolerance] | |
| 37 ["move1", 0.1, "box1", "left", 200, 20], | |
| 38 ["move1", 0.13, "box1", "left", 200, 20] | |
| 39 ]; | |
| 40 | |
| 41 function stop() | |
| 42 { | |
| 43 box1Element = document.getElementById("box1"); | |
| 44 box1Element.className = "paused"; | |
| 45 box1Element.style.webkitAnimationPlayState = "paused"; | |
| 46 } | |
| 47 | |
| 48 function start() | |
| 49 { | |
| 50 box1Element = document.getElementById("box1"); | |
| 51 box1Element.className = "running"; | |
| 52 box1Element.style.webkitAnimationPlayState = "running"; | |
| 53 } | |
| 54 | |
| 55 function setTimers() | |
| 56 { | |
| 57 setTimeout(stop, 100); | |
| 58 setTimeout(start, 150); | |
| 59 } | |
| 60 | |
| 61 var move1AnimationEnded = false; | |
| 62 function animationEnded(event) | |
| 63 { | |
| 64 if (event.animationName == "move1") | |
| 65 move1AnimationEnded = true; | |
| 66 | |
| 67 if (event.animationName == "firstLetterAnimation" && move1AnimationEnded
) { | |
| 68 document.getElementById('resultFirstLetter').innerHTML = "Test Faile
d: firstLetterAnimation should end before move1 animation<br>"; | |
| 69 } | |
| 70 } | |
| 71 | |
| 72 window.addEventListener("webkitAnimationEnd", animationEnded, false ); | |
| 73 | |
| 74 runAnimationTest(expectedValues, setTimers, null, true); | |
| 75 | |
| 76 </script> | |
| 77 </head> | |
| 78 <body> | |
| 79 <p> | |
| 80 This tests the operation of -webkit-animation-play-state. After 100 milliseconds
the box should stop and after 150 milliseconds | |
| 81 it should start again. We test it both while in motion and when stopped. | |
| 82 <div id="box1"> | |
| 83 Lorem ipsum dolor sit amet. | |
| 84 </div> | |
| 85 <div id="box2"> | |
| 86 </div> | |
| 87 <div id="result"> | |
| 88 </div> | |
| 89 <div id="resultFirstLetter"> | |
| 90 </div> | |
| 91 </body> | |
| 92 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 10696154:
Merge 120639 (Closed)
Base URL: http://svn.webkit.org/repository/webkit/branches/chromium/1180/