| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Test attributeChanged callback is called if custom element attribute value is changed</title> |
| <meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> |
| <meta name="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru"> |
| <meta name="assert" content="attributeChanged callback must be enqueued whenever custom element's attribute is added, changed or removed"> |
| <link rel="help" href="http://www.w3.org/TR/custom-elements/#types-of-callbacks"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../../testcommon.js"></script> |
| <link rel="stylesheet" href="/resources/testharness.css"> |
| </head> |
| <body> |
| <div id="log"></div> |
| <script> |
| test(function() { |
| var doc = newHTMLDocument(); |
| var proto = newHTMLElementPrototype(); |
| var GeneratedConstructor = doc.registerElement('x-a', {prototype: proto}); |
| var customElement = new GeneratedConstructor(); |
| |
| customElement.setAttribute('class', 'someClass'); |
| proto.attributeChangedCallbackCalledCounter = 0; |
| customElement.setAttribute('class', 'someClass2'); |
| assert_equals(proto.attributeChangedCallbackCalledCounter, 1, |
| 'Callback attributeChanged should be called'); |
| }, 'Test attributeChanged callback is called if attribute value is changed by method ' + |
| 'setAttribute(). The custom element is created via constructor'); |
| |
| |
| test(function() { |
| var doc = newHTMLDocument(); |
| var proto = newHTMLElementPrototype(); |
| doc.registerElement('x-b', {prototype: proto}); |
| |
| doc.body.innerHTML = '<x-b id="x-b" class="oldValue"></x-b>'; |
| var customElement = doc.querySelector('#x-b'); |
| customElement.setAttribute('class', 'newValue'); |
| assert_equals(proto.attributeChangedCallbackCalledCounter, 1, |
| 'Callback attributeChanged should be called'); |
| assert_array_equals(proto.attributeChangedCallbackArgs, |
| ['class', 'oldValue', 'newValue'], |
| 'Unexpected callback attributeChanged arguments'); |
| }, 'Test attributeChanged callback arguments if attribute value is changed by method ' + |
| 'setAttribute(). The custom element is created via innerHTML property'); |
| |
| |
| test(function() { |
| var doc = newHTMLDocument(); |
| var proto = newHTMLElementPrototype(); |
| var GeneratedConstructor = doc.registerElement('x-c', {prototype: proto}); |
| var customElement = new GeneratedConstructor(); |
| |
| customElement.setAttribute('class', 'someClass'); |
| proto.attributeChangedCallbackCalledCounter = 0; |
| customElement.classList.add('someClass3'); |
| assert_equals(proto.attributeChangedCallbackCalledCounter, 1, |
| 'Callback attributeChanged should be called'); |
| }, 'Test attributeChanged callback is called if attribute value is changed by method ' + |
| 'classList.add(). The custom element is created via constructor'); |
| |
| |
| test(function() { |
| var doc = newHTMLDocument(); |
| var proto = newHTMLElementPrototype(); |
| doc.registerElement('x-d', {prototype: proto}); |
| |
| doc.body.innerHTML = '<x-d id="x-d" class="oldValue"></x-d>'; |
| var customElement = doc.querySelector('#x-d'); |
| customElement.classList.add('newestValue'); |
| assert_equals(proto.attributeChangedCallbackCalledCounter, 1, |
| 'Callback attributeChanged should be called'); |
| assert_array_equals(proto.attributeChangedCallbackArgs, |
| ['class', 'oldValue', 'oldValue newestValue'], |
| 'Unexpected callback attributeChanged arguments'); |
| }, 'Test attributeChanged callback arguments if attribute value is changed by method ' + |
| 'classList.add(). The custom element is created via innerHTML property'); |
| |
| |
| test(function() { |
| var doc = newHTMLDocument(); |
| var proto = newHTMLElementPrototype(); |
| var GeneratedConstructor = doc.registerElement('x-e', {prototype: proto}); |
| var customElement = new GeneratedConstructor(); |
| |
| customElement.setAttribute('class', 'someClass'); |
| proto.attributeChangedCallbackCalledCounter = 0; |
| customElement.id = 'someId'; |
| assert_equals(proto.attributeChangedCallbackCalledCounter, 1, |
| 'Callback attributeChanged should be called'); |
| }, 'Test attributeChanged callback is called if attribute value is changed as property. ' + |
| 'The custom element is created via constructor'); |
| |
| |
| test(function() { |
| var doc = newHTMLDocument(); |
| var proto = newHTMLElementPrototype(); |
| doc.registerElement('x-f', {prototype: proto}); |
| |
| doc.body.innerHTML = '<x-f id="x-f" class="oldValue"></x-f>'; |
| var customElement = doc.querySelector('#x-f'); |
| customElement.className = 'lastValue'; |
| assert_equals(proto.attributeChangedCallbackCalledCounter, 1, |
| 'Callback attributeChanged should be called'); |
| assert_array_equals(proto.attributeChangedCallbackArgs, |
| ['class', 'oldValue', 'lastValue'], |
| 'Unexpected callback attributeChanged arguments'); |
| }, 'Test attributeChanged callback arguments if attribute value is changed as property. ' + |
| 'The custom element is created via innerHTML property'); |
| |
| |
| test(function() { |
| var doc = newHTMLDocument(); |
| var proto = newHTMLElementPrototype(); |
| var GeneratedConstructor = doc.registerElement('x-g', {prototype: proto}); |
| var customElement = new GeneratedConstructor(); |
| |
| customElement.setAttribute('class', 'someClass someSuperClass'); |
| proto.attributeChangedCallbackCalledCounter = 0; |
| customElement.classList.toggle('someClass'); |
| assert_equals(proto.attributeChangedCallbackCalledCounter, 1, |
| 'Callback attributeChanged should be called'); |
| }, 'Test attributeChanged callback is called if attribute value is changed by classList.toggle(). ' + |
| 'The custom element is created via constructor'); |
| |
| |
| test(function() { |
| var doc = newHTMLDocument(); |
| var proto = newHTMLElementPrototype(); |
| doc.registerElement('x-h', {prototype: proto}); |
| |
| doc.body.innerHTML = '<x-h id="x-h" class="oldValue lastValue"></x-h>'; |
| var customElement = doc.querySelector('#x-h'); |
| customElement.classList.toggle('lastValue'); |
| assert_equals(proto.attributeChangedCallbackCalledCounter, 1, |
| 'Callback attributeChanged should be called'); |
| assert_array_equals(proto.attributeChangedCallbackArgs, |
| ['class', 'oldValue lastValue', 'oldValue'], |
| 'Unexpected callback attributeChanged arguments'); |
| }, 'Test attributeChanged callback arguments if attribute value is changed by classList.toggle(). ' + |
| 'The custom element is created via innerHTML property'); |
| |
| |
| test(function() { |
| var doc = newHTMLDocument(); |
| doc.body.innerHTML = '<x-i id="x-i" class="oldValue"></x-i>'; |
| var customElement = doc.querySelector('#x-i'); |
| customElement.setAttribute('class', 'newValue'); |
| customElement.setAttribute('class', 'newestValue'); |
| |
| var proto = newHTMLElementPrototype(); |
| doc.registerElement('x-i', {prototype: proto}); |
| |
| assert_equals(proto.attributeChangedCallbackCalledCounter, 0, |
| 'Callback attributeChanged should not be called'); |
| |
| customElement.setAttribute('class', 'rightValue'); |
| assert_equals(proto.attributeChangedCallbackCalledCounter, 1, |
| 'Callback attributeChanged should not be called'); |
| assert_array_equals(proto.attributeChangedCallbackArgs, |
| ['class', 'newestValue', 'rightValue'], |
| 'Unexpected callback attributeChanged arguments'); |
| }, 'Test attributeChanged callback is not called if custom element is not registered'); |
| |
| |
| testInIFrame('../../resources/x-element.html', function(doc) { |
| var proto = newHTMLElementPrototype(); |
| doc.registerElement('x-element', {prototype: proto}); |
| |
| var customElement = doc.querySelector('#x-element'); |
| customElement.setAttribute('class', 'firstValue'); |
| customElement.setAttribute('class', 'secondValue'); |
| assert_equals(proto.attributeChangedCallbackCalledCounter, 2, 'Callback ' + |
| 'attributeChanged should be called after call to setAttribute()'); |
| |
| customElement.classList.add('someClass3'); |
| assert_equals(proto.attributeChangedCallbackCalledCounter, 3, 'Callback ' + |
| 'attributeChanged should be called after call to classList.add()'); |
| |
| customElement.id = 'someId'; |
| assert_equals(proto.attributeChangedCallbackCalledCounter, 4, 'Callback ' + |
| 'attributeChanged should be called after changing attribute as property'); |
| }, 'Test attributeChanged callback is called if attribute value is changed. ' + |
| 'The document has browsing context'); |
| |
| |
| testInIFrame('../../resources/x-element.html', function(doc) { |
| var proto = newHTMLElementPrototype(); |
| doc.registerElement('x-element', {prototype: proto}); |
| var customElement = doc.querySelector('#x-element'); |
| |
| customElement.setAttribute('class', 'firstValue'); |
| customElement.setAttribute('class', 'secondValue'); |
| assert_array_equals(proto.attributeChangedCallbackArgs, |
| ['class', 'firstValue', 'secondValue'], |
| 'Unexpected callback attributeChanged arguments after call to setAttribute()'); |
| |
| customElement.classList.add('newestValue'); |
| assert_array_equals(proto.attributeChangedCallbackArgs, |
| ['class', 'secondValue', 'secondValue newestValue'], |
| 'Unexpected callback attributeChanged arguments after call to classList.add()'); |
| |
| customElement.className = 'lastValue'; |
| assert_array_equals(proto.attributeChangedCallbackArgs, |
| ['class', 'secondValue newestValue', 'lastValue'], |
| 'Unexpected callback attributeChanged arguments after changing attribute as property'); |
| }, 'Test attributeChanged callback arguments if attribute value is changed. ' + |
| 'The document has browsing context'); |
| |
| |
| testInIFrame('../../resources/x-element.html', function(doc) { |
| var customElement = doc.querySelector('#x-element'); |
| customElement.setAttribute('class', 'firstValue'); |
| customElement.setAttribute('class', 'secondValue'); |
| |
| var proto = newHTMLElementPrototype(); |
| doc.registerElement('x-element', {prototype: proto}); |
| customElement.setAttribute('class', 'thirdValue'); |
| |
| assert_equals(proto.attributeChangedCallbackCalledCounter, 1, |
| 'Callback attributeChanged should be called'); |
| assert_array_equals(proto.attributeChangedCallbackArgs, |
| ['class', 'secondValue', 'thirdValue'], |
| 'Unexpected callback attributeChanged arguments after setAttribute() call'); |
| }, 'Test attributeChanged callback is not called if custom element is not registered. ' + |
| 'The document has browsing context'); |
| </script> |
| </body> |
| </html> |
