observe-childList.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, mutations2;
var calls;
var div, removedDiv1, removedDiv2, addedDiv1, addedDiv2, addedDiv3;

function testBasic() {
    var div;
    var observer;

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

        mutations = null;
        div = document.createElement('div');
        observer = new MutationObserver(function(m) {
            mutations = m;
        });

        observer.observe(div, { childList: true });
        removedDiv1 = div.appendChild(document.createElement('div'));
        setTimeout(checkDisconnectAndMutate, 0);
    }

    function checkDisconnectAndMutate() {
        debug('...can childList changes be observed at all');

        shouldBe('mutations.length', '1');
        shouldBe('mutations[0].type', '"childList"');
        shouldBe('mutations[0].addedNodes.length', '1');
        shouldBe('mutations[0].addedNodes[0]', 'removedDiv1');

        mutations = null;
        observer.disconnect();
        removedDiv1 = div.appendChild(document.createElement('div'));
        setTimeout(checkNotDeliveredAndMutateMultiple, 0);
    }

    function checkNotDeliveredAndMutateMultiple() {
        debug('...observer.disconnect() should prevent further delivery of mutations.');

        shouldBe('mutations', 'null');
        observer.observe(div, { childList: true });
        removedDiv1 = div.removeChild(div.firstChild);
        removedDiv2 = div.removeChild(div.firstChild);
        setTimeout(finish);
    }

    function finish() {
        debug('...re-observing after disconnect works with the same observer.');

        shouldBe('mutations.length', '2');
        shouldBe('mutations[0].type', '"childList"');
        shouldBe('mutations[0].removedNodes.length', '1');
        shouldBe('mutations[0].removedNodes[0]', 'removedDiv1');
        shouldBe('mutations[1].type', '"childList"');
        shouldBe('mutations[1].removedNodes.length', '1');
        shouldBe('mutations[1].removedNodes[0]', 'removedDiv2');
        observer.disconnect();
        debug('');
        runNextTest();
    }

    start();
}

function testWrongType() {
    var div;
    var observer;

    function start() {
        debug('Testing that observing without specifying "childList" does not result in hearing about childList changes.');

        mutations = null;
        div = document.createElement('div');
        observer = new MutationObserver(function(m) {
            mutations = m;
        });

        observer.observe(div, { attributes: true, characterData: true });
        div.appendChild(document.createElement('div'));
        setTimeout(finish, 0);
    }

    function finish() {
        shouldBe('mutations', 'null');
        observer.disconnect();
        debug('');
        runNextTest();
    }

    start();
}

function testMultipleRegistration() {
    var div;
    var observer;

    function start() {
        debug('Testing that re-observing the same node with the same observer has the effect of resetting the options.');

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

        observer.observe(div, { childList: true, characterData: true });
        observer.observe(div, { childList: true });
        div.appendChild(document.createElement('div'));
        setTimeout(checkDisconnectAndMutate, 0);
    }

    function checkDisconnectAndMutate() {
        shouldBe('calls', '1');
        shouldBe('mutations.length', '1');
        shouldBe('mutations[0].type', '"childList"');
        mutations = null;
        observer.observe(div, { childList: true, characterData: true });
        observer.observe(div, { attributes: true });
        div.appendChild(document.createElement('div'));
        setTimeout(finish, 0);
    }

    function finish() {
        shouldBe('mutations', 'null');
        observer.disconnect();
        debug('');
        runNextTest();
    }

    start();
}

function testMultipleObservers() {
    var div;
    var observer;
    var observer2;

    function start() {
        debug('Testing that multiple observers can be registered to a given node and both receive mutations.');
        mutations = null;
        div = document.createElement('div');
        observer = new MutationObserver(function(m) {
            mutations = m;
        });
        observer2 = new MutationObserver(function(m) {
            mutations2 = m;
        });
        observer.observe(div, { childList: true });
        observer2.observe(div, { childList: true });
        div.appendChild(document.createElement('div'));
        setTimeout(finish, 0);
    }

    function finish() {
        shouldBe('mutations.length', '1');
        shouldBe('mutations[0].type', '"childList"');
        shouldBe('mutations2.length', '1');
        shouldBe('mutations2[0].type', '"childList"');
        observer.disconnect();
        observer2.disconnect();
        debug('');
        runNextTest();
    }

    start();
}

function testInnerHTMLAndInnerText() {
    var div;
    var observer;

    function start() {
        debug('Testing that innerText and innerHTML always result in a single childList mutation.');

        mutations = null;
        div = document.createElement('div');
        div.innerHTML = '<span>Foo</span><div>Bar</div>';
        removedDiv1 = div.firstChild;
        removedDiv2 = removedDiv1.nextSibling;
        observer = new MutationObserver(function(m) {
            mutations = m;
        });

        observer.observe(div, { childList: true });
        div.innerHTML = 'foo<img src="bar.png"><p>Baz</p>';
        addedDiv1 = div.childNodes[0];
        addedDiv2 = div.childNodes[1];
        addedDiv3 = div.childNodes[2];
        setTimeout(checkInnerHTML, 0);
    }

    function checkInnerHTML() {
        debug('...innerHTML');

        shouldBe('mutations.length', '1');
        shouldBe('mutations[0].type', '"childList"');
        shouldBe('mutations[0].addedNodes.length', '3');
        shouldBe('mutations[0].addedNodes[0]', 'addedDiv1');
        shouldBe('mutations[0].addedNodes[1]', 'addedDiv2');
        shouldBe('mutations[0].addedNodes[2]', 'addedDiv3');
        shouldBe('mutations[0].removedNodes.length', '2');
        shouldBe('mutations[0].removedNodes[0]', 'removedDiv1');
        shouldBe('mutations[0].removedNodes[1]', 'removedDiv2');

        mutations = null;
        div.innerText = 'foo';
        setTimeout(finish, 0);
    }

    function finish() {
        debug('...innerText');

        shouldBe('mutations.length', '1');
        shouldBe('mutations[0].type', '"childList"');
        shouldBe('mutations[0].addedNodes.length', '1');
        shouldBe('mutations[0].removedNodes.length', '3');
        observer.disconnect();
        debug('');
        runNextTest();
    }

    start();
}

function testReplaceChild() {
    var div;
    var observer;
    var fragment;

    function start() {
        debug('Testing that replaceChild results in minimal childList mutations.');

        mutations = null;
        div = document.createElement('div');
        div.innerHTML = '<span>Foo</span><div>Bar</div>';
        removedDiv1 = div.firstChild;

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

        observer.observe(div, { childList: true });
        addedDiv1 = document.createElement('div');
        div.replaceChild(addedDiv1, div.firstChild);
        setTimeout(checkReplaceWithNode, 0);
    }

    function checkReplaceWithNode() {
        debug('...simple replace child');

        shouldBe('mutations.length', '1');
        shouldBe('mutations[0].type', '"childList"');
        shouldBe('mutations[0].addedNodes.length', '1');
        shouldBe('mutations[0].addedNodes[0]', 'addedDiv1');
        shouldBe('mutations[0].removedNodes.length', '1');
        shouldBe('mutations[0].removedNodes[0]', 'removedDiv1');

        mutations = null;
        fragment = document.createDocumentFragment();
        addedDiv1 = fragment.appendChild(document.createElement('div'));
        addedDiv2 = fragment.appendChild(document.createElement('div'));
        removedDiv1 = div.firstChild;

        div.replaceChild(fragment, removedDiv1);

        setTimeout(finish, 0);
    }

    function finish() {
        debug('...replace with DocumentFragment');

        shouldBe('mutations.length', '1');
        shouldBe('mutations[0].type', '"childList"');
        shouldBe('mutations[0].addedNodes.length', '2');
        shouldBe('mutations[0].addedNodes[0]', 'addedDiv1');
        shouldBe('mutations[0].addedNodes[1]', 'addedDiv2');
        shouldBe('mutations[0].removedNodes.length', '1');
        shouldBe('mutations[0].removedNodes[0]', 'removedDiv1');

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

    start();
}

function testInsertBefore() {
    var div;
    var observer;
    var fragment;

    function start() {
        debug('Testing that insertBefore results in minimal childList mutations.');

        mutations = null;
        div = document.createElement('div');
        div.innerHTML = '<span>Foo</span>';
        fragment = document.createDocumentFragment();
        addedDiv1 = fragment.appendChild(document.createElement('div'));
        addedDiv2 = fragment.appendChild(document.createElement('div'));

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

        observer.observe(div, { childList: true });
        div.insertBefore(fragment, div.firstChild);
        setTimeout(finish, 0);
    }


    function finish() {
        shouldBe('mutations.length', '1');
        shouldBe('mutations[0].type', '"childList"');
        shouldBe('mutations[0].addedNodes.length', '2');
        shouldBe('mutations[0].addedNodes[0]', 'addedDiv1');
        shouldBe('mutations[0].addedNodes[1]', 'addedDiv2');
        shouldBe('mutations[0].removedNodes.length', '0');

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

    start();
}

function testAppendChild() {
    var div;
    var observer;
    var fragment;

    function start() {
        debug('Testing that appendChild results in minimal childList mutations.');

        mutations = null;
        div = document.createElement('div');
        div.innerHTML = '<span>Foo</span>';
        fragment = document.createDocumentFragment();
        addedDiv1 = fragment.appendChild(document.createElement('div'));
        addedDiv2 = fragment.appendChild(document.createElement('div'));

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

        observer.observe(div, { childList: true });
        div.appendChild(fragment);
        setTimeout(finish, 0);
    }

    function finish() {
        shouldBe('mutations.length', '1');
        shouldBe('mutations[0].type', '"childList"');
        shouldBe('mutations[0].addedNodes.length', '2');
        shouldBe('mutations[0].addedNodes[0]', 'addedDiv1');
        shouldBe('mutations[0].addedNodes[1]', 'addedDiv2');
        shouldBe('mutations[0].removedNodes.length', '0');

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

    start();
}

function testInnerHTMLEmpty() {
    function start() {
        debug('Setting an empty childlist to the empty string with innerHTML should not assert.');

        var div = document.createElement('div');
        mutations = null;
        observer = new MutationObserver(function(mutations) {
            window.mutations = mutations;
        });
        observer.observe(div, {childList: true});
        div.innerHTML = '';
        setTimeout(finish, 0);
    }

    function finish() {
        shouldBeNull('mutations');
        debug('');
        runNextTest();
    }

    start();
}

var tests = [testBasic, testWrongType, testMultipleRegistration, testMultipleObservers, testInnerHTMLAndInnerText, testReplaceChild, testInsertBefore, testAppendChild, testInnerHTMLEmpty];
var testIndex = 0;
 
function runNextTest() {
    if (testIndex < tests.length)
        tests[testIndex++]();
    else
        finishJSTest();
}

description('Test WebKitMutationObserver.observe on attributes.');

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