| <!DOCTYPE html> |
| |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.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> |
| var test = async_test("Animations should be canceled when an element is removed from the document."); |
| |
| 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(test.step_func(() => { |
| requestAnimationFrame(test.step_func_done(() => { |
| 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); |
| assert_equals(document.getAnimations().length, 0); |
| })); |
| })); |
| </script> |
