third_party/WebKit/LayoutTests/animations/lazy-detached-animation-stop.html

   1 <!DOCTYPE html>
   2
   3 <script src="../resources/js-test.js"></script>
   4
   5 <style>
   6 @keyframes fade {
   7   0%   { opacity: 0; }
   8   100% { opacity: 1; }
   9 }
  10
  11 #target1 {
  12     background: red;
  13     animation: fade 1s infinite;
  14 }
  15
  16 #target2 {
  17     background: blue;
  18 }
  19 </style>
  20
  21 <input id="target1">
  22
  23 <script>
  24 jsTestIsAsync = true;
  25
  26 description("Animations should be canceled when an element is removed from the document.");
  27
  28 if (!window.testRunner)
  29     debug("FAIL: This test requires testRunner.");
  30
  31 const expectedValues = [
  32     // [time, element-id, property, expected-value, tolerance]
  33     [0.5, "target2", "opacity", 1, 0],
  34 ];
  35
  36 // Timeout so you can see it really animating at the start.
  37 var input = document.getElementById("target1");
  38 requestAnimationFrame(function() {
  39     requestAnimationFrame(function() {
  40         input.type = "button";
  41         input.type = "text";
  42         // Remove the element, but there's no detach() since it's already detach'ed().
  43         input.remove();
  44         // Change the id which should mean no more animations.
  45         input.id = "target2";
  46         // Insert the element again.
  47         document.body.appendChild(input);
  48         shouldBe("document.timeline.getAnimations().length", "0");
  49         finishJSTest();
  50     });
  51 });
  52 </script>