<!DOCTYPE html>
<html>
<link rel="import" href="../resources/chai.html" />
<link rel="import" href="../resources/mocha.html" />
<script>
describe('MutationObserver.observe on a subtree', function() {
  it('should handle basic aspects of subtree observation', function(done) {
    var observer;
    var subDiv;
    var mutations;

    function start() {
      var div = document.createElement('div');
      subDiv = div.appendChild(document.createElement('div'));
      subDiv.textContent = 'hello, world';
      observer = new MutationObserver(function(records) {
        mutations = records;
      });

      observer.observe(div, {attributes: true, characterData: true, subtree: true});
      subDiv.setAttribute('foo', 'bar');
      subDiv.firstChild.textContent = 'goodbye!';
      setTimeout(finish, 0);
    }

    function finish() {
      // ...attribute and characterData changes in subtree
      assert.equal(mutations.length, 2);
      assert.equal(mutations[0].type, "attributes");
      assert.equal(mutations[0].target, subDiv);
      assert.equal(mutations[0].attributeName, "foo");
      assert.equal(mutations[1].type, "characterData");
      assert.equal(mutations[1].target, subDiv.firstChild);
      observer.disconnect();
      done();
    }

    start();
  });

  it('should handle two observers at different depths', function(done) {
    var observer;
    var observer2;
    var mutations;
    var mutations2;
    var subDiv;

    function start() {
      var div = document.createElement('div');
      subDiv = div.appendChild(document.createElement('div'));
      observer = new MutationObserver(function(records) {
        mutations = records;
      });
      observer2 = new MutationObserver(function(records) {
        mutations2 = records;
      });

      observer.observe(div, {attributes: true, subtree: true});
      observer2.observe(subDiv, {attributes: true});
      subDiv.setAttribute('foo', 'bar');
      setTimeout(finish, 0);
    }

    function finish() {
      assert.equal(mutations.length, 1);
      assert.equal(mutations[0].type, "attributes");
      assert.equal(mutations[0].target, subDiv);
      assert.equal(mutations[0].attributeName, "foo");
      assert.equal(mutations2.length, 1);
      assert.equal(mutations2[0].type, "attributes");
      assert.equal(mutations2[0].target, subDiv);
      assert.equal(mutations2[0].attributeName, "foo");
      observer.disconnect();
      observer2.disconnect();
      done();
    }

    start();
  });

  it('should handle one observer at two different depths', function(done) {
    var observer;
    var mutations;
    var calls = 0;
    var subDiv;

    function start() {
      var div = document.createElement('div');
      subDiv = div.appendChild(document.createElement('div'));
      observer = new MutationObserver(function(records) {
        mutations = records;
        ++calls;
      });

      observer.observe(div, {attributes: true, subtree: true});
      observer.observe(subDiv, {attributes: true, subtree: true});
      subDiv.setAttribute('foo', 'bar');
      setTimeout(finish, 0);
    }

    function finish() {
      assert.equal(calls, 1);
      assert.equal(mutations.length, 1);
      assert.equal(mutations[0].type, "attributes");
      assert.equal(mutations[0].target, subDiv);
      assert.equal(mutations[0].attributeName, "foo");
      observer.disconnect();
      done();
    }

    start();
  });

  // FIXME(sky): This test is huge, it should be broken up.
  it('should handle transiently detached nodes are still observed via subtree', function(done) {
    var observer;
    var mutations;
    var div;
    var subDiv;

    function start() {
      div = document.createElement('div');
      subDiv = div.appendChild(document.createElement('div'));
      subDiv.textContent = 'hello, world';
      observer = new MutationObserver(function(records) {
        mutations = records;
      });

      observer.observe(div, {attributes: true, characterData: true, subtree: true});
      subDiv.setAttribute('foo', 'bar');
      div.removeChild(subDiv);
      subDiv.setAttribute('test', 'test');
      setTimeout(checkDeliveredAndChangeAgain, 0);
    }

    function checkDeliveredAndChangeAgain() {
      // ...both changes should be received. Change detached subDiv again.

      assert.equal(mutations.length, 2);
      assert.equal(mutations[0].type, "attributes");
      assert.equal(mutations[0].target, subDiv);
      assert.equal(mutations[0].attributeName, "foo");
      assert.equal(mutations[1].type, "attributes");
      assert.equal(mutations[1].target, subDiv);
      assert.equal(mutations[1].attributeName, "test");

      mutations = null;
      subDiv.setAttribute('foo', 'baz');

      setTimeout(checkNotDeliveredAndReattach, 0);
    }

    function checkNotDeliveredAndReattach() {
      // ...transient subtree observation was stopped after delivery, so subDiv change should not be received. Reattach and change again.

      assert.equal(mutations, null);

      mutations = null
      div.appendChild(subDiv);
      subDiv.setAttribute('foo', 'bat');

      setTimeout(checkDeliveredAndReobserve, 0);
    }

    function checkDeliveredAndReobserve() {
      //...reattached subtree should now be observable. Try detaching and re-observing.

      assert.equal(mutations.length, 1);
      assert.equal(mutations[0].type, "attributes");
      assert.equal(mutations[0].target, subDiv);
      assert.equal(mutations[0].attributeName, "foo");

      mutations = null;
      div.removeChild(subDiv);
      subDiv.firstChild.textContent = 'badbye';
      observer.observe(div, {attributes: true, characterData: true, subtree: true});
      subDiv.setAttribute('foo', 'boo');

      setTimeout(finish, 0);
    }

    function finish() {
      // ...The change made before re-observing should be received, but not the one after.

      assert.equal(mutations.length, 1);
      assert.equal(mutations[0].type, "characterData");
      assert.equal(mutations[0].target, subDiv.firstChild);

      observer.disconnect();
      done();
    }

    start();
  });

  it('should have correct behavior of transient observation with complex movement', function(done) {
    var observer;
    var subDiv;
    var mutations;

    function start() {
      var div = document.createElement('div');
      subDiv = div.appendChild(document.createElement('div'));
      subDiv2 = subDiv.appendChild(document.createElement('div'));
      subDiv2.textContent = 'hello, world';
      subDiv3 = document.createElement('div');

      observer = new MutationObserver(function(records) {
        mutations = records;
      });

      observer.observe(div, {attributes: true, characterData: true, subtree: true});
      div.removeChild(subDiv);
      subDiv.removeChild(subDiv2);
      text = subDiv2.removeChild(subDiv2.firstChild);

      subDiv.setAttribute('a', 'a');
      subDiv2.setAttribute('b', 'b');
      text.textContent = 'c';
      subDiv3.appendChild(subDiv2);
      subDiv3.setAttribute('d', 'd');
      subDiv2.setAttribute('e', 'e');
      div.appendChild(subDiv3);
      subDiv3.setAttribute('f', 'f');
      subDiv2.setAttribute('g', 'g');

      setTimeout(finish, 0);
    }

    function finish() {
      // ...All changes should be received except for setting the "d" attribute on subDiv3 before it was reachable from div.

      assert.equal(mutations.length, 6);
      assert.equal(mutations[0].type, "attributes");
      assert.equal(mutations[0].target, subDiv);
      assert.equal(mutations[0].attributeName, "a");

      assert.equal(mutations[1].type, "attributes");
      assert.equal(mutations[1].target, subDiv2);
      assert.equal(mutations[1].attributeName, "b");

      assert.equal(mutations[2].type, "characterData");
      assert.equal(mutations[2].target, text);

      assert.equal(mutations[3].type, "attributes");
      assert.equal(mutations[3].target, subDiv2);
      assert.equal(mutations[3].attributeName, "e");

      assert.equal(mutations[4].type, "attributes");
      assert.equal(mutations[4].target, subDiv3);
      assert.equal(mutations[4].attributeName, "f");

      assert.equal(mutations[5].type, "attributes");
      assert.equal(mutations[5].target, subDiv2);
      assert.equal(mutations[5].attributeName, "g");

      observer.disconnect();
      done();
    }
    start();
  });
});
</script>
</html>