chromium/src/third_party/blink/web_tests/external/wpt/custom-elements/upgrading/Node-cloneNode.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <title>Custom Elements: Upgrading</title>
 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
 <meta name="assert" content="Node.prototype.cloneNode should upgrade a custom element">
 <link rel="help" href="https://html.spec.whatwg.org/#upgrades">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../resources/custom-elements-helpers.js"></script>
 </head>
 <body>
 <div id="log"></div>
 <script>
 setup({allow_uncaught_exception:true});

 test(function () {
     class MyCustomElement extends HTMLElement {}
     customElements.define('my-custom-element', MyCustomElement);

     var instance = document.createElement('my-custom-element');
     assert_true(instance instanceof HTMLElement);
     assert_true(instance instanceof MyCustomElement);

     var clone = instance.cloneNode(false);
     assert_not_equals(instance, clone);
     assert_true(clone instanceof HTMLElement,
         'A cloned custom element must be an instance of HTMLElement');
     assert_true(clone instanceof MyCustomElement,
         'A cloned custom element must be an instance of the custom element');
 }, 'Node.prototype.cloneNode(false) must be able to clone a custom element');

 test(function () {
     class AutonomousCustomElement extends HTMLElement {};
     class IsCustomElement extends HTMLElement {};

     customElements.define('autonomous-custom-element', AutonomousCustomElement);
     customElements.define('is-custom-element', IsCustomElement);

     var instance = document.createElement('autonomous-custom-element', { is: "is-custom-element"});
     assert_true(instance instanceof HTMLElement);
     assert_true(instance instanceof AutonomousCustomElement);

     var clone = instance.cloneNode(false);
     assert_not_equals(instance, clone);
     assert_true(clone instanceof HTMLElement,
         'A cloned custom element must be an instance of HTMLElement');
     assert_true(clone instanceof AutonomousCustomElement,
         'A cloned custom element must be an instance of the custom element');
 }, 'Node.prototype.cloneNode(false) must be able to clone as a autonomous custom element when it contains is attribute');

 test(function () {
     class MyDiv1 extends HTMLDivElement {};
     class MyDiv2 extends HTMLDivElement {};
     class MyDiv3 extends HTMLDivElement {};
     customElements.define('my-div1', MyDiv1, { extends: 'div' });
     customElements.define('my-div2', MyDiv2, { extends: 'div' });

     let instance = document.createElement('div', { is: 'my-div1'});
     assert_true(instance instanceof MyDiv1);
     instance.setAttribute('is', 'my-div2');
     let clone = instance.cloneNode(false);
     assert_not_equals(instance, clone);
     assert_true(clone instanceof MyDiv1,
         'A cloned custom element must be an instance of the custom element even with an inconsistent "is" attribute');

     let instance3 = document.createElement('div', { is: 'my-div3'});
     assert_false(instance3 instanceof MyDiv3);
     instance3.setAttribute('is', 'my-div2');
     let clone3 = instance3.cloneNode(false);
     assert_not_equals(instance3, clone);
     customElements.define('my-div3', MyDiv3, { extends: 'div' });
     document.body.appendChild(instance3);
     document.body.appendChild(clone3);
     assert_true(instance3 instanceof MyDiv3,
         'An undefined element must be upgraded even with an inconsistent "is" attribute');
     assert_true(clone3 instanceof MyDiv3,
         'A cloned undefined element must be upgraded even with an inconsistent "is" attribute');
 }, 'Node.prototype.cloneNode(false) must be able to clone as a customized built-in element when it has an inconsistent "is" attribute');

 test_with_window(function (contentWindow) {
     var contentDocument = contentWindow.document;
     class MyCustomElement extends contentWindow.HTMLElement {}
     contentWindow.customElements.define('my-custom-element', MyCustomElement);

     var instance = contentDocument.createElement('my-custom-element');
     assert_true(instance instanceof contentWindow.HTMLElement);
     assert_true(instance instanceof MyCustomElement);

     var clone = instance.cloneNode(false);
     assert_not_equals(instance, clone);
     assert_true(clone instanceof contentWindow.HTMLElement,
         'A cloned custom element must be an instance of HTMLElement');
     assert_true(clone instanceof MyCustomElement,
         'A cloned custom element must be an instance of the custom element');
 }, 'Node.prototype.cloneNode(false) must be able to clone a custom element inside an iframe');

 test_with_window(function (contentWindow) {
     var contentDocument = contentWindow.document;
     class MyCustomElement extends contentWindow.HTMLElement { }
     contentWindow.customElements.define('my-custom-element', MyCustomElement);

     var instance = contentDocument.createElement('my-custom-element');
     var container = contentDocument.createElement('div');
     container.appendChild(instance);

     var containerClone = container.cloneNode(true);
     assert_true(containerClone instanceof contentWindow.HTMLDivElement);

     var clone = containerClone.firstChild;
     assert_not_equals(instance, clone);
     assert_true(clone instanceof contentWindow.HTMLElement,
         'A cloned custom element must be an instance of HTMLElement');
     assert_true(clone instanceof MyCustomElement,
         'A cloned custom element must be an instance of the custom element');
 }, 'Node.prototype.cloneNode(true) must be able to clone a descendent custom element');

 test_with_window(function (contentWindow) {
     var parentNodeInConstructor;
     var previousSiblingInConstructor;
     var nextSiblingInConstructor;
     class MyCustomElement extends contentWindow.HTMLElement {
         constructor() {
             super();
             parentNodeInConstructor = this.parentNode;
             previousSiblingInConstructor = this.previousSibling;
             nextSiblingInConstructor = this.nextSibling;
         }
     }
     contentWindow.customElements.define('my-custom-element', MyCustomElement);

     var contentDocument = contentWindow.document;
     var instance = contentDocument.createElement('my-custom-element');
     var siblingBeforeInstance = contentDocument.createElement('b');
     var siblingAfterInstance = contentDocument.createElement('a');
     var container = contentDocument.createElement('div');
     container.appendChild(siblingBeforeInstance);
     container.appendChild(instance);
     container.appendChild(siblingAfterInstance);

     var containerClone = container.cloneNode(true);

     assert_equals(parentNodeInConstructor, containerClone,
         'An upgraded element must have its parentNode set before the custom element constructor is called');
     assert_equals(previousSiblingInConstructor, containerClone.firstChild,
         'An upgraded element must have its previousSibling set before the custom element constructor is called');
     assert_equals(nextSiblingInConstructor, containerClone.lastChild,
         'An upgraded element must have its nextSibling set before the custom element constructor is called');
 }, 'Node.prototype.cloneNode(true) must set parentNode, previousSibling, and nextSibling before upgrading custom elements');

 // The error reporting isn't clear yet when multiple globals involved in custom
 // element, see w3c/webcomponents#635, so using test_with_window is not a good
 // idea here.
 test(function () {
     class MyCustomElement extends HTMLElement {
         constructor(doNotCreateItself) {
             super();
             if (!doNotCreateItself)
                 new MyCustomElement(true);
         }
     }
     customElements.define('my-custom-element-constructed-after-super', MyCustomElement);

     var instance = new MyCustomElement(false);
     var uncaughtError;
     window.onerror = function (message, url, lineNumber, columnNumber, error) { uncaughtError = error; return true; }
     instance.cloneNode(false);
     assert_equals(uncaughtError.name, 'TypeError');
 }, 'HTMLElement constructor must throw an TypeError when the top of the construction stack is marked AlreadyConstructed'
     + ' due to a custom element constructor constructing itself after super() call');

 test(function () {
     class MyCustomElement extends HTMLElement {
         constructor(doNotCreateItself) {
             if (!doNotCreateItself)
                 new MyCustomElement(true);
             super();
         }
     }
     customElements.define('my-custom-element-constructed-before-super', MyCustomElement);

     var instance = new MyCustomElement(false);
     var uncaughtError;
     window.onerror = function (message, url, lineNumber, columnNumber, error) { uncaughtError = error; return true; }
     instance.cloneNode(false);
     assert_equals(uncaughtError.name, 'TypeError');
 }, 'HTMLElement constructor must throw an TypeError when the top of the construction stack is marked AlreadyConstructed'
     + ' due to a custom element constructor constructing itself before super() call');

 test(function () {
     var returnSpan = false;
     class MyCustomElement extends HTMLElement {
         constructor() {
             super();
             if (returnSpan)
                 return document.createElement('span');
         }
     }
     customElements.define('my-custom-element-return-another', MyCustomElement);

     var instance = new MyCustomElement(false);
     returnSpan = true;
     var uncaughtError;
     window.onerror = function (message, url, lineNumber, columnNumber, error) { uncaughtError = error; return true; }
     instance.cloneNode(false);
     assert_equals(uncaughtError.name, 'TypeError');
 }, 'Upgrading a custom element must throw TypeError when the custom element\'s constructor returns another element');

 test(function () {
     var instance = document.createElement('my-custom-element-throw-exception');
     document.body.appendChild(instance);

     var calls = [];
     class MyCustomElement extends HTMLElement {
         constructor() {
             super();
             calls.push(this);
             throw 'bad';
         }
     }

     var uncaughtError;
     window.onerror = function (message, url, lineNumber, columnNumber, error) { uncaughtError = error; return true; }
     customElements.define('my-custom-element-throw-exception', MyCustomElement);
     assert_equals(uncaughtError, 'bad');

     assert_array_equals(calls, [instance]);
     document.body.removeChild(instance);
     document.body.appendChild(instance);
     assert_array_equals(calls, [instance]);
 }, 'Inserting an element must not try to upgrade a custom element when it had already failed to upgrade once');

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Custom Elements: Upgrading</title>
	<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
	<meta name="assert" content="Node.prototype.cloneNode should upgrade a custom element">
	<link rel="help" href="https://html.spec.whatwg.org/#upgrades">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="../resources/custom-elements-helpers.js"></script>
	</head>
	<body>
	<div id="log"></div>
	<script>
	setup({allow_uncaught_exception:true});

	test(function () {
	class MyCustomElement extends HTMLElement {}
	customElements.define('my-custom-element', MyCustomElement);

	var instance = document.createElement('my-custom-element');
	assert_true(instance instanceof HTMLElement);
	assert_true(instance instanceof MyCustomElement);

	var clone = instance.cloneNode(false);
	assert_not_equals(instance, clone);
	assert_true(clone instanceof HTMLElement,
	'A cloned custom element must be an instance of HTMLElement');
	assert_true(clone instanceof MyCustomElement,
	'A cloned custom element must be an instance of the custom element');
	}, 'Node.prototype.cloneNode(false) must be able to clone a custom element');

	test(function () {
	class AutonomousCustomElement extends HTMLElement {};
	class IsCustomElement extends HTMLElement {};

	customElements.define('autonomous-custom-element', AutonomousCustomElement);
	customElements.define('is-custom-element', IsCustomElement);

	var instance = document.createElement('autonomous-custom-element', { is: "is-custom-element"});
	assert_true(instance instanceof HTMLElement);
	assert_true(instance instanceof AutonomousCustomElement);

	var clone = instance.cloneNode(false);
	assert_not_equals(instance, clone);
	assert_true(clone instanceof HTMLElement,
	'A cloned custom element must be an instance of HTMLElement');
	assert_true(clone instanceof AutonomousCustomElement,
	'A cloned custom element must be an instance of the custom element');
	}, 'Node.prototype.cloneNode(false) must be able to clone as a autonomous custom element when it contains is attribute');

	test(function () {
	class MyDiv1 extends HTMLDivElement {};
	class MyDiv2 extends HTMLDivElement {};
	class MyDiv3 extends HTMLDivElement {};
	customElements.define('my-div1', MyDiv1, { extends: 'div' });
	customElements.define('my-div2', MyDiv2, { extends: 'div' });

	let instance = document.createElement('div', { is: 'my-div1'});
	assert_true(instance instanceof MyDiv1);
	instance.setAttribute('is', 'my-div2');
	let clone = instance.cloneNode(false);
	assert_not_equals(instance, clone);
	assert_true(clone instanceof MyDiv1,
	'A cloned custom element must be an instance of the custom element even with an inconsistent "is" attribute');

	let instance3 = document.createElement('div', { is: 'my-div3'});
	assert_false(instance3 instanceof MyDiv3);
	instance3.setAttribute('is', 'my-div2');
	let clone3 = instance3.cloneNode(false);
	assert_not_equals(instance3, clone);
	customElements.define('my-div3', MyDiv3, { extends: 'div' });
	document.body.appendChild(instance3);
	document.body.appendChild(clone3);
	assert_true(instance3 instanceof MyDiv3,
	'An undefined element must be upgraded even with an inconsistent "is" attribute');
	assert_true(clone3 instanceof MyDiv3,
	'A cloned undefined element must be upgraded even with an inconsistent "is" attribute');
	}, 'Node.prototype.cloneNode(false) must be able to clone as a customized built-in element when it has an inconsistent "is" attribute');

	test_with_window(function (contentWindow) {
	var contentDocument = contentWindow.document;
	class MyCustomElement extends contentWindow.HTMLElement {}
	contentWindow.customElements.define('my-custom-element', MyCustomElement);

	var instance = contentDocument.createElement('my-custom-element');
	assert_true(instance instanceof contentWindow.HTMLElement);
	assert_true(instance instanceof MyCustomElement);

	var clone = instance.cloneNode(false);
	assert_not_equals(instance, clone);
	assert_true(clone instanceof contentWindow.HTMLElement,
	'A cloned custom element must be an instance of HTMLElement');
	assert_true(clone instanceof MyCustomElement,
	'A cloned custom element must be an instance of the custom element');
	}, 'Node.prototype.cloneNode(false) must be able to clone a custom element inside an iframe');

	test_with_window(function (contentWindow) {
	var contentDocument = contentWindow.document;
	class MyCustomElement extends contentWindow.HTMLElement { }
	contentWindow.customElements.define('my-custom-element', MyCustomElement);

	var instance = contentDocument.createElement('my-custom-element');
	var container = contentDocument.createElement('div');
	container.appendChild(instance);

	var containerClone = container.cloneNode(true);
	assert_true(containerClone instanceof contentWindow.HTMLDivElement);

	var clone = containerClone.firstChild;
	assert_not_equals(instance, clone);
	assert_true(clone instanceof contentWindow.HTMLElement,
	'A cloned custom element must be an instance of HTMLElement');
	assert_true(clone instanceof MyCustomElement,
	'A cloned custom element must be an instance of the custom element');
	}, 'Node.prototype.cloneNode(true) must be able to clone a descendent custom element');

	test_with_window(function (contentWindow) {
	var parentNodeInConstructor;
	var previousSiblingInConstructor;
	var nextSiblingInConstructor;
	class MyCustomElement extends contentWindow.HTMLElement {
	constructor() {
	super();
	parentNodeInConstructor = this.parentNode;
	previousSiblingInConstructor = this.previousSibling;
	nextSiblingInConstructor = this.nextSibling;
	}
	}
	contentWindow.customElements.define('my-custom-element', MyCustomElement);

	var contentDocument = contentWindow.document;
	var instance = contentDocument.createElement('my-custom-element');
	var siblingBeforeInstance = contentDocument.createElement('b');
	var siblingAfterInstance = contentDocument.createElement('a');
	var container = contentDocument.createElement('div');
	container.appendChild(siblingBeforeInstance);
	container.appendChild(instance);
	container.appendChild(siblingAfterInstance);

	var containerClone = container.cloneNode(true);

	assert_equals(parentNodeInConstructor, containerClone,
	'An upgraded element must have its parentNode set before the custom element constructor is called');
	assert_equals(previousSiblingInConstructor, containerClone.firstChild,
	'An upgraded element must have its previousSibling set before the custom element constructor is called');
	assert_equals(nextSiblingInConstructor, containerClone.lastChild,
	'An upgraded element must have its nextSibling set before the custom element constructor is called');
	}, 'Node.prototype.cloneNode(true) must set parentNode, previousSibling, and nextSibling before upgrading custom elements');

	// The error reporting isn't clear yet when multiple globals involved in custom
	// element, see w3c/webcomponents#635, so using test_with_window is not a good
	// idea here.
	test(function () {
	class MyCustomElement extends HTMLElement {
	constructor(doNotCreateItself) {
	super();
	if (!doNotCreateItself)
	new MyCustomElement(true);
	}
	}
	customElements.define('my-custom-element-constructed-after-super', MyCustomElement);

	var instance = new MyCustomElement(false);
	var uncaughtError;
	window.onerror = function (message, url, lineNumber, columnNumber, error) { uncaughtError = error; return true; }
	instance.cloneNode(false);
	assert_equals(uncaughtError.name, 'TypeError');
	}, 'HTMLElement constructor must throw an TypeError when the top of the construction stack is marked AlreadyConstructed'
	+ ' due to a custom element constructor constructing itself after super() call');

	test(function () {
	class MyCustomElement extends HTMLElement {
	constructor(doNotCreateItself) {
	if (!doNotCreateItself)
	new MyCustomElement(true);
	super();
	}
	}
	customElements.define('my-custom-element-constructed-before-super', MyCustomElement);

	var instance = new MyCustomElement(false);
	var uncaughtError;
	window.onerror = function (message, url, lineNumber, columnNumber, error) { uncaughtError = error; return true; }
	instance.cloneNode(false);
	assert_equals(uncaughtError.name, 'TypeError');
	}, 'HTMLElement constructor must throw an TypeError when the top of the construction stack is marked AlreadyConstructed'
	+ ' due to a custom element constructor constructing itself before super() call');

	test(function () {
	var returnSpan = false;
	class MyCustomElement extends HTMLElement {
	constructor() {
	super();
	if (returnSpan)
	return document.createElement('span');
	}
	}
	customElements.define('my-custom-element-return-another', MyCustomElement);

	var instance = new MyCustomElement(false);
	returnSpan = true;
	var uncaughtError;
	window.onerror = function (message, url, lineNumber, columnNumber, error) { uncaughtError = error; return true; }
	instance.cloneNode(false);
	assert_equals(uncaughtError.name, 'TypeError');
	}, 'Upgrading a custom element must throw TypeError when the custom element\'s constructor returns another element');

	test(function () {
	var instance = document.createElement('my-custom-element-throw-exception');
	document.body.appendChild(instance);

	var calls = [];
	class MyCustomElement extends HTMLElement {
	constructor() {
	super();
	calls.push(this);
	throw 'bad';
	}
	}

	var uncaughtError;
	window.onerror = function (message, url, lineNumber, columnNumber, error) { uncaughtError = error; return true; }
	customElements.define('my-custom-element-throw-exception', MyCustomElement);
	assert_equals(uncaughtError, 'bad');

	assert_array_equals(calls, [instance]);
	document.body.removeChild(instance);
	document.body.appendChild(instance);
	assert_array_equals(calls, [instance]);
	}, 'Inserting an element must not try to upgrade a custom element when it had already failed to upgrade once');

	</script>
	</body>
	</html>