| <!DOCTYPE html> |
| <script src="../resources/js-test.js"></script> |
| <style> |
| #child { |
| width: 50px; |
| height: 50px; |
| background: red; |
| border: 1px solid red; |
| } |
| |
| .animate { |
| animation: flash 0.2s infinite; |
| } |
| |
| @keyframes flash { |
| 0% { |
| opacity: 1; |
| } |
| 100% { |
| opacity: 0; |
| } |
| } |
| </style> |
| <div id="container"> |
| <div id="child"></div> |
| </div> |
| <script> |
| description("Canceling an animation should not leave dirty bits on display none elements."); |
| |
| window.jsTestIsAsync = true; |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| |
| var child = document.getElementById("child"); |
| var container = document.getElementById("container"); |
| |
| child.addEventListener("animationstart", function(event) { |
| container.style.display = "none"; |
| child.style.borderWidth = "10px"; |
| shouldBeEqualToString("getComputedStyle(child).borderWidth", "10px"); |
| child.style.borderWidth = "5px"; |
| shouldBeEqualToString("getComputedStyle(child).borderWidth", "5px"); |
| finishJSTest(); |
| }); |
| |
| child.classList.add("animate"); |
| </script> |
| |
