<html>
<import src="../resources/chai.sky" />
<import src="../resources/mocha.sky" />
<div id="range"></div>
<script>
describe('MutationObservers', function() {
  it('should handle shadow dom', function() {
    function mutate(element) {
      element.setAttribute('data-foo', 'bar');
      element.insertBefore(document.createTextNode('hello'), element.firstChild);
      element.firstChild.textContent = 'goodbye';
      element.removeChild(element.firstChild);
    }

    var range = document.getElementById('range');
    var shadowRoot = range.createShadowRoot();
    shadowRoot.appendChild(document.createElement('div'));
    var observer = new MutationObserver(function() { });

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

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

    mutations = observer.takeRecords();
    observer.observe(document, {attributes: true, childList: true, characterData: true, subtree: true});
    mutate(shadowRoot.firstChild);
    // Observing from outside shadow DOM should not see mutations in the shadow:
    assert.equal(mutations.length, 0);
  });
});
</script>
</html>