observe-subtree.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../../resources/js-test.js"></script>
<title></title>
</head>
<body>
<p id=description></p>
<div id="console"></div>
<script>

window.jsTestIsAsync = true;
var mutations;
var mutations2;
var div;
var subDiv, subDiv2, subDiv3, text;
var calls;

function testBasic() {
    var observer;

    function start() {
        debug('Testing basic aspects of subtree observation.');

        mutations = null;
        div = document.createElement('div');
        subDiv = div.appendChild(document.createElement('div'));
        subDiv.innerHTML = 'hello, world';
        observer = new MutationObserver(function(mutations) {
            window.mutations = mutations;
        });

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

    function finish() {
        debug('...attribute and characterData changes in subtree');

        shouldBe('mutations.length', '2');
        shouldBe('mutations[0].type', '"attributes"');
        shouldBe('mutations[0].target', 'subDiv');
        shouldBe('mutations[0].attributeName', '"foo"');
        shouldBe('mutations[0].attributeNamespace', 'null');
        shouldBe('mutations[1].type', '"characterData"');
        shouldBe('mutations[1].target', 'subDiv.firstChild');
        observer.disconnect();
        debug('');
        runNextTest();
    }

    start();
}

function testMultipleObservers() {
    var observer;
    var observer2;

    function start() {
        debug('Testing two observers at different depths.');

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

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

    function finish() {
        shouldBe('mutations.length', '1');
        shouldBe('mutations[0].type', '"attributes"');
        shouldBe('mutations[0].target', 'subDiv');
        shouldBe('mutations[0].attributeName', '"foo"');
        shouldBe('mutations[0].attributeNamespace', 'null');
        shouldBe('mutations2.length', '1');
        shouldBe('mutations2[0].type', '"attributes"');
        shouldBe('mutations2[0].target', 'subDiv');
        shouldBe('mutations2[0].attributeName', '"foo"');
        shouldBe('mutations2[0].attributeNamespace', 'null');
        observer.disconnect();
        observer2.disconnect();
        debug('');
        runNextTest();
    }

    start();
}

function testMultipleObservations() {
    var observer;

    function start() {
        debug('Testing one observer at two different depths.');

        mutations = null;
        calls = 0;
        div = document.createElement('div');
        subDiv = div.appendChild(document.createElement('div'));
        observer = new MutationObserver(function(mutations) {
            window.mutations = mutations;
            ++calls;
        });

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

    function finish() {
        shouldBe('calls', '1');
        shouldBe('mutations.length', '1');
        shouldBe('mutations[0].type', '"attributes"');
        shouldBe('mutations[0].target', 'subDiv');
        shouldBe('mutations[0].attributeName', '"foo"');
        shouldBe('mutations[0].attributeNamespace', 'null');
        observer.disconnect();
        debug('');
        runNextTest();
    }

    start();
}

function testTransientDetachedBasic() {
    var observer;

    function start() {
        debug('Testing that transiently detached nodes are still observed via subtree.');

        mutations = null;
        div = document.createElement('div');
        subDiv = div.appendChild(document.createElement('div'));
        subDiv.innerHTML = 'hello, world';
        observer = new MutationObserver(function(mutations) {
            window.mutations = mutations;
        });

        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() {
        debug('...both changes should be received. Change detached subDiv again.');

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

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

        setTimeout(checkNotDeliveredAndReattach);
    }

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

        shouldBe('mutations', 'null');

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

        setTimeout(checkDeliveredAndReobserve);
    }

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

        shouldBe('mutations.length', '1');
        shouldBe('mutations[0].type', '"attributes"');
        shouldBe('mutations[0].target', 'subDiv');
        shouldBe('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);
    }


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

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

        observer.disconnect();
        debug('');
        runNextTest();
    }
    start();
}

function testTransientDetachedDetailed() {
    var observer;

    function start() {
        debug('Testing correct behavior of transient observation with complex movement .');

        mutations = null;
        div = document.createElement('div');
        subDiv = div.appendChild(document.createElement('div'));
        subDiv2 = subDiv.appendChild(document.createElement('div'));
        subDiv2.innerHTML = 'hello, world';
        subDiv3 = document.createElement('div');

        observer = new MutationObserver(function(mutations) {
            window.mutations = mutations;
        });

        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() {
        debug('...All changes should be received except for setting the "d" attribute on subDiv3 before it was reachable from div.');

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

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

        shouldBe('mutations[2].type', '"characterData"');
        shouldBe('mutations[2].target', 'text');

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

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

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

        observer.disconnect();
        debug('');
        runNextTest();
    }
    start();
}

var tests = [testBasic, testMultipleObservers, testMultipleObservations, testTransientDetachedBasic, testTransientDetachedDetailed];
var testIndex = 0;

function runNextTest() {
    if (testIndex < tests.length)
        tests[testIndex++]();
    else
        finishJSTest();
}

description('Test WebKitMutationObserver.observe on a subtree');

runNextTest();
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/dom/MutationObserver/observe-subtree.html
