src/third_party/web_platform_tests/custom-elements/instantiating-custom-elements/custom-element-type-local-name-and-is-attribute.html - cobalt - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <title>Instantiation of custom element: the custom tag must win over the type extension</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="If both types of custom element types are provided at the time of element's instantiation, the custom tag must win over the type extension">
 <link rel="help" href="http://www.w3.org/TR/custom-elements/#instantiating-custom-elements">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../testcommon.js"></script>
 <link rel="stylesheet" href="/resources/testharness.css">
 </head>
 <body>
 <div id="log"></div>
 <script>
 test(function() {
     var doc = newHTMLDocument();
     var GeneratedConstructor = doc.registerElement('x-a');
     doc.registerElement('x-b');
     doc.body.innerHTML = '<x-a id="x-a" is="x-b"></x-a>';
     var customElement = doc.querySelector('#x-a');

     assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
         'Custom element type should be the type, specified in the local name of the element');
 }, 'Custom element type must be taken from the local name of the element even ' +
     'if IS attribute provided.');


 test(function() {
     var doc = newHTMLDocument();
     doc.registerElement('x-d');
     doc.body.innerHTML = '<x-c id="x-c" is="x-d"></x-c>';
     var customElement = doc.querySelector('#x-c');

     var GeneratedConstructor = doc.registerElement('x-c');
     assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
         'Custom element type should be the type, specified in the local name of the element');
 }, 'Custom element type must be taken from the local name of the element even ' +
     'if IS attribute provided. Custom element is unresolved at first');


 test(function() {
     var doc = newHTMLDocument();
     var GeneratedConstructor = doc.registerElement('x-f');
     doc.body.innerHTML = '<x-f id="x-f" is="x-e"></x-f>';
     var customElement = doc.querySelector('#x-f');
     assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
         'Custom element type should be the type, specified in local name of the element');

     doc.registerElement('x-e');
     assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
         'Custom element type should be the type, specified in local name of the element');
 }, 'Custom element type must be taken from the local name of the element even if IS ' +
     'attribute provided. There\'s no definition for the value of IS attribute at first');


 test(function() {
     var doc = newHTMLDocument();
     var GeneratedConstructor = doc.registerElement('x-element');
     HTML5_ELEMENTS.forEach(function(tagName) {
         var obj = doc.createElement(tagName);
         var name = 'x-d-' + tagName;
         doc.registerElement(name, {
             prototype: Object.create(obj.constructor.prototype),
             extends: tagName
         });
         doc.body.innerHTML = '<x-element id="x-element" is="' + name + '"></x-element>';
         var customElement = doc.querySelector('#x-element');
         assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
             'Custom element type should be the local name of the custom element');
     });
 }, 'Custom element type must be taken from the local name of the element even ' +
     'if IS attribute provided. IS attribute refers to another custom element type, ' +
     'which extends HTML5 elements');


 test(function() {
     var doc = newHTMLDocument();
     doc.registerElement('y-element');

     HTML5_ELEMENTS.forEach(function(tagName) {
         var obj = doc.createElement(tagName);
         var name = 'x-e-' + tagName;
         var id = 'x-e-' + tagName;
         doc.registerElement(name, {
             prototype: Object.create(obj.constructor.prototype),
             extends: tagName
         });
         doc.body.innerHTML = '<' + name + ' id="' + id + '" is="y-element"></' + name + '>';
         var customElement = doc.querySelector('#' + id);
         // We have <x-e-a is='y-element'>. Custom element type for this will be
         // HTMLElement, not x-e-a (for x-e-a there should be <a is='x-e-a'>...)
         assert_class_string(customElement, 'HTMLElement',
             'Custom element type should be HTMLElement');
     });
 }, 'Custom element type must be taken from the local name of the custom element even ' +
     'if IS attribute provided. The element extends HTML5 elements, IS attribute refers ' +
     'to another custom element type.');
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Instantiation of custom element: the custom tag must win over the type extension</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="If both types of custom element types are provided at the time of element's instantiation, the custom tag must win over the type extension">
	<link rel="help" href="http://www.w3.org/TR/custom-elements/#instantiating-custom-elements">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="../testcommon.js"></script>
	<link rel="stylesheet" href="/resources/testharness.css">
	</head>
	<body>
	<div id="log"></div>
	<script>
	test(function() {
	var doc = newHTMLDocument();
	var GeneratedConstructor = doc.registerElement('x-a');
	doc.registerElement('x-b');
	doc.body.innerHTML = '<x-a id="x-a" is="x-b"></x-a>';
	var customElement = doc.querySelector('#x-a');

	assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
	'Custom element type should be the type, specified in the local name of the element');
	}, 'Custom element type must be taken from the local name of the element even ' +
	'if IS attribute provided.');


	test(function() {
	var doc = newHTMLDocument();
	doc.registerElement('x-d');
	doc.body.innerHTML = '<x-c id="x-c" is="x-d"></x-c>';
	var customElement = doc.querySelector('#x-c');

	var GeneratedConstructor = doc.registerElement('x-c');
	assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
	'Custom element type should be the type, specified in the local name of the element');
	}, 'Custom element type must be taken from the local name of the element even ' +
	'if IS attribute provided. Custom element is unresolved at first');


	test(function() {
	var doc = newHTMLDocument();
	var GeneratedConstructor = doc.registerElement('x-f');
	doc.body.innerHTML = '<x-f id="x-f" is="x-e"></x-f>';
	var customElement = doc.querySelector('#x-f');
	assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
	'Custom element type should be the type, specified in local name of the element');

	doc.registerElement('x-e');
	assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
	'Custom element type should be the type, specified in local name of the element');
	}, 'Custom element type must be taken from the local name of the element even if IS ' +
	'attribute provided. There\'s no definition for the value of IS attribute at first');


	test(function() {
	var doc = newHTMLDocument();
	var GeneratedConstructor = doc.registerElement('x-element');
	HTML5_ELEMENTS.forEach(function(tagName) {
	var obj = doc.createElement(tagName);
	var name = 'x-d-' + tagName;
	doc.registerElement(name, {
	prototype: Object.create(obj.constructor.prototype),
	extends: tagName
	});
	doc.body.innerHTML = '<x-element id="x-element" is="' + name + '"></x-element>';
	var customElement = doc.querySelector('#x-element');
	assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
	'Custom element type should be the local name of the custom element');
	});
	}, 'Custom element type must be taken from the local name of the element even ' +
	'if IS attribute provided. IS attribute refers to another custom element type, ' +
	'which extends HTML5 elements');


	test(function() {
	var doc = newHTMLDocument();
	doc.registerElement('y-element');

	HTML5_ELEMENTS.forEach(function(tagName) {
	var obj = doc.createElement(tagName);
	var name = 'x-e-' + tagName;
	var id = 'x-e-' + tagName;
	doc.registerElement(name, {
	prototype: Object.create(obj.constructor.prototype),
	extends: tagName
	});
	doc.body.innerHTML = '<' + name + ' id="' + id + '" is="y-element"></' + name + '>';
	var customElement = doc.querySelector('#' + id);
	// We have <x-e-a is='y-element'>. Custom element type for this will be
	// HTMLElement, not x-e-a (for x-e-a there should be <a is='x-e-a'>...)
	assert_class_string(customElement, 'HTMLElement',
	'Custom element type should be HTMLElement');
	});
	}, 'Custom element type must be taken from the local name of the custom element even ' +
	'if IS attribute provided. The element extends HTML5 elements, IS attribute refers ' +
	'to another custom element type.');
	</script>
	</body>
	</html>