third_party/WebKit/LayoutTests/custom-elements/spec/upgrade-element.html - chromium/src - Git at Google

 <!DOCTYPE html>
 <title>Custom Elements: upgrade element</title>
 <link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#concept-upgrade-an-element">
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
 <script src="resources/custom-elements-helpers.js"></script>
 <body>
 <script>

 'use strict'

 // 6. If C non-conformantly uses an API decorated with the [CEReactions] extended attribute,
 // then the reactions enqueued at the beginning of upgrade will execute during this step,
 // before C finishes and control returns to this algorithm.
 test_with_window((w) => {
   let invocations = [];
   let changedCallbackArgs = [];
   let a = w.document.createElement('a-a');
   w.document.body.appendChild(a);
   a.setAttribute('x', '1');
   class X extends w.HTMLElement {
     constructor() {
       super();
       this.setAttribute('y', '2');
       invocations.push(['constructor', this]);
     }
     connectedCallback() { invocations.push(['connected', this]); }
     static get observedAttributes() { return ['x', 'y']; }
     attributeChangedCallback() {
       invocations.push(['attributeChanged', this]);
       changedCallbackArgs.push(arguments);
     }
   }
   w.customElements.define('a-a', X);
   // Unlike calling new, upgrading element with createElement does not set element's state
   // to "custom" during HTMLConstructor. Thus, appending attribute after super()
   // does not enqueue a callback reaction.
   assert_equals(invocations.length, 3);
   assert_equals(changedCallbackArgs.length, 1, 'attributeChangedCallback should only be invoked once');
   assert_array_equals(invocations[0], ['constructor', a], 'constructor should execute first');
   assert_array_equals(invocations[1], ['attributeChanged', a], 'attributeChangedCallback should execute after constructor');
   assert_array_equals(changedCallbackArgs[0], ['x', null, '1', ''], 'attributeChangedCallback should execute for setAttribute outside of the constructor');
   assert_array_equals(invocations[2], ['connected', a], 'connectedCallback should execute after the constrcutor');
 }, 'The constructor non-conformatly uses API decorated with the [CEReactions] when constuctor is invoked during upgrade');

 // Step 6 case when constructor is invoked with new
 test_with_window((w) => {
   let invocations = [];
   let changedCallbackArgs = [];
   class X extends w.HTMLElement {
     constructor() {
       super();
       this.setAttribute('y', '2');
       invocations.push(['constructor', this]);
     }
     connectedCallback() { invocations.push(['connected', this]); }
     static get observedAttributes() { return ['x', 'y']; }
     attributeChangedCallback() {
       invocations.push(['attributeChanged', this]);
       changedCallbackArgs.push(arguments);
     }
   }
   w.customElements.define('a-a', X);
   let a = new X();
   a.setAttribute('x','1');
   assert_equals(invocations.length, 3);
   assert_equals(changedCallbackArgs.length, 2, 'attributeChangedCallback should be invoked twice');
   assert_array_equals(invocations[0], ['attributeChanged', a], 'attributeChangedCallback for "a" should execute before the constructor is finished');
   assert_array_equals(invocations[1], ['constructor', a], 'constructor executes second');
   assert_array_equals(invocations[2], ['attributeChanged', a], 'setAttribute outside of the constructorshould be invoked');
   assert_array_equals(changedCallbackArgs[0], ['y', null, '2', '']);
   assert_array_equals(changedCallbackArgs[1], ['x', null, '1', '']);
 }, 'The constructor non-conformatly uses API decorated with the [CEReactions] when consturctor is invoked with new');


 // 8. If constructResult is an abrupt completion, then return constructResult
 // (i.e., rethrow the exception).
 test_with_window((w) => {
   let error_log = [];
   let doc = w.document;
   doc.body.appendChild(doc.createElement('a-a'));
   w.onerror = function (msg, url, lineNo, columnNo, error) {
     error_log.push(error.name);
     return true;
   };
   class X extends w.HTMLElement {
     constructor() {
       super();
       assert_false(this.matches(':defined'), 'calling super() with non-empty construction stack should not define the element');
       throw { name: 'constructor throws' };
     }
   }
   w.customElements.define('a-a', X);
   assert_array_equals(error_log, ['constructor throws'], 'rethrow any exception thrown from constructor');
 }, 'Upgrading an element with a throwing constructor should rethrow that exception');

 // 9. If SameValue(constructResult.[[value]], element) is false, then throw an
 // "InvalidStateError" DOMException and terminate these steps.
 test_with_window((w) => {
   let error_log = [];
   w.onerror = function (msg, url, lineNo, columnNo, error) {
     error_log.push(error.name);
     return true;
   };
   let a = w.document.createElement('a-a');
   w.document.body.appendChild(a);
   class X extends w.HTMLElement {
     constructor() {
       super();
       return ['aaaa'];
     }
   }
   w.customElements.define('a-a', X);
   assert_array_equals(error_log, ['InvalidStateError'], 'returning object that is different from element should throw "InvalidStateError"');
 }, 'Upgrading an element with constructor that returns different object');
 </script>
 </body>
	<!DOCTYPE html>
	<title>Custom Elements: upgrade element</title>
	<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#concept-upgrade-an-element">
	<script src="../../resources/testharness.js"></script>
	<script src="../../resources/testharnessreport.js"></script>
	<script src="resources/custom-elements-helpers.js"></script>
	<body>
	<script>

	'use strict'

	// 6. If C non-conformantly uses an API decorated with the [CEReactions] extended attribute,
	// then the reactions enqueued at the beginning of upgrade will execute during this step,
	// before C finishes and control returns to this algorithm.
	test_with_window((w) => {
	let invocations = [];
	let changedCallbackArgs = [];
	let a = w.document.createElement('a-a');
	w.document.body.appendChild(a);
	a.setAttribute('x', '1');
	class X extends w.HTMLElement {
	constructor() {
	super();
	this.setAttribute('y', '2');
	invocations.push(['constructor', this]);
	}
	connectedCallback() { invocations.push(['connected', this]); }
	static get observedAttributes() { return ['x', 'y']; }
	attributeChangedCallback() {
	invocations.push(['attributeChanged', this]);
	changedCallbackArgs.push(arguments);
	}
	}
	w.customElements.define('a-a', X);
	// Unlike calling new, upgrading element with createElement does not set element's state
	// to "custom" during HTMLConstructor. Thus, appending attribute after super()
	// does not enqueue a callback reaction.
	assert_equals(invocations.length, 3);
	assert_equals(changedCallbackArgs.length, 1, 'attributeChangedCallback should only be invoked once');
	assert_array_equals(invocations[0], ['constructor', a], 'constructor should execute first');
	assert_array_equals(invocations[1], ['attributeChanged', a], 'attributeChangedCallback should execute after constructor');
	assert_array_equals(changedCallbackArgs[0], ['x', null, '1', ''], 'attributeChangedCallback should execute for setAttribute outside of the constructor');
	assert_array_equals(invocations[2], ['connected', a], 'connectedCallback should execute after the constrcutor');
	}, 'The constructor non-conformatly uses API decorated with the [CEReactions] when constuctor is invoked during upgrade');

	// Step 6 case when constructor is invoked with new
	test_with_window((w) => {
	let invocations = [];
	let changedCallbackArgs = [];
	class X extends w.HTMLElement {
	constructor() {
	super();
	this.setAttribute('y', '2');
	invocations.push(['constructor', this]);
	}
	connectedCallback() { invocations.push(['connected', this]); }
	static get observedAttributes() { return ['x', 'y']; }
	attributeChangedCallback() {
	invocations.push(['attributeChanged', this]);
	changedCallbackArgs.push(arguments);
	}
	}
	w.customElements.define('a-a', X);
	let a = new X();
	a.setAttribute('x','1');
	assert_equals(invocations.length, 3);
	assert_equals(changedCallbackArgs.length, 2, 'attributeChangedCallback should be invoked twice');
	assert_array_equals(invocations[0], ['attributeChanged', a], 'attributeChangedCallback for "a" should execute before the constructor is finished');
	assert_array_equals(invocations[1], ['constructor', a], 'constructor executes second');
	assert_array_equals(invocations[2], ['attributeChanged', a], 'setAttribute outside of the constructorshould be invoked');
	assert_array_equals(changedCallbackArgs[0], ['y', null, '2', '']);
	assert_array_equals(changedCallbackArgs[1], ['x', null, '1', '']);
	}, 'The constructor non-conformatly uses API decorated with the [CEReactions] when consturctor is invoked with new');


	// 8. If constructResult is an abrupt completion, then return constructResult
	// (i.e., rethrow the exception).
	test_with_window((w) => {
	let error_log = [];
	let doc = w.document;
	doc.body.appendChild(doc.createElement('a-a'));
	w.onerror = function (msg, url, lineNo, columnNo, error) {
	error_log.push(error.name);
	return true;
	};
	class X extends w.HTMLElement {
	constructor() {
	super();
	assert_false(this.matches(':defined'), 'calling super() with non-empty construction stack should not define the element');
	throw { name: 'constructor throws' };
	}
	}
	w.customElements.define('a-a', X);
	assert_array_equals(error_log, ['constructor throws'], 'rethrow any exception thrown from constructor');
	}, 'Upgrading an element with a throwing constructor should rethrow that exception');

	// 9. If SameValue(constructResult.[[value]], element) is false, then throw an
	// "InvalidStateError" DOMException and terminate these steps.
	test_with_window((w) => {
	let error_log = [];
	w.onerror = function (msg, url, lineNo, columnNo, error) {
	error_log.push(error.name);
	return true;
	};
	let a = w.document.createElement('a-a');
	w.document.body.appendChild(a);
	class X extends w.HTMLElement {
	constructor() {
	super();
	return ['aaaa'];
	}
	}
	w.customElements.define('a-a', X);
	assert_array_equals(error_log, ['InvalidStateError'], 'returning object that is different from element should throw "InvalidStateError"');
	}, 'Upgrading an element with constructor that returns different object');
	</script>
	</body>