chromium/src/third_party/blink/web_tests/custom-elements/spec/define-element.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <title>Custom Elements: defineElement</title>
 <link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#customelementsregistry">
 <meta name="author" title="Dominic Cooney" href="mailto:dominicc@chromium.org">
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
 <script src="resources/custom-elements-helpers.js"></script>
 <body>
 <script>
 // TODO(dominicc): Merge these tests with
 // https://github.com/web-platform-tests/wpt/pull/2940

 'use strict';

 test_with_window((w) => {
   assert_throws_js(w.TypeError, () => {
     w.customElements.define('a-a', 42);
   }, 'defining a number "constructor" should throw a TypeError');
   assert_throws_js(w.TypeError, () => {
     w.customElements.define('a-a', () => {});
   }, 'defining an arrow function "constructor" should throw a TypeError');
   assert_throws_js(w.TypeError, () => {
     w.customElements.define('a-a', { m() {} }.m);
   }, 'defining a concise method "constructor" should throw a TypeError');
 }, 'A "constructor" that is not a constructor');

 test_with_window((w) => {
   // https://html.spec.whatwg.org/multipage/scripting.html#valid-custom-element-name
   let invalid_names = [
     'annotation-xml',
     'color-profile',
     'font-face',
     'font-face-src',
     'font-face-uri',
     'font-face-format',
     'font-face-name',
     'missing-glyph',
     'div', 'p',
     'nothtmlbutnohyphen',
     '-not-initial-a-z', '0not-initial-a-z', 'Not-initial-a-z',
     'intermediate-UPPERCASE-letters',
     'bad-\u00b6', 'bad-\u00b8', 'bad-\u00bf', 'bad-\u00d7', 'bad-\u00f7',
     'bad-\u037e', 'bad-\u037e', 'bad-\u2000', 'bad-\u200e', 'bad-\u203e',
     'bad-\u2041', 'bad-\u206f', 'bad-\u2190', 'bad-\u2bff', 'bad-\u2ff0',
     'bad-\u3000', 'bad-\ud800', 'bad-\uf8ff', 'bad-\ufdd0', 'bad-\ufdef',
     'bad-\ufffe', 'bad-\uffff', 'bad-' + String.fromCodePoint(0xf0000)
   ];
   class X extends w.HTMLElement {}
   invalid_names.forEach((name) => {
     assert_throws_dom('SYNTAX_ERR', w.DOMException, () => {
       w.customElements.define(name, X);
     })
   });
 }, 'Invalid names');

 test_with_window((w) => {
   class X extends w.HTMLElement {}
   class Y extends w.HTMLElement {}
   w.customElements.define('a-a', X);
   assert_throws_dom('NotSupportedError', w.DOMException, () => {
     w.customElements.define('a-a', Y);
   }, 'defining an element with a name that is already defined should throw ' +
      'a NotSupportedError');
 }, 'Duplicate name');

 test_with_window((w) => {
   class Y extends w.HTMLElement {}
   let X = (function () {}).bind({});
   Object.defineProperty(X, 'prototype', {
     get() {
       assert_throws_dom('NotSupportedError', w.DOMException, () => {
         w.customElements.define('a-a', Y);
       }, 'defining an element with a name that is being defined should ' +
          'throw a NotSupportedError');
       return {};
     }
   });
   w.customElements.define('a-a', X);
   assert_equals(w.customElements.get('a-a'), X, 'the first definition should have worked');
 }, 'Duplicate name defined recursively');

 test_with_window((w) => {
   class X extends w.HTMLElement {}
   w.customElements.define('a-a', X);
   assert_throws_dom('NotSupportedError', w.DOMException, () => {
     w.customElements.define('a-b', X);
   }, 'defining an element with a constructor that is already in the ' +
      'registry should throw a NotSupportedError');
 }, 'Reused constructor');

 promise_test((t) => {
   return Promise.all([create_window_in_test(t), create_window_in_test(t)])
   .then(([w1, w2]) => {
     class X extends w2.HTMLElement { };
     w1.customElements.define('first-name', X);
     w2.customElements.define('second-name', X);
     assert_equals(
       new X().localName, 'second-name',
       'the current global object should determine which definition is ' +
       'operative; because X extends w2.HTMLElement, w2 is operative');
   });
 }, 'HTMLElement constructor looks up definitions in the current global-' +
    'reused constructor');

 promise_test((t) => {
   return Promise.all([create_window_in_test(t), create_window_in_test(t)])
   .then(([w1, w2]) => {
     class X extends w2.HTMLElement { };
     w1.customElements.define('x-x', X);
     assert_throws_js(
       w2.TypeError, () => new X(),
       'the current global object (w2) should not find the definition in w1');
   });
 }, 'HTMLElement constructor looks up definitions in the current global');

 test_with_window((w) => {
   let X = (function () {}).bind({});
   Object.defineProperty(X, 'prototype', {
     get() {
       assert_throws_dom('NotSupportedError', w.DOMException, () => {
         w.customElements.define('second-name', X);
       }, 'defining an element with a constructor that is being defined ' +
          'should throw a NotSupportedError');
       return {};
     }
   });
   w.customElements.define('first-name', X);
   assert_equals(w.customElements.get('first-name'), X, 'the first definition should have worked');
 }, 'Reused constructor recursively');

 test_with_window((w) => {
   let X = (function () {}).bind({});
   Object.defineProperty(X, 'prototype', {
     get() {
       assert_throws_dom('NotSupportedError', w.DOMException, () => {
         w.customElements.define('second-name', class extends HTMLElement { });
       }, 'defining an element while element definition is running should ' +
          'throw a NotSupportedError');
       return {};
     }
   });
   w.customElements.define('first-name', X);
   assert_equals(w.customElements.get('first-name'), X,
                 'the first definition should have worked');
 }, 'Define while element definition is running');

 promise_test((t) => {
   return Promise.all([create_window_in_test(t), create_window_in_test(t)])
   .then(([w1, w2]) => {
     let X = (function () {}).bind({});
     class Y extends w2.HTMLElement { };
     Object.defineProperty(X, 'prototype', {
       get() {
         w2.customElements.define('second-name', Y);
         return {};
       }
     });
     w1.customElements.define('first-name', X);
     assert_equals(w1.customElements.get('first-name'), X,
                   'the first definition should have worked');
     assert_equals(w2.customElements.get('second-name'), Y,
                   'the second definition should have worked, too');
   });
 }, 'Define while element definition is running in a separate registry');

 test_with_window((w) => {
   class Y extends w.HTMLElement { };
   class X extends w.HTMLElement {
     constructor() {
       super();
       w.customElements.define('second-name', Y);
     }
   };
   // the element definition flag while first-name is processed should
   // be reset before doing upgrades
   w.customElements.define('first-name', X);
   assert_equals(w.customElements.get('second-name'), Y,
                 'the second definition should have worked');
 }, 'Element definition flag resets before upgrades',
    '<first-name></first-name>');

 test_with_window((w) => {
   assert_throws_js(w.TypeError, () => {
     let not_a_constructor = () => {};
     let invalid_name = 'annotation-xml';
     w.customElements.define(invalid_name, not_a_constructor);
   }, 'defining an element with an invalid name and invalid constructor ' +
      'should throw a TypeError for the constructor and not a SyntaxError');

   class C extends w.HTMLElement {}
   w.customElements.define('a-a', C);
   assert_throws_dom('SYNTAX_ERR', w.DOMException, () => {
     let invalid_name = 'annotation-xml';
     let reused_constructor = C;
     w.customElements.define(invalid_name, reused_constructor);
   }, 'defining an element with an invalid name and a reused constructor ' +
      'should throw a SyntaxError for the name and not a NotSupportedError');
 }, 'Order of checks');

 test_with_window((w) => {
   let doc = w.document;
   doc.body.innerHTML = `
 <a-a id="a">
   <p>
     <a-a id="b"></a-a>
     <a-a id="c"></a-a>
   </p>
   <a-a id="d"></a-a>
 </a-a>`;
   let invocations = [];
   class C extends w.HTMLElement {
     constructor() {
       super();
       invocations.push(this);
     }
   }
   w.customElements.define('a-a', C);
   assert_array_equals(['a', 'b', 'c', 'd'], invocations.map((e) => e.id),
                       'four elements should have been upgraded in doc order');
 }, 'Upgrade: existing elements');

 test_with_window((w) => {
   let doc = w.document;
   let a = doc.createElement('a-a');
   doc.body.appendChild(a);
   assert_equals(w.HTMLElement.prototype, Object.getPrototypeOf(a),
                 'the undefined autonomous element should be a HTMLElement');
   let invocations = [];
   class C extends w.HTMLElement {
     constructor() {
       super();
       assert_equals(C.prototype, Object.getPrototypeOf(a),
                     'the HTMLElement constructor should set the prototype ' +
                     'to the defined prototype');
       invocations.push(this);
     }
   }
   w.customElements.define('a-a', C);
   assert_array_equals([a], invocations,
                       'the constructor should have been invoked for the in-' +
                       'document element');
 }, 'Upgrade: sets prototype of existing elements');

 test_with_window((w) => {
   let doc = w.document;
   var shadow = doc.body.attachShadow({mode: 'open'});
   let a = doc.createElement('a-a');
   shadow.appendChild(a);
   let invocations = [];
   class C extends w.HTMLElement {
     constructor() {
       super();
       invocations.push(this);
     }
   }
   w.customElements.define('a-a', C);
   assert_array_equals([a], invocations,
                       'the constructor should have been invoked once for the ' +
                       'elements in the shadow tree');
 }, 'Upgrade: shadow tree');

 // Final step in Step 14
 // 14. Finally, if the first set of steps threw an exception, then rethrow that exception,
 // and terminate this algorithm.
 test_with_window((w) => {
   class Y extends w.HTMLElement {}
   let X = (function () {}).bind({});
   let exception = { name: 42 };
   Object.defineProperty(X, 'prototype', {
     get() { throw exception; }
   });
   assert_throws_exactly(exception, () => {
     w.customElements.define('a-a', X);
   }, 'should rethrow constructor exception');
   w.customElements.define('a-a', Y);
   assert_equals(w.customElements.get('a-a'), Y, 'the same name can be registered after failure');
 }, 'If an exception is thrown, rethrow that exception and terminate the algorithm');

 // 14.1 Let prototype be Get(constructor, "prototype"). Rethrow any exceptions.
 test_with_window((w) => {
   let X = (function () {}).bind({});
   let exception = {name: 'prototype throws' };
   Object.defineProperty(X, 'prototype', {
     get() { throw exception; }
   });
   assert_throws_exactly(exception, () => {
     w.customElements.define('a-a', X);
   }, 'Exception from Get(constructor, prototype) should be rethrown');
 }, 'Rethrow any exceptions thrown while getting prototype');

 // 14.2 If Type(prototype) is not Object, then throw a TypeError exception.
 test_with_window((w) => {
   function F() {}
   F.prototype = 42;
   assert_throws_js(w.TypeError, () => {
     w.customElements.define('a-a', F);
   }, 'defining an element with a constructor with a prototype that is not an ' +
      'object should throw a TypeError');
 }, 'Retrieved prototype is a non-object');

 // 14.3 Let connectedCallback be Get(prototype, "connectedCallback"). Rethrow any exceptions.
 // 14.5 Let disconnectedCallback be Get(prototype, "disconnectedCallback"). Rethrow any exceptions.
 // 14.7 Let attributeChangedCallback be Get(prototype, "attributeChangedCallback"). Rethrow any exceptions.
 // Note that this test implicitly tests order of callback retrievals.
 // Callbacks are defined in reverse order.
 let callbacks_in_reverse = ['attributeChangedCallback', 'disconnectedCallback', 'connectedCallback'];
 function F_for_callbacks_in_reverse() {};
 callbacks_in_reverse.forEach((callback) => {
   test_with_window((w) => {
     let exception = { name: callback };
     Object.defineProperty(F_for_callbacks_in_reverse.prototype, callback, {
       get() { throw exception; }
     });
     assert_throws_exactly(exception, () => {
       w.customElements.define('a-a', F_for_callbacks_in_reverse);
     }, 'Exception from Get(prototype, callback) should be rethrown');
   }, 'Rethrow any exceptions thrown while retrieving ' + callback);
 });

 // 14.4 If connectedCallback is not undefined, and IsCallable(connectedCallback) is false,
 //      then throw a TypeError exception.
 // 14.6 If disconnectedCallback is not undefined, and IsCallable(disconnectedCallback) is false,
 //      then throw a TypeError exception.
 // 14.9. If attributeChangedCallback is not undefined, then
 //       1. If IsCallable(attributeChangedCallback) is false, then throw a TypeError exception.
 callbacks_in_reverse.forEach((callback) => {
   test_with_window((w) => {
       function F() {}
       Object.defineProperty(F.prototype, callback, {
         get() { return {}; }
       });
       assert_throws_js(w.TypeError, () => {
         w.customElements.define('a-a', F);
       }, 'defining an element with a constructor with a callback that is ' +
        'not undefined and not callable should throw a TypeError');
   }, 'If retrieved callback '+ callback + ' is not undefined and not callable, throw TypeError');
 });

 // 14.9.2 Let observedAttributesIterable be Get(constructor, "observedAttributes").
 //        Rethrow any exceptions.
 test_with_window((w) => {
   let exception = { name: 'observedAttributes throws' };
   class X extends w.HTMLElement{
     constructor() { super(); }
     attributeChangedCallback() {}
     static get observedAttributes() { throw exception; }
   }
   assert_throws_exactly(exception, () => {
     w.customElements.define('a-a', X);
   }, 'Exception from Get(constructor, observedAttributes) should be rethrown');
 }, 'Rethrow any exceptions thrown while getting observedAttributes');

 // 14.9.3 If observedAttributesIterable is not undefined, then set observedAttributes
 //        to the result of converting observedAttributesIterable to a sequence<DOMString>.
 //        Rethrow any exceptions.
 test_with_window((w) => {
   let invocations = [];
   let element = w.document.createElement('a-a');
   element.setAttribute('a', '1');
   element.setAttribute('b', '2');
   element.setAttribute('c', '3');
   let constructor = function () {
     return Reflect.construct(w.HTMLElement, [], constructor);
   };
   constructor.prototype.attributeChangedCallback = function () {
     invocations.push(arguments[0]);
   };
   constructor.observedAttributes = {[Symbol.iterator]:
     function* () {
       yield 'a';
       yield 'c';
     }
   };
   w.customElements.define('a-a', constructor);
   w.document.body.appendChild(element);
   assert_array_equals(invocations, ['a', 'c'], 'attributeChangedCallback should be invoked twice: once for "a" and once for "c"');
 }, 'ObservedAttributes are retrieved from iterators');

 test_with_window((w) => {
   let constructor = function () {};
   constructor.prototype.attributeChangedCallback = function () { };
   constructor.observedAttributes = {[Symbol.iterator]: 1};
   assert_throws_js(w.TypeError, () => {
     w.customElements.define('a-a', constructor);
   }, 'converting value that is not an object should throw TypeError');
 }, 'Converting non-object observedAttributes to sequence<DOMString>');

 test_with_window((w) => {
   class X extends w.HTMLElement{
     constructor() { super(); }
     attributeChangedCallback() {}
     static get observedAttributes() { return new RegExp(); }
   }
   assert_throws_js(w.TypeError, () => {
     w.customElements.define('a-a', X);
   }, 'converting RegExp should throw TypeError');
 }, 'Converting regular expression observedAttributes to sequence<DOMString>');

 test_with_window((w) => {
   let constructor = function () {};
   constructor.prototype.attributeChangedCallback = function () { };
   constructor.observedAttributes = {};
   assert_throws_js(w.TypeError, () => {
     w.customElements.define('a-a', constructor);
   }, 'If iterator method is undefined, it should throw TypeError');
 }, 'Converting observedAttributes without iterator method to sequence<DOMString>');

 // 14.9.2 test Get(constructor, observedAttributes) does not throw if
 // attributeChangedCallback is undefined.
 test_with_window((w) => {
   let observedAttributes_invoked = false;
   let X = (function () {}).bind({});
   Object.defineProperty(X, 'observedAttributes', {
     get() { observedAttributes_invoked = true; }
   });
   assert_false( observedAttributes_invoked, 'Get(constructor, observedAttributes) should not be invoked');
 }, 'Get(constructor, observedAttributes) should not execute if ' +
    'attributeChangedCallback is undefined');

 test_with_window((w) => {
   let attributes = {};
   attributes[Symbol.iterator] = function*() {
     throw new TypeError();
   };
   class X extends w.HTMLElement {
     constructor() { super(); }
     attributeChangedCallback() {}
     static get observedAttributes() {
       return attributes;
     }
   }
   assert_throws_js(TypeError, () => {
     w.customElements.define('x-x', X);
   });
 }, 'Throwing an exception in observedAttributes');
 </script>
 </body>
	<!DOCTYPE html>
	<title>Custom Elements: defineElement</title>
	<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#customelementsregistry">
	<meta name="author" title="Dominic Cooney" href="mailto:dominicc@chromium.org">
	<script src="../../resources/testharness.js"></script>
	<script src="../../resources/testharnessreport.js"></script>
	<script src="resources/custom-elements-helpers.js"></script>
	<body>
	<script>
	// TODO(dominicc): Merge these tests with
	// https://github.com/web-platform-tests/wpt/pull/2940

	'use strict';

	test_with_window((w) => {
	assert_throws_js(w.TypeError, () => {
	w.customElements.define('a-a', 42);
	}, 'defining a number "constructor" should throw a TypeError');
	assert_throws_js(w.TypeError, () => {
	w.customElements.define('a-a', () => {});
	}, 'defining an arrow function "constructor" should throw a TypeError');
	assert_throws_js(w.TypeError, () => {
	w.customElements.define('a-a', { m() {} }.m);
	}, 'defining a concise method "constructor" should throw a TypeError');
	}, 'A "constructor" that is not a constructor');

	test_with_window((w) => {
	// https://html.spec.whatwg.org/multipage/scripting.html#valid-custom-element-name
	let invalid_names = [
	'annotation-xml',
	'color-profile',
	'font-face',
	'font-face-src',
	'font-face-uri',
	'font-face-format',
	'font-face-name',
	'missing-glyph',
	'div', 'p',
	'nothtmlbutnohyphen',
	'-not-initial-a-z', '0not-initial-a-z', 'Not-initial-a-z',
	'intermediate-UPPERCASE-letters',
	'bad-\u00b6', 'bad-\u00b8', 'bad-\u00bf', 'bad-\u00d7', 'bad-\u00f7',
	'bad-\u037e', 'bad-\u037e', 'bad-\u2000', 'bad-\u200e', 'bad-\u203e',
	'bad-\u2041', 'bad-\u206f', 'bad-\u2190', 'bad-\u2bff', 'bad-\u2ff0',
	'bad-\u3000', 'bad-\ud800', 'bad-\uf8ff', 'bad-\ufdd0', 'bad-\ufdef',
	'bad-\ufffe', 'bad-\uffff', 'bad-' + String.fromCodePoint(0xf0000)
	];
	class X extends w.HTMLElement {}
	invalid_names.forEach((name) => {
	assert_throws_dom('SYNTAX_ERR', w.DOMException, () => {
	w.customElements.define(name, X);
	})
	});
	}, 'Invalid names');

	test_with_window((w) => {
	class X extends w.HTMLElement {}
	class Y extends w.HTMLElement {}
	w.customElements.define('a-a', X);
	assert_throws_dom('NotSupportedError', w.DOMException, () => {
	w.customElements.define('a-a', Y);
	}, 'defining an element with a name that is already defined should throw ' +
	'a NotSupportedError');
	}, 'Duplicate name');

	test_with_window((w) => {
	class Y extends w.HTMLElement {}
	let X = (function () {}).bind({});
	Object.defineProperty(X, 'prototype', {
	get() {
	assert_throws_dom('NotSupportedError', w.DOMException, () => {
	w.customElements.define('a-a', Y);
	}, 'defining an element with a name that is being defined should ' +
	'throw a NotSupportedError');
	return {};
	}
	});
	w.customElements.define('a-a', X);
	assert_equals(w.customElements.get('a-a'), X, 'the first definition should have worked');
	}, 'Duplicate name defined recursively');

	test_with_window((w) => {
	class X extends w.HTMLElement {}
	w.customElements.define('a-a', X);
	assert_throws_dom('NotSupportedError', w.DOMException, () => {
	w.customElements.define('a-b', X);
	}, 'defining an element with a constructor that is already in the ' +
	'registry should throw a NotSupportedError');
	}, 'Reused constructor');

	promise_test((t) => {
	return Promise.all([create_window_in_test(t), create_window_in_test(t)])
	.then(([w1, w2]) => {
	class X extends w2.HTMLElement { };
	w1.customElements.define('first-name', X);
	w2.customElements.define('second-name', X);
	assert_equals(
	new X().localName, 'second-name',
	'the current global object should determine which definition is ' +
	'operative; because X extends w2.HTMLElement, w2 is operative');
	});
	}, 'HTMLElement constructor looks up definitions in the current global-' +
	'reused constructor');

	promise_test((t) => {
	return Promise.all([create_window_in_test(t), create_window_in_test(t)])
	.then(([w1, w2]) => {
	class X extends w2.HTMLElement { };
	w1.customElements.define('x-x', X);
	assert_throws_js(
	w2.TypeError, () => new X(),
	'the current global object (w2) should not find the definition in w1');
	});
	}, 'HTMLElement constructor looks up definitions in the current global');

	test_with_window((w) => {
	let X = (function () {}).bind({});
	Object.defineProperty(X, 'prototype', {
	get() {
	assert_throws_dom('NotSupportedError', w.DOMException, () => {
	w.customElements.define('second-name', X);
	}, 'defining an element with a constructor that is being defined ' +
	'should throw a NotSupportedError');
	return {};
	}
	});
	w.customElements.define('first-name', X);
	assert_equals(w.customElements.get('first-name'), X, 'the first definition should have worked');
	}, 'Reused constructor recursively');

	test_with_window((w) => {
	let X = (function () {}).bind({});
	Object.defineProperty(X, 'prototype', {
	get() {
	assert_throws_dom('NotSupportedError', w.DOMException, () => {
	w.customElements.define('second-name', class extends HTMLElement { });
	}, 'defining an element while element definition is running should ' +
	'throw a NotSupportedError');
	return {};
	}
	});
	w.customElements.define('first-name', X);
	assert_equals(w.customElements.get('first-name'), X,
	'the first definition should have worked');
	}, 'Define while element definition is running');

	promise_test((t) => {
	return Promise.all([create_window_in_test(t), create_window_in_test(t)])
	.then(([w1, w2]) => {
	let X = (function () {}).bind({});
	class Y extends w2.HTMLElement { };
	Object.defineProperty(X, 'prototype', {
	get() {
	w2.customElements.define('second-name', Y);
	return {};
	}
	});
	w1.customElements.define('first-name', X);
	assert_equals(w1.customElements.get('first-name'), X,
	'the first definition should have worked');
	assert_equals(w2.customElements.get('second-name'), Y,
	'the second definition should have worked, too');
	});
	}, 'Define while element definition is running in a separate registry');

	test_with_window((w) => {
	class Y extends w.HTMLElement { };
	class X extends w.HTMLElement {
	constructor() {
	super();
	w.customElements.define('second-name', Y);
	}
	};
	// the element definition flag while first-name is processed should
	// be reset before doing upgrades
	w.customElements.define('first-name', X);
	assert_equals(w.customElements.get('second-name'), Y,
	'the second definition should have worked');
	}, 'Element definition flag resets before upgrades',
	'<first-name></first-name>');

	test_with_window((w) => {
	assert_throws_js(w.TypeError, () => {
	let not_a_constructor = () => {};
	let invalid_name = 'annotation-xml';
	w.customElements.define(invalid_name, not_a_constructor);
	}, 'defining an element with an invalid name and invalid constructor ' +
	'should throw a TypeError for the constructor and not a SyntaxError');

	class C extends w.HTMLElement {}
	w.customElements.define('a-a', C);
	assert_throws_dom('SYNTAX_ERR', w.DOMException, () => {
	let invalid_name = 'annotation-xml';
	let reused_constructor = C;
	w.customElements.define(invalid_name, reused_constructor);
	}, 'defining an element with an invalid name and a reused constructor ' +
	'should throw a SyntaxError for the name and not a NotSupportedError');
	}, 'Order of checks');

	test_with_window((w) => {
	let doc = w.document;
	doc.body.innerHTML = `
	<a-a id="a">
	<p>
	<a-a id="b"></a-a>
	<a-a id="c"></a-a>
	</p>
	<a-a id="d"></a-a>
	</a-a>`;
	let invocations = [];
	class C extends w.HTMLElement {
	constructor() {
	super();
	invocations.push(this);
	}
	}
	w.customElements.define('a-a', C);
	assert_array_equals(['a', 'b', 'c', 'd'], invocations.map((e) => e.id),
	'four elements should have been upgraded in doc order');
	}, 'Upgrade: existing elements');

	test_with_window((w) => {
	let doc = w.document;
	let a = doc.createElement('a-a');
	doc.body.appendChild(a);
	assert_equals(w.HTMLElement.prototype, Object.getPrototypeOf(a),
	'the undefined autonomous element should be a HTMLElement');
	let invocations = [];
	class C extends w.HTMLElement {
	constructor() {
	super();
	assert_equals(C.prototype, Object.getPrototypeOf(a),
	'the HTMLElement constructor should set the prototype ' +
	'to the defined prototype');
	invocations.push(this);
	}
	}
	w.customElements.define('a-a', C);
	assert_array_equals([a], invocations,
	'the constructor should have been invoked for the in-' +
	'document element');
	}, 'Upgrade: sets prototype of existing elements');

	test_with_window((w) => {
	let doc = w.document;
	var shadow = doc.body.attachShadow({mode: 'open'});
	let a = doc.createElement('a-a');
	shadow.appendChild(a);
	let invocations = [];
	class C extends w.HTMLElement {
	constructor() {
	super();
	invocations.push(this);
	}
	}
	w.customElements.define('a-a', C);
	assert_array_equals([a], invocations,
	'the constructor should have been invoked once for the ' +
	'elements in the shadow tree');
	}, 'Upgrade: shadow tree');

	// Final step in Step 14
	// 14. Finally, if the first set of steps threw an exception, then rethrow that exception,
	// and terminate this algorithm.
	test_with_window((w) => {
	class Y extends w.HTMLElement {}
	let X = (function () {}).bind({});
	let exception = { name: 42 };
	Object.defineProperty(X, 'prototype', {
	get() { throw exception; }
	});
	assert_throws_exactly(exception, () => {
	w.customElements.define('a-a', X);
	}, 'should rethrow constructor exception');
	w.customElements.define('a-a', Y);
	assert_equals(w.customElements.get('a-a'), Y, 'the same name can be registered after failure');
	}, 'If an exception is thrown, rethrow that exception and terminate the algorithm');

	// 14.1 Let prototype be Get(constructor, "prototype"). Rethrow any exceptions.
	test_with_window((w) => {
	let X = (function () {}).bind({});
	let exception = {name: 'prototype throws' };
	Object.defineProperty(X, 'prototype', {
	get() { throw exception; }
	});
	assert_throws_exactly(exception, () => {
	w.customElements.define('a-a', X);
	}, 'Exception from Get(constructor, prototype) should be rethrown');
	}, 'Rethrow any exceptions thrown while getting prototype');

	// 14.2 If Type(prototype) is not Object, then throw a TypeError exception.
	test_with_window((w) => {
	function F() {}
	F.prototype = 42;
	assert_throws_js(w.TypeError, () => {
	w.customElements.define('a-a', F);
	}, 'defining an element with a constructor with a prototype that is not an ' +
	'object should throw a TypeError');
	}, 'Retrieved prototype is a non-object');

	// 14.3 Let connectedCallback be Get(prototype, "connectedCallback"). Rethrow any exceptions.
	// 14.5 Let disconnectedCallback be Get(prototype, "disconnectedCallback"). Rethrow any exceptions.
	// 14.7 Let attributeChangedCallback be Get(prototype, "attributeChangedCallback"). Rethrow any exceptions.
	// Note that this test implicitly tests order of callback retrievals.
	// Callbacks are defined in reverse order.
	let callbacks_in_reverse = ['attributeChangedCallback', 'disconnectedCallback', 'connectedCallback'];
	function F_for_callbacks_in_reverse() {};
	callbacks_in_reverse.forEach((callback) => {
	test_with_window((w) => {
	let exception = { name: callback };
	Object.defineProperty(F_for_callbacks_in_reverse.prototype, callback, {
	get() { throw exception; }
	});
	assert_throws_exactly(exception, () => {
	w.customElements.define('a-a', F_for_callbacks_in_reverse);
	}, 'Exception from Get(prototype, callback) should be rethrown');
	}, 'Rethrow any exceptions thrown while retrieving ' + callback);
	});

	// 14.4 If connectedCallback is not undefined, and IsCallable(connectedCallback) is false,
	// then throw a TypeError exception.
	// 14.6 If disconnectedCallback is not undefined, and IsCallable(disconnectedCallback) is false,
	// then throw a TypeError exception.
	// 14.9. If attributeChangedCallback is not undefined, then
	// 1. If IsCallable(attributeChangedCallback) is false, then throw a TypeError exception.
	callbacks_in_reverse.forEach((callback) => {
	test_with_window((w) => {
	function F() {}
	Object.defineProperty(F.prototype, callback, {
	get() { return {}; }
	});
	assert_throws_js(w.TypeError, () => {
	w.customElements.define('a-a', F);
	}, 'defining an element with a constructor with a callback that is ' +
	'not undefined and not callable should throw a TypeError');
	}, 'If retrieved callback '+ callback + ' is not undefined and not callable, throw TypeError');
	});

	// 14.9.2 Let observedAttributesIterable be Get(constructor, "observedAttributes").
	// Rethrow any exceptions.
	test_with_window((w) => {
	let exception = { name: 'observedAttributes throws' };
	class X extends w.HTMLElement{
	constructor() { super(); }
	attributeChangedCallback() {}
	static get observedAttributes() { throw exception; }
	}
	assert_throws_exactly(exception, () => {
	w.customElements.define('a-a', X);
	}, 'Exception from Get(constructor, observedAttributes) should be rethrown');
	}, 'Rethrow any exceptions thrown while getting observedAttributes');

	// 14.9.3 If observedAttributesIterable is not undefined, then set observedAttributes
	// to the result of converting observedAttributesIterable to a sequence<DOMString>.
	// Rethrow any exceptions.
	test_with_window((w) => {
	let invocations = [];
	let element = w.document.createElement('a-a');
	element.setAttribute('a', '1');
	element.setAttribute('b', '2');
	element.setAttribute('c', '3');
	let constructor = function () {
	return Reflect.construct(w.HTMLElement, [], constructor);
	};
	constructor.prototype.attributeChangedCallback = function () {
	invocations.push(arguments[0]);
	};
	constructor.observedAttributes = {[Symbol.iterator]:
	function* () {
	yield 'a';
	yield 'c';
	}
	};
	w.customElements.define('a-a', constructor);
	w.document.body.appendChild(element);
	assert_array_equals(invocations, ['a', 'c'], 'attributeChangedCallback should be invoked twice: once for "a" and once for "c"');
	}, 'ObservedAttributes are retrieved from iterators');

	test_with_window((w) => {
	let constructor = function () {};
	constructor.prototype.attributeChangedCallback = function () { };
	constructor.observedAttributes = {[Symbol.iterator]: 1};
	assert_throws_js(w.TypeError, () => {
	w.customElements.define('a-a', constructor);
	}, 'converting value that is not an object should throw TypeError');
	}, 'Converting non-object observedAttributes to sequence<DOMString>');

	test_with_window((w) => {
	class X extends w.HTMLElement{
	constructor() { super(); }
	attributeChangedCallback() {}
	static get observedAttributes() { return new RegExp(); }
	}
	assert_throws_js(w.TypeError, () => {
	w.customElements.define('a-a', X);
	}, 'converting RegExp should throw TypeError');
	}, 'Converting regular expression observedAttributes to sequence<DOMString>');

	test_with_window((w) => {
	let constructor = function () {};
	constructor.prototype.attributeChangedCallback = function () { };
	constructor.observedAttributes = {};
	assert_throws_js(w.TypeError, () => {
	w.customElements.define('a-a', constructor);
	}, 'If iterator method is undefined, it should throw TypeError');
	}, 'Converting observedAttributes without iterator method to sequence<DOMString>');

	// 14.9.2 test Get(constructor, observedAttributes) does not throw if
	// attributeChangedCallback is undefined.
	test_with_window((w) => {
	let observedAttributes_invoked = false;
	let X = (function () {}).bind({});
	Object.defineProperty(X, 'observedAttributes', {
	get() { observedAttributes_invoked = true; }
	});
	assert_false( observedAttributes_invoked, 'Get(constructor, observedAttributes) should not be invoked');
	}, 'Get(constructor, observedAttributes) should not execute if ' +
	'attributeChangedCallback is undefined');

	test_with_window((w) => {
	let attributes = {};
	attributes[Symbol.iterator] = function*() {
	throw new TypeError();
	};
	class X extends w.HTMLElement {
	constructor() { super(); }
	attributeChangedCallback() {}
	static get observedAttributes() {
	return attributes;
	}
	}
	assert_throws_js(TypeError, () => {
	w.customElements.define('x-x', X);
	});
	}, 'Throwing an exception in observedAttributes');
	</script>
	</body>