<!DOCTYPE html>
<html>
<!--
 | Verify that the transition is not started when an element is removed then
 | reattached to the DOM.
 -->
<head>
  <style>
    body {
      background-color: #000000;
    }

    div {
      width: 100px;
      height: 100px;
      background-color: #FF0000;
      transition: background-color 5s;
    }
  </style>
  <script>
    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

    window.onload = function() {
      var frame = 0;
      var e = document.getElementById("animated");

      function requestAnimationFrame(callback) {
        window.requestAnimationFrame(callback);
        if (window.testRunner) {
          window.testRunner.DoNonMeasuredLayout();
        }
      }

      function frameCallback() {
        switch(++frame) {
          case 1:
          case 2:
            requestAnimationFrame(frameCallback);
            break;
          case 3:
            document.body.removeChild(e);
            requestAnimationFrame(frameCallback);
            break;
          case 4:
            requestAnimationFrame(frameCallback);
            break;
          case 5:
            // Should not trigger a transition; color should change immediately.
            e.style.backgroundColor = "#0000FF";
            document.body.appendChild(e);
            requestAnimationFrame(frameCallback);
            break;
          case 6:
            requestAnimationFrame(frameCallback);
            break;
          case 7:
            if (window.testRunner) {
              window.testRunner.notifyDone();
            }
            break;
        }
      }

      // Trigger initial transition.
      e.style.backgroundColor = "#00FF00";
      frameCallback();
    }
  </script>
</head>
<body>
  <div id="animated"></div>
</body>
</html>