diff options
Diffstat (limited to 'testing/web-platform/tests/custom-elements/v0/custom-element-lifecycle/types-of-callbacks/attribute-changed-callback-change-attribute-test.html')
-rw-r--r-- | testing/web-platform/tests/custom-elements/v0/custom-element-lifecycle/types-of-callbacks/attribute-changed-callback-change-attribute-test.html | 229 |
1 files changed, 229 insertions, 0 deletions
diff --git a/testing/web-platform/tests/custom-elements/v0/custom-element-lifecycle/types-of-callbacks/attribute-changed-callback-change-attribute-test.html b/testing/web-platform/tests/custom-elements/v0/custom-element-lifecycle/types-of-callbacks/attribute-changed-callback-change-attribute-test.html new file mode 100644 index 000000000..cd5f3a4b8 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/custom-element-lifecycle/types-of-callbacks/attribute-changed-callback-change-attribute-test.html @@ -0,0 +1,229 @@ +<!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> +</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> |