| <!DOCTYPE html> |
| <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 src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script> |
| var test = async_test("Canceling an animation should not leave dirty bits on display none elements"); |
| |
| var child = document.getElementById("child"); |
| var container = document.getElementById("container"); |
| |
| child.addEventListener("animationstart", test.step_func_done(() => { |
| container.style.display = "none"; |
| child.style.borderWidth = "10px"; |
| assert_equals(getComputedStyle(child).borderWidth, "10px"); |
| child.style.borderWidth = "5px"; |
| assert_equals(getComputedStyle(child).borderWidth, "5px"); |
| })); |
| |
| child.classList.add("animate"); |
| </script> |
| |
