| <!DOCTYPE html> |
| <style> |
| #target { |
| width: 100px; |
| height: 100px; |
| background-color: red; |
| } |
| #target:after { |
| display: block; |
| position: relative; |
| content: ""; |
| width: 50px; |
| height: 50px; |
| background-color: blue; |
| } |
| #target.animated:after { |
| -webkit-animation: anim 1ms forwards; |
| animation: anim 1ms forwards; |
| } |
| @-webkit-keyframes anim { |
| from { |
| left: 0px; |
| display: block; |
| } |
| to { |
| left: 100px; |
| display: none; |
| } |
| } |
| @keyframes anim { |
| from { |
| left: 0px; |
| display: block; |
| } |
| to { |
| left: 100px; |
| display: none; |
| } |
| } |
| </style> |
| |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| function go() { |
| var target = document.getElementById('target'); |
| target.addEventListener('webkitAnimationEnd', completeTest); |
| target.classList.add('animated'); |
| } |
| |
| function test(style, property, expected) { |
| var pass = style[property] === expected; |
| document.getElementById('log').innerHTML += |
| (pass ? 'PASS' : 'FAIL') + ': ' + property + ' was ' + (pass ? '' : 'not ') + expected + '<br>'; |
| } |
| |
| function completeTest(message) { |
| var style = getComputedStyle(document.getElementById('target'), ':after'); |
| test(style, 'left', '100px'); |
| test(style, 'display', 'block'); |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| </script> |
| |
| <body onload="go()"> |
| <div> |
| Tests that an attempt to animate the display property of a pseudo element is |
| ignored, and that the animation proceeds as expected. |
| </div> |
| <div id="target"></div> |
| <div id="log"></div> |
| </body> |
