Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(223)

Unified Diff: third_party/WebKit/LayoutTests/imported/wpt/custom-elements/attribute-changed-callback.html

Issue 2376103007: Import wpt@09907a9c4bcee14986431d53e4381384c7c69107 (Closed)
Patch Set: update platform expectations Created 4 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/WebKit/LayoutTests/imported/wpt/custom-elements/attribute-changed-callback.html
diff --git a/third_party/WebKit/LayoutTests/imported/wpt/custom-elements/attribute-changed-callback.html b/third_party/WebKit/LayoutTests/imported/wpt/custom-elements/attribute-changed-callback.html
new file mode 100644
index 0000000000000000000000000000000000000000..9bcc9befb1a96ef1c65de51a5c426457b3ff5570
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/imported/wpt/custom-elements/attribute-changed-callback.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Custom Elements: attributeChangedCallback</title>
+<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
+<meta name="assert" content="attributeChangedCallback must be enqueued whenever custom element's attribute is added, changed or removed">
+<link rel="help" href="https://w3c.github.io/webcomponents/spec/custom/#dfn-attribute-changed-callback">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<div id="log"></div>
+<script>
+
+var argumentList = [];
+class MyCustomElement extends HTMLElement {
+ attributeChangedCallback(name, oldValue, newValue, namespace) {
+ argumentList.push({arguments: arguments, value: this.getAttributeNS(namespace, name)});
+ }
+}
+MyCustomElement.observedAttributes = ['title', 'id', 'r'];
+customElements.define('my-custom-element', MyCustomElement);
+
+test(function () {
+ var instance = document.createElement('my-custom-element');
+ argumentList = [];
+
+ instance.setAttribute('title', 'foo');
+ assert_equals(instance.getAttribute('title'), 'foo');
+ assert_equals(argumentList.length, 1);
+ assert_equals(argumentList[0].value, 'foo');
+ assert_array_equals(argumentList[0].arguments, ['title', null, 'foo', null]);
+
+ instance.removeAttribute('title');
+ assert_equals(instance.getAttribute('title'), null);
+ assert_equals(argumentList.length, 2);
+ assert_equals(argumentList[1].value, null);
+ assert_array_equals(argumentList[1].arguments, ['title', 'foo', null, null]);
+
+}, 'setAttribute and removeAttribute must enqueue and invoke attributeChangedCallback');
+
+test(function () {
+ var instance = document.createElement('my-custom-element');
+ argumentList = [];
+
+ instance.setAttributeNS('http://www.w3.org/2000/svg', 'title', 'hello');
+ assert_equals(instance.getAttribute('title'), 'hello');
+ assert_equals(argumentList.length, 1);
+ assert_equals(argumentList[0].value, 'hello');
+ assert_array_equals(argumentList[0].arguments, ['title', null, 'hello', 'http://www.w3.org/2000/svg']);
+
+ instance.removeAttributeNS('http://www.w3.org/2000/svg', 'title');
+ assert_equals(instance.getAttribute('title'), null);
+ assert_equals(argumentList.length, 2);
+ assert_equals(argumentList[1].value, null);
+ assert_array_equals(argumentList[1].arguments, ['title', 'hello', null, 'http://www.w3.org/2000/svg']);
+
+}, 'setAttributeNS and removeAttributeNS must enqueue and invoke attributeChangedCallback');
+
+test(function () {
+ var instance = document.createElement('my-custom-element');
+ argumentList = [];
+
+ var attr = document.createAttribute('id');
+ attr.value = 'bar';
+ instance.setAttributeNode(attr);
+
+ assert_equals(instance.getAttribute('id'), 'bar');
+ assert_equals(argumentList.length, 1);
+ assert_equals(argumentList[0].value, 'bar');
+ assert_array_equals(argumentList[0].arguments, ['id', null, 'bar', null]);
+
+ instance.removeAttributeNode(attr);
+ assert_equals(instance.getAttribute('id'), null);
+ assert_equals(argumentList.length, 2);
+ assert_equals(argumentList[1].value, null);
+ assert_array_equals(argumentList[1].arguments, ['id', 'bar', null, null]);
+
+}, 'setAttributeNode and removeAttributeNS must enqueue and invoke attributeChangedCallback');
+
+test(function () {
+ var instance = document.createElement('my-custom-element');
+ argumentList = [];
+
+ var attr = document.createAttributeNS('http://www.w3.org/2000/svg', 'r');
+ attr.value = '100';
+ instance.setAttributeNode(attr);
+
+ assert_equals(instance.getAttribute('r'), '100');
+ assert_equals(argumentList.length, 1);
+ assert_equals(argumentList[0].value, '100');
+ assert_array_equals(argumentList[0].arguments, ['r', null, '100', 'http://www.w3.org/2000/svg']);
+
+ instance.removeAttributeNode(attr);
+ assert_equals(instance.getAttribute('r'), null);
+ assert_equals(argumentList.length, 2);
+ assert_equals(argumentList[1].value, null);
+ assert_array_equals(argumentList[1].arguments, ['r', '100', null, 'http://www.w3.org/2000/svg']);
+}, 'setAttributeNode and removeAttributeNS must enqueue and invoke attributeChangedCallback');
+
+test(function () {
+ var callsToOld = [];
+ var callsToNew = [];
+ class CustomElement extends HTMLElement { }
+ CustomElement.prototype.attributeChangedCallback = function () {
+ callsToOld.push(Array.from(arguments));
+ }
+ CustomElement.observedAttributes = ['title'];
+ customElements.define('element-with-mutated-attribute-changed-callback', CustomElement);
+ CustomElement.prototype.attributeChangedCallback = function () {
+ callsToNew.push(Array.from(arguments));
+ }
+
+ var instance = document.createElement('element-with-mutated-attribute-changed-callback');
+ instance.setAttribute('title', 'hi');
+ assert_equals(instance.getAttribute('title'), 'hi');
+ assert_array_equals(callsToNew, []);
+ assert_equals(callsToOld.length, 1);
+ assert_array_equals(callsToOld[0], ['title', null, 'hi', null]);
+}, 'Mutating attributeChangedCallback after calling customElements.define must not affect the callback being invoked');
+
+test(function () {
+ var calls = [];
+ class CustomElement extends HTMLElement {
+ attributeChangedCallback() {
+ calls.push(Array.from(arguments));
+ }
+ }
+ CustomElement.observedAttributes = ['title'];
+ customElements.define('element-not-observing-id-attribute', CustomElement);
+
+ var instance = document.createElement('element-not-observing-id-attribute');
+ instance.setAttribute('title', 'hi');
+ assert_equals(calls.length, 1);
+ assert_array_equals(calls[0], ['title', null, 'hi', null]);
+ instance.setAttribute('id', 'some');
+ assert_equals(calls.length, 1);
+}, 'attributedChangedCallback must not be invoked when the observed attributes does not contain the attribute.');
+
+test(function () {
+ var calls = [];
+ class CustomElement extends HTMLElement { }
+ CustomElement.prototype.attributeChangedCallback = function () {
+ calls.push(Array.from(arguments));
+ }
+ CustomElement.observedAttributes = ['title', 'lang'];
+ customElements.define('element-with-mutated-observed-attributes', CustomElement);
+ CustomElement.observedAttributes = ['title', 'id'];
+
+ var instance = document.createElement('element-with-mutated-observed-attributes');
+ instance.setAttribute('title', 'hi');
+ assert_equals(calls.length, 1);
+ assert_array_equals(calls[0], ['title', null, 'hi', null]);
+
+ instance.setAttribute('id', 'some');
+ assert_equals(calls.length, 1);
+
+ instance.setAttribute('lang', 'en');
+ assert_equals(calls.length, 2);
+ assert_array_equals(calls[0], ['title', null, 'hi', null]);
+ assert_array_equals(calls[1], ['lang', null, 'en', null]);
+}, 'Mutating observedAttributes after calling customElements.define must not affect the set of attributes for which attributedChangedCallback is invoked');
+
+test(function () {
+ var calls = [];
+ class CustomElement extends HTMLElement { }
+ CustomElement.prototype.attributeChangedCallback = function () {
+ calls.push(Array.from(arguments));
+ }
+ CustomElement.observedAttributes = { [Symbol.iterator]: function *() { yield 'lang'; yield 'style'; } };
+ customElements.define('element-with-generator-observed-attributes', CustomElement);
+
+ var instance = document.createElement('element-with-generator-observed-attributes');
+ instance.setAttribute('lang', 'en');
+ assert_equals(calls.length, 1);
+ assert_array_equals(calls[0], ['lang', null, 'en', null]);
+
+ instance.setAttribute('lang', 'ja');
+ assert_equals(calls.length, 2);
+ assert_array_equals(calls[1], ['lang', 'en', 'ja', null]);
+
+ instance.setAttribute('title', 'hello');
+ assert_equals(calls.length, 2);
+
+ instance.setAttribute('style', 'font-size: 2rem');
+ assert_equals(calls.length, 3);
+ assert_array_equals(calls[2], ['style', null, 'font-size: 2rem', null]);
+}, 'attributedChangedCallback must be enqueued for attributes specified in a non-Array iterable observedAttributes');
+
+</script>
+</body>
+</html>

Powered by Google App Engine
This is Rietveld 408576698