third_party/WebKit/LayoutTests/fast/dom/MutationObserver/shadow-dom.html

   1 <!DOCTYPE html>
   2 <body>
   3 <input type="range">
   4 <script src="../../../resources/js-test.js"></script>
   5 <script>
   6 description('Test that MutationObservers operate in Shadow DOM');
   7
   8 function doTest()
   9 {
  10     function mutate(elt)
  11     {
  12         elt.setAttribute('data-foo', 'bar');
  13         elt.insertBefore(document.createTextNode('hello'), elt.firstChild);
  14         elt.firstChild.textContent = 'goodbye';
  15         elt.removeChild(elt.firstChild);
  16     }
  17
  18     var shadowRoot = internals.shadowRoot(document.querySelector('input'));
  19     var observer = new MutationObserver(function() { });
  20
  21     observer.observe(shadowRoot.firstChild, {attributes: true, childList: true, characterData: true, subtree: true});
  22     mutate(shadowRoot.firstChild);
  23
  24     window.mutations = observer.takeRecords();
  25     debug('Mutations in shadow DOM should have been observed:');
  26     shouldBe('mutations.length', '4');
  27     shouldBe('mutations[0].type', '"attributes"');
  28     shouldBe('mutations[1].type', '"childList"');
  29     shouldBe('mutations[2].type', '"characterData"');
  30     shouldBe('mutations[3].type', '"childList"');
  31     observer.disconnect();
  32
  33     window.mutations = observer.takeRecords();
  34     observer.observe(document, {attributes: true, childList: true, characterData: true, subtree: true});
  35     mutate(shadowRoot.firstChild);
  36     debug('\nObserving from outside shadow DOM should not see mutations in the shadow:');
  37     shouldBe('mutations.length', '0');
  38 }
  39
  40 if (window.internals)
  41     doTest();
  42 else
  43     testFailed('This test only runs in DRT');
  44 </script>
  45 </body>