| <!DOCTYPE html> |
| |
| <script src="../resources/js-test.js"></script> |
| |
| <style> |
| @keyframes fade { |
| 0% { opacity: 0; } |
| 100% { opacity: 1; } |
| } |
| |
| #target1 { |
| background: red; |
| animation: fade 1s infinite; |
| } |
| |
| #target2 { |
| background: blue; |
| } |
| </style> |
| |
| <input id="target1"> |
| |
| <script> |
| jsTestIsAsync = true; |
| |
| description("Animations should be canceled when an element is removed from the document."); |
| |
| if (!window.testRunner) |
| debug("FAIL: This test requires testRunner."); |
| |
| const expectedValues = [ |
| // [time, element-id, property, expected-value, tolerance] |
| [0.5, "target2", "opacity", 1, 0], |
| ]; |
| |
| // Timeout so you can see it really animating at the start. |
| var input = document.getElementById("target1"); |
| requestAnimationFrame(function() { |
| requestAnimationFrame(function() { |
| input.type = "button"; |
| input.type = "text"; |
| // Remove the element, but there's no detachLayoutTree() since it's already detached. |
| input.remove(); |
| // Change the id which should mean no more animations. |
| input.id = "target2"; |
| // Insert the element again. |
| document.body.appendChild(input); |
| shouldBe("document.getAnimations().length", "0"); |
| finishJSTest(); |
| }); |
| }); |
| </script> |
