Google Git
Sign in
mojo / mojo-tools / 25430fcd291f99e168bcb356b588157473f4686b / . / sky / tests / mutation-observer / observe-childList.html
blob: feaa1d31425df6b9929d08a099e844bfb713e698 [file] [log] [blame]
<html>
<link rel="import" href="../resources/chai.html" />
<link rel="import" href="../resources/mocha.html" />
<script>
describe('MutationObserver.observe on childList', function() {
it('should handle basic observation', function(done) {
var div;
var observer;
var mutations;
var removedDiv1, removedDiv2;
function start() {
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() {
// ...can childList changes be observed at all.
assert.equal(mutations.length, 1);
assert.equal(mutations[0].type, "childList");
assert.equal(mutations[0].addedNodes.length, 1);
assert.equal(mutations[0].addedNodes[0], removedDiv1);
mutations = null;
observer.disconnect();
removedDiv1 = div.appendChild(document.createElement('div'));
setTimeout(checkNotDeliveredAndMutateMultiple, 0);
}
function checkNotDeliveredAndMutateMultiple() {
// ...observer.disconnect() should prevent further delivery of mutations.
assert.equal(mutations, null);
observer.observe(div, { childList: true });
removedDiv1 = div.removeChild(div.firstChild);
removedDiv2 = div.removeChild(div.firstChild);
setTimeout(finish);
}
function finish() {
// ...re-observing after disconnect works with the same observer.
assert.equal(mutations.length, 2);
assert.equal(mutations[0].type, "childList");
assert.equal(mutations[0].removedNodes.length, 1);
assert.equal(mutations[0].removedNodes[0], removedDiv1);
assert.equal(mutations[1].type, "childList");
assert.equal(mutations[1].removedNodes.length, 1);
assert.equal(mutations[1].removedNodes[0], removedDiv2);
observer.disconnect();
done();
}
start();
});
it('should handle observing without specifying "childList" does not result in hearing about childList changes', function(done) {
var div;
var observer;
var mutations;
function start() {
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() {
assert.equal(mutations, null);
observer.disconnect();
done();
}
start();
});
it('should handle re-observing the same node with the same observer has the effect of resetting the options', function(done) {
var div;
var observer;
var mutations;
var calls = 0;
function start() {
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() {
assert.equal(calls, 1);
assert.equal(mutations.length, 1);
assert.equal(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() {
assert.equal(mutations, null);
observer.disconnect();
done();
}
start();
});
it('should handle multiple observers can be registered to a given node and both receive mutations', function(done) {
var div;
var observer;
var observer2;
var mutations;
var mutations2;
function start() {
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() {
assert.equal(mutations.length, 1);
assert.equal(mutations[0].type, "childList");
assert.equal(mutations2.length, 1);
assert.equal(mutations2[0].type, "childList");
observer.disconnect();
observer2.disconnect();
done();
}
start();
});
it('should create minimal mutations for replaceChild', function(done) {
var div;
var observer;
var fragment;
var mutations;
var addedDiv1;
var addedDiv2;
var removedDiv1;
function start() {
div = document.createElement('div');
var first = document.createElement('span');
first.textContent = 'Foo';
div.appendChild(first);
var second = document.createElement('div');
second.textContent = 'Bar';
div.appendChild(second);
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() {
// ...simple replace child
assert.equal(mutations.length, 1);
assert.equal(mutations[0].type, "childList");
assert.equal(mutations[0].addedNodes.length, 1);
assert.equal(mutations[0].addedNodes[0], addedDiv1);
assert.equal(mutations[0].removedNodes.length, 1);
assert.equal(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() {
// ...replace with DocumentFragment.
assert.equal(mutations.length, 1);
assert.equal(mutations[0].type, "childList");
assert.equal(mutations[0].addedNodes.length, 2);
assert.equal(mutations[0].addedNodes[0], addedDiv1);
assert.equal(mutations[0].addedNodes[1], addedDiv2);
assert.equal(mutations[0].removedNodes.length, 1);
assert.equal(mutations[0].removedNodes[0], removedDiv1);
observer.disconnect();
done();
}
start();
});
it('should create minimal mutations for insertBefore', function(done) {
var div;
var observer;
var fragment;
var mutations;
var addedDiv1;
var addedDiv2;
function start() {
div = document.createElement('div');
var first = document.createElement('span');
first.textContent = 'Foo';
div.appendChild(first);
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() {
assert.equal(mutations.length, 1);
assert.equal(mutations[0].type, "childList");
assert.equal(mutations[0].addedNodes.length, 2);
assert.equal(mutations[0].addedNodes[0], addedDiv1);
assert.equal(mutations[0].addedNodes[1], addedDiv2);
assert.equal(mutations[0].removedNodes.length, 0);
observer.disconnect();
done();
}
start();
});
it('should create minimal mutations for appendChild', function(done) {
var div;
var observer;
var fragment;
var mutations;
var addedDiv1;
var addedDiv2;
function start() {
div = document.createElement('div');
var first = document.createElement('span');
first.textContent = 'Foo';
div.appendChild(first);
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() {
assert.equal(mutations.length, 1);
assert.equal(mutations[0].type, "childList");
assert.equal(mutations[0].addedNodes.length, 2);
assert.equal(mutations[0].addedNodes[0], addedDiv1);
assert.equal(mutations[0].addedNodes[1], addedDiv2);
assert.equal(mutations[0].removedNodes.length, 0);
observer.disconnect();
done();
}
start();
});
});
</script>
</body>
</html>