| <html> |
| <link rel="import" href="../resources/chai.html" /> |
| <link rel="import" href="../resources/mocha.html" /> |
| <script> |
| describe('MutationObserver.observe on attributes', function() { |
| it('should handle basic aspects of attribute observation', function(done) { |
| var div; |
| var observer; |
| var mutations; |
| |
| function start() { |
| div = document.createElement('div'); |
| div.setAttribute('bar', 'foo'); |
| |
| observer = new MutationObserver(function(records) { |
| mutations = records; |
| }); |
| |
| observer.observe(div, { attributes: true, characterData: true }); |
| div.setAttribute('foo', 'bar'); |
| div.removeAttribute('bar'); |
| setTimeout(checkDisconnectAndMutate, 0); |
| } |
| |
| function checkDisconnectAndMutate() { |
| // ...can attribute changes be observed at all |
| |
| assert.equal(mutations.length, 2); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "foo"); |
| assert.equal(mutations[1].type, "attributes"); |
| assert.equal(mutations[1].attributeName, "bar"); |
| |
| mutations = null; |
| observer.disconnect(); |
| div.setAttribute('foo', 'baz'); |
| setTimeout(checkNotDeliveredAndMutateMultiple, 0); |
| } |
| |
| function checkNotDeliveredAndMutateMultiple() { |
| // ...observer.disconnect() should prevent further delivery of mutations. |
| |
| assert.equal(mutations, null); |
| observer.observe(div, { attributes: true }); |
| div.setAttribute('foo', 'bat'); |
| div.setAttribute('bar', 'foo'); |
| setTimeout(finish); |
| } |
| |
| function finish() { |
| // ...re-observing after disconnect works with the same observer. |
| |
| assert.equal(mutations.length, 2); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "foo"); |
| assert.equal(mutations[1].type, "attributes"); |
| assert.equal(mutations[1].attributeName, "bar"); |
| observer.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| |
| it('should not notify of attribute changes without asking', function(done) { |
| var div; |
| var observer; |
| var mutations; |
| |
| function start() { |
| div = document.createElement('div'); |
| observer = new MutationObserver(function(records) { |
| mutations = records; |
| }); |
| |
| observer.observe(div, { childList: true, characterData: true }); |
| div.setAttribute('foo', 'bar'); |
| setTimeout(finish, 0); |
| } |
| |
| function finish() { |
| assert.equal(mutations, null); |
| observer.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| |
| it('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(records) { |
| mutations = records; |
| calls++; |
| }); |
| |
| observer.observe(div, { attributes: true, characterData: true }); |
| observer.observe(div, { attributes: true }); |
| div.setAttribute('foo', 'bar'); |
| setTimeout(checkDisconnectAndMutate, 0); |
| } |
| |
| function checkDisconnectAndMutate() { |
| assert.equal(calls, 1); |
| assert.equal(mutations.length, 1); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "foo"); |
| mutations = null; |
| observer.observe(div, { attributes: true, characterData: true }); |
| observer.observe(div, { childList: true }); |
| div.setAttribute('foo', 'baz'); |
| setTimeout(finish, 0); |
| } |
| |
| function finish() { |
| assert.equal(mutations, null); |
| observer.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| |
| it('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(records) { |
| mutations = records; |
| }); |
| observer2 = new MutationObserver(function(records) { |
| mutations2 = records; |
| }); |
| observer.observe(div, { attributes: true }); |
| observer2.observe(div, { attributes: true }); |
| div.setAttribute('foo', 'bar'); |
| setTimeout(finish, 0); |
| } |
| |
| function finish() { |
| assert.equal(mutations.length, 1); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "foo"); |
| assert.equal(mutations2.length, 1); |
| assert.equal(mutations2[0].type, "attributes"); |
| assert.equal(mutations2[0].attributeName, "foo"); |
| observer.disconnect(); |
| observer2.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| |
| it('should deliver mutations on modifications to node properties which delegate to attribute storage', function(done) { |
| var img, a; |
| var observer; |
| var mutations; |
| |
| function start() { |
| img = document.createElement('img'); |
| a = document.createElement('a'); |
| |
| observer = new MutationObserver(function(records) { |
| mutations = records; |
| }); |
| |
| observer.observe(img, { attributes: true }); |
| observer.observe(a, { attributes: true }); |
| |
| img.src = 'baz.png'; |
| a.href = 'foo.html'; |
| |
| setTimeout(finish, 0); |
| } |
| |
| function finish() { |
| assert.equal(mutations.length, 2); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "src"); |
| assert.equal(mutations[1].type, "attributes"); |
| assert.equal(mutations[1].attributeName, "href"); |
| observer.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| |
| it('should handle basic oldValue delivery', function(done) { |
| var div; |
| var observer; |
| var mutations; |
| |
| function start() { |
| div = document.createElement('div'); |
| div.setAttribute('bar', 'boo'); |
| |
| observer = new MutationObserver(function(records) { |
| mutations = records; |
| }); |
| observer.observe(div, { attributes: true, attributeOldValue: true }); |
| div.setAttribute('foo', 'bar'); |
| div.setAttribute('foo', 'baz'); |
| div.removeAttribute('bar'); |
| div.removeAttribute('non-existant'); |
| setTimeout(finish, 0); |
| } |
| |
| function finish() { |
| assert.equal(mutations.length, 3); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "foo"); |
| assert.equal(mutations[0].oldValue, null); |
| assert.equal(mutations[1].type, "attributes"); |
| assert.equal(mutations[1].attributeName, "foo"); |
| assert.equal(mutations[1].oldValue, "bar"); |
| assert.equal(mutations[2].type, "attributes"); |
| assert.equal(mutations[2].attributeName, "bar"); |
| assert.equal(mutations[2].oldValue, "boo"); |
| observer.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| |
| it('should deliver oldValue when needed', function(done) { |
| var div; |
| var observerWithOldValue; |
| var observer; |
| var mutationsWithOldValue; |
| var mutations; |
| |
| function start() { |
| div = document.createElement('div'); |
| div.setAttribute('foo', 'bar'); |
| observerWithOldValue = new MutationObserver(function(records) { |
| mutationsWithOldValue = records; |
| }); |
| observer = new MutationObserver(function(records) { |
| mutations = records; |
| }); |
| observerWithOldValue.observe(div, { attributes: true, attributeOldValue: true }); |
| observer.observe(div, { attributes: true }); |
| div.setAttribute('foo', 'baz'); |
| setTimeout(finish, 0); |
| } |
| |
| function finish() { |
| assert.equal(mutationsWithOldValue.length, 1); |
| assert.equal(mutationsWithOldValue[0].type, "attributes"); |
| assert.equal(mutationsWithOldValue[0].attributeName, "foo"); |
| assert.equal(mutationsWithOldValue[0].oldValue, "bar"); |
| assert.equal(mutations.length, 1); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "foo"); |
| assert.equal(mutations[0].oldValue, null); |
| observerWithOldValue.disconnect(); |
| observer.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| |
| it('should give attributeOldValue if any entries request it with multiple observers', function(done) { |
| var div; |
| var span; |
| var observer; |
| var mutations; |
| |
| function start() { |
| div = document.createElement('div'); |
| span = div.appendChild(document.createElement('span')); |
| span.setAttribute('foo', 'bar'); |
| observer = new MutationObserver(function(records) { |
| mutations = records; |
| }); |
| observer.observe(div, { attributes: true, attributeOldValue: true, subtree: true }); |
| observer.observe(span, { attributes: true }); |
| span.setAttribute('foo', 'baz'); |
| setTimeout(finish, 0); |
| } |
| |
| function finish() { |
| assert.equal(mutations.length, 1); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "foo"); |
| assert.equal(mutations[0].oldValue, "bar"); |
| observer.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| |
| it('should handle setting an attribute via reflected IDL attribute', function(done) { |
| var div; |
| var observer; |
| var mutations; |
| |
| function start() { |
| div = document.createElement('div'); |
| observer = new MutationObserver(function(records) { |
| mutations = records; |
| }); |
| observer.observe(div, { attributes: true, attributeOldValue: true }); |
| div.id = 'foo'; |
| div.id = 'bar'; |
| div.id = null; |
| setTimeout(finish, 0); |
| } |
| |
| function finish() { |
| assert.equal(mutations.length, 3); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "id"); |
| assert.equal(mutations[0].oldValue, null); |
| assert.equal(mutations[1].type, "attributes"); |
| assert.equal(mutations[1].attributeName, "id"); |
| assert.equal(mutations[1].oldValue, "foo"); |
| assert.equal(mutations[2].type, "attributes"); |
| assert.equal(mutations[2].attributeName, "id"); |
| assert.equal(mutations[2].oldValue, "bar"); |
| observer.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| |
| it('should respect attributeFilter on HTML elements', function(done) { |
| var div, path; |
| var observer; |
| var mutations; |
| |
| function start() { |
| observer = new MutationObserver(function(records) { |
| mutations = records; |
| }); |
| |
| div = document.createElement('div'); |
| observer.observe(div, { attributes: true, attributeFilter: ['foo', 'bar', 'booM'] }); |
| div.setAttribute('foo', 'foo'); |
| div.setAttribute('bar', 'bar'); |
| div.setAttribute('baz', 'baz'); |
| div.setAttribute('BOOm', 'boom'); |
| |
| setTimeout(finish, 0); |
| } |
| |
| function finish() { |
| // ...only foo and bar should be received. |
| |
| assert.equal(mutations.length, 2); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "foo"); |
| assert.equal(mutations[1].type, "attributes"); |
| assert.equal(mutations[1].attributeName, "bar"); |
| observer.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| |
| it('should respect different attributeFilters when observing multiple subtree nodes', function(done) { |
| var div, div2, div3; |
| var observer; |
| var mutations; |
| |
| function start() { |
| observer = new MutationObserver(function(records) { |
| mutations = records; |
| }); |
| |
| div = document.createElement('div'); |
| div2 = div.appendChild(document.createElement('div')); |
| div3 = div2.appendChild(document.createElement('div')); |
| |
| observer.observe(div, { attributes: true, subtree: true, attributeFilter: ['foo', 'bar'] }); |
| observer.observe(div2, { attributes: true, subtree: true, attributeFilter: ['bar', 'bat'] }); |
| |
| div3.setAttribute('foo', 'foo'); |
| div3.setAttribute('bar', 'bar'); |
| div3.setAttribute('bat', 'bat'); |
| div3.setAttribute('baz', 'baz'); |
| |
| setTimeout(checkAndObserveAll, 0); |
| } |
| |
| function checkAndObserveAll() { |
| // ...only foo, bar & bat should be received. |
| |
| assert.equal(mutations.length, 3); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "foo"); |
| assert.equal(mutations[1].type, "attributes"); |
| assert.equal(mutations[1].attributeName, "bar"); |
| assert.equal(mutations[2].type, "attributes"); |
| assert.equal(mutations[2].attributeName, "bat"); |
| |
| observer.observe(div2, { attributes: true, subtree: true }); |
| div3.setAttribute('bar', 'bar'); |
| div3.setAttribute('bat', 'bat'); |
| div3.setAttribute('baz', 'baz'); |
| |
| setTimeout(finish, 0); |
| } |
| |
| function finish() { |
| // ...bar, bat & baz should all be received. |
| |
| assert.equal(mutations.length, 3); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "bar"); |
| assert.equal(mutations[1].type, "attributes"); |
| assert.equal(mutations[1].attributeName, "bat"); |
| assert.equal(mutations[2].type, "attributes"); |
| assert.equal(mutations[2].attributeName, "baz"); |
| |
| observer.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| |
| it('should create records for the style property', function(done) { |
| var div, path; |
| var observer; |
| var mutations; |
| |
| function start() { |
| observer = new MutationObserver(function(records) { |
| mutations = records; |
| }); |
| |
| div = document.createElement('div'); |
| div.setAttribute('style', 'color: yellow; width: 100px;'); |
| observer.observe(div, { attributes: true }); |
| div.style.color = 'red'; |
| div.style.width = '200px'; |
| div.style.color = 'blue'; |
| |
| setTimeout(checkAndContinue, 0); |
| } |
| |
| function checkAndContinue() { |
| assert.equal(mutations.length, 3); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "style"); |
| assert.equal(mutations[0].oldValue, null); |
| assert.equal(mutations[1].type, "attributes"); |
| assert.equal(mutations[1].attributeName, "style"); |
| assert.equal(mutations[1].oldValue, null); |
| assert.equal(mutations[2].type, "attributes"); |
| assert.equal(mutations[2].attributeName, "style"); |
| assert.equal(mutations[2].oldValue, null); |
| |
| mutations = null; |
| div.getAttribute('style'); |
| setTimeout(finish, 0); |
| } |
| |
| function finish() { |
| // ...mutation record created. |
| |
| assert.equal(mutations, null); |
| |
| observer.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| |
| it('should have oldValue for style property mutations', function(done) { |
| var div, path; |
| var observer; |
| var mutations; |
| |
| function start() { |
| observer = new MutationObserver(function(records) { |
| mutations = records; |
| }); |
| |
| div = document.createElement('div'); |
| div.setAttribute('style', 'color: yellow; width: 100px;'); |
| observer.observe(div, { attributes: true, attributeOldValue: true }); |
| div.style.color = 'red'; |
| div.style.width = '200px'; |
| div.style.color = 'blue'; |
| |
| setTimeout(checkAndContinue, 0); |
| } |
| |
| function checkAndContinue() { |
| assert.equal(mutations.length, 3); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "style"); |
| assert.equal(mutations[0].oldValue, "color: yellow; width: 100px;"); |
| assert.equal(mutations[1].type, "attributes"); |
| assert.equal(mutations[1].attributeName, "style"); |
| assert.equal(mutations[1].oldValue, "color: rgb(255, 0, 0); width: 100px;"); |
| assert.equal(mutations[2].type, "attributes"); |
| assert.equal(mutations[2].attributeName, "style"); |
| assert.equal(mutations[2].oldValue, "color: rgb(255, 0, 0); width: 200px;"); |
| |
| mutations = null; |
| div.getAttribute('style'); |
| setTimeout(finish, 0); |
| } |
| |
| function finish() { |
| // ...mutation record created. |
| |
| assert.equal(mutations, null); |
| |
| observer.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| |
| it('should not create records for noop style property mutation', function(done) { |
| var div, path; |
| var observer; |
| var mutations; |
| |
| function start() { |
| observer = new MutationObserver(function(records) { |
| mutations = records; |
| }); |
| |
| div = document.createElement('div'); |
| div.setAttribute('style', 'color: yellow; width: 100px;'); |
| observer.observe(div, { attributes: true }); |
| div.style.removeProperty('height'); |
| |
| setTimeout(finish, 0); |
| } |
| |
| function finish() { |
| assert.equal(mutations, null); |
| |
| observer.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| |
| it('should create records when mutating through the attribute collection', function(done) { |
| var observer; |
| var mutations; |
| var div; |
| |
| function start() { |
| observer = new MutationObserver(function(records) { |
| mutations = records; |
| }); |
| |
| div = document.createElement('div'); |
| div.setAttribute('data-test', 'foo'); |
| observer.observe(div, { attributes: true, attributeOldValue: true }); |
| div.attributes['data-test'].value = 'bar'; |
| |
| setTimeout(finish, 0); |
| } |
| |
| function finish() { |
| assert.equal(mutations.length, 1); |
| assert.equal(mutations[0].target, div); |
| assert.equal(mutations[0].type, "attributes"); |
| assert.equal(mutations[0].attributeName, "data-test"); |
| assert.equal(mutations[0].oldValue, "foo"); |
| |
| observer.disconnect(); |
| done(); |
| } |
| |
| start(); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
