shadow-dom.html | Explore in Territory

<!DOCTYPE html>
<body>
<input type="range">
<script src="../../../resources/js-test.js"></script>
<script>
description('Test that MutationObservers operate in Shadow DOM');

function doTest()
{
    function mutate(elt)
    {
        elt.setAttribute('data-foo', 'bar');
        elt.insertBefore(document.createTextNode('hello'), elt.firstChild);
        elt.firstChild.textContent = 'goodbye';
        elt.removeChild(elt.firstChild);
    }

    var shadowRoot = internals.shadowRoot(document.querySelector('input'));
    var observer = new MutationObserver(function() { });

    observer.observe(shadowRoot.firstChild, {attributes: true, childList: true, characterData: true, subtree: true});
    mutate(shadowRoot.firstChild);

    window.mutations = observer.takeRecords();
    debug('Mutations in shadow DOM should have been observed:');
    shouldBe('mutations.length', '4');
    shouldBe('mutations[0].type', '"attributes"');
    shouldBe('mutations[1].type', '"childList"');
    shouldBe('mutations[2].type', '"characterData"');
    shouldBe('mutations[3].type', '"childList"');
    observer.disconnect();

    window.mutations = observer.takeRecords();
    observer.observe(document, {attributes: true, childList: true, characterData: true, subtree: true});
    mutate(shadowRoot.firstChild);    
    debug('\nObserving from outside shadow DOM should not see mutations in the shadow:');
    shouldBe('mutations.length', '0');
}

if (window.internals)
    doTest();
else
    testFailed('This test only runs in DRT');
</script>
</body>
chromium/third_party/blink/web_tests/fast/dom/MutationObserver/shadow-dom.html
