diff options
Diffstat (limited to 'testing/web-platform/tests/custom-elements/v0/instantiating')
22 files changed, 1307 insertions, 0 deletions
diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/changing-is-attribute.html b/testing/web-platform/tests/custom-elements/v0/instantiating/changing-is-attribute.html new file mode 100644 index 000000000..fb4338840 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/changing-is-attribute.html @@ -0,0 +1,158 @@ +<!DOCTYPE html> +<html> +<head> +<title>Changing IS attribute of the custom element must not affect this element's custom element type, after element is instantiated</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="After a custom element is instantiated, changing the value of the IS attribute must not affect this element's custom element type"> +<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> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + var GeneratedConstructor = doc.registerElement('x-a'); + var customElement = new GeneratedConstructor(); + doc.registerElement('x-b'); + customElement.setAttribute('is', 'x-b'); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be x-a'); +}, 'Test custom element type, after assigning IS attribute value. ' + + 'Element is created by constructor'); + + +test(function() { + var doc = newHTMLDocument(); + var GeneratedConstructor = doc.registerElement('x-c'); + doc.registerElement('x-d'); + doc.body.innerHTML = '<x-c id="x-c"></x-c>'; + var customElement = doc.querySelector('#x-c'); + customElement.setAttribute('is', 'x-d'); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be x-c'); +}, 'Test custom element type, after assigning IS attribute value. ' + + 'Element is created via innerHTML property'); + + +test(function() { + var doc = newHTMLDocument(); + doc.body.innerHTML = '<x-e id="x-e"></x-e>'; + var customElement = doc.querySelector('#x-e'); + customElement.setAttribute('is', 'x-f'); + var GeneratedConstructor = doc.registerElement('x-e'); + doc.registerElement('x-f'); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be x-e'); +}, 'Test custom element type, after assigning IS attribute value to unresolved element. ' + + 'Element is created via innerHTML property'); + + +testInIFrame('../resources/x-element.html', function(doc) { + var GeneratedConstructor = doc.registerElement('x-element'); + doc.registerElement('y-element'); + var customElement = doc.querySelector('#x-element'); + customElement.setAttribute('is', 'y-element'); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be x-element'); +}, 'Test custom element type, after assigning IS attribute value. ' + + 'Element is defined in loaded HTML document'); + + +testInIFrame('../resources/x-element.html', function(doc) { + var customElement = doc.querySelector('#x-element'); + customElement.setAttribute('is', 'y-element'); + var GeneratedConstructor = doc.registerElement('x-element'); + doc.registerElement('y-element'); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be x-element'); +}, 'Test custom element type, after assigning IS attribute value to unresolved element. ' + + 'Element is defined in loaded HTML document'); + + +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + if (HTML5_DOCUMENT_ELEMENTS.indexOf(tagName) !== -1) { + return; + } + var name = 'y-' + tagName; + var obj = doc.createElement(tagName); + var proto = Object.create(obj.constructor.prototype); + var GeneratedConstructor = doc.registerElement(name, {prototype: proto, extends: tagName}); + if (HTML5_TABLE_ELEMENTS.indexOf(tagName) !== -1) { + doc.body.innerHTML = + '<table>' + + '<' + tagName + ' id="custom-element" is="' + name + '"></' + tagName + '>' + + '</table>'; + } else { + doc.body.innerHTML = + '<' + tagName + ' id="custom-element" is="' + name + '"></' + tagName + '>'; + } + var customElement = doc.querySelector('#custom-element'); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be '+ name); + + var name2 = 'y-a-' + tagName; + doc.registerElement(name2); + customElement.setAttribute('is', name2); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be ' + name); + }); +}, 'Test custom element type after changing IS attribute value. ' + + 'Element is HTML5 element with IS attribute referring to custom element type'); + + +test(function() { + var doc = newHTMLDocument(); + var localName = 'z-a'; + var obj = doc.createElement('a'); + var proto = Object.create(obj.constructor.prototype); + var GeneratedConstructor = doc.registerElement(localName, {prototype: proto, extends: 'a'}); + doc.body.innerHTML = '<a id="custom-element" is="' + localName + '"></a>'; + var customElement = doc.querySelector('#custom-element'); + + HTML5_ELEMENTS.forEach(function(tagName) { + var name = 'z-a-' + tagName; + var htmlElement = doc.createElement(tagName); + var htmlElementProto = Object.create(htmlElement.constructor.prototype); + doc.registerElement(name, {prototype: htmlElementProto, extends: tagName}); + customElement.setAttribute('is', name); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be ' + localName); + }); +}, 'Test custom element type after changing IS attribute value several times. ' + + 'Element is HTML5 element with IS attribute referring to custom element type'); + + +test(function() { + var doc = newHTMLDocument(); + var GeneratedConstructor = doc.registerElement('x-g'); + doc.registerElement('x-h'); + doc.body.innerHTML = '<x-g id="x-g" is="x-h"></x-g>'; + var customElement = doc.querySelector('#x-g'); + customElement.removeAttribute('is'); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be x-g'); +}, 'Test custom element type, after removing IS attribute value. ' + + 'Element is created via innerHTML property'); + + +test(function() { + var doc = newHTMLDocument(); + var obj = doc.createElement('a'); + var proto = Object.create(obj.constructor.prototype); + var GeneratedConstructor = doc.registerElement('x-i', {prototype: proto, extends: 'a'}); + doc.body.innerHTML = '<a id="x-i" is="x-i"></a>'; + var customElement = doc.querySelector('#x-i'); + customElement.removeAttribute('is'); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be x-i'); +}, 'Test custom element type, after removing IS attribute value. ' + + 'Element is HTML5 element with IS attribute referring to custom element type'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-is-attribute.html b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-is-attribute.html new file mode 100644 index 000000000..0e18bf651 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-is-attribute.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<title>Custom element constructor sets value of IS attribute to custom element type, if it is not equal to name</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="If TYPE is not the same as NAME, set the value of ELEMENT's IS attribute to TYPE"> +<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> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + if (HTML5_DOCUMENT_ELEMENTS.indexOf(tagName) !== -1) { + return; + } + var obj = doc.createElement(tagName); + var name = 'x-a-' + tagName; + var proto = Object.create(obj.constructor.prototype); + var GeneratedConstructor = doc.registerElement(name, {prototype: proto, extends: tagName}); + var customElement = new GeneratedConstructor(); + + assert_equals(customElement.getAttribute('is'), name, + 'Value of the IS attribute should be set to type'); + }); +}, 'Test that the constructor of a type extension sets the IS attribute value to the type'); + + +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + if (HTML5_DOCUMENT_ELEMENTS.indexOf(tagName) !== -1) { + return; + } + var name = 'x-b-' + tagName; + var GeneratedConstructor = doc.registerElement(name); + var customElement = new GeneratedConstructor(); + + assert_false(customElement.hasAttribute('is'), + 'IS attribute should not present if local name is the same as type'); + }); +}, 'Test that the constructor of a custom element does not set the IS attribute if local name is the same as type'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-local-name.html b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-local-name.html new file mode 100644 index 000000000..28f6ca33f --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-local-name.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<title>Custom element constructor sets local name to the name from custom element definition</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="Set ELEMENT's local name to NAME"> +<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> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + var GeneratedConstructor = doc.registerElement('x-a'); + var customElement = new GeneratedConstructor(); + assert_equals(customElement.localName, 'x-a', + 'Custom element local name should be equal to the name in custom element definition'); +}, 'Custom element constructor sets local name to the name from custom element definition'); + + +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var obj = doc.createElement(tagName); + var name = 'x-b-' + tagName; + var proto = Object.create(obj.constructor.prototype); + var GeneratedConstructor = doc.registerElement(name, { + prototype: proto, + extends: tagName + }); + var customElement = new GeneratedConstructor(); + + assert_equals(customElement.localName, tagName, + 'Custom element local name should be equal to the name in custom element definition'); + }); +}, 'Custom element constructor sets local name to the name from custom element definition. ' + + 'Test constructor of extended HTML element'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-namespace.html b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-namespace.html new file mode 100644 index 000000000..7278086ac --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-namespace.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<title>Custom element constructor sets local namespace to the namespace from custom element definition</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="Custom element constructor sets custom element namespace to the namespace in custom element definition"> +<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> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + var GeneratedConstructor = doc.registerElement('x-a'); + var customElement = new GeneratedConstructor(); + assert_equals(customElement.namespaceURI, HTML_NAMESPACE, + 'Custom element namespace should be equal to namespace in custom element definition'); +}, 'Custom element constructor sets namespace to the namespace from custom element definition'); + + +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var obj = doc.createElement(tagName); + var name = 'x-b-' + tagName; + var proto = Object.create(obj.constructor.prototype); + var GeneratedConstructor = doc.registerElement(name, { + prototype: proto, + extends: tagName + }); + var customElement = new GeneratedConstructor(); + + assert_equals(customElement.namespaceURI, HTML_NAMESPACE, + 'Custom element namespace should be equal to namespace in custom element definition'); + }); +}, 'Custom element constructor sets namespace to the namespace from custom element definition. ' + + 'Test constructor of extended HTML element'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-node-document.html b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-node-document.html new file mode 100644 index 000000000..3112b36da --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-node-document.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<html> +<head> +<title>Custom element constructor sets owner document to the document, where custom element type is registered</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="Custom element constructor sets custom element node document to the document, where custom element type is registered"> +<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> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + var GeneratedConstructor = doc.registerElement('x-a'); + var customElement = new GeneratedConstructor(); + assert_equals(customElement.ownerDocument, doc, + 'Custom element owner document should be the document, where custom element ' + + 'type is registered'); +}, 'Custom element constructor sets owner document to the document, where custom element ' + + 'type is registered'); + + +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var obj = doc.createElement(tagName); + var name = 'x-b-' + tagName; + var proto = Object.create(obj.constructor.prototype); + var GeneratedConstructor = doc.registerElement(name, { + prototype: proto, + extends: tagName + }); + var customElement = new GeneratedConstructor(); + + assert_equals(customElement.ownerDocument, doc, + 'Custom element owner document should be the document, where custom element ' + + 'type is registered'); + }); +}, 'Custom element constructor sets owner document to the document, where custom element ' + + 'type is registered. Test constructor of extended HTML element'); + + +test(function() { + var doc = newHTMLDocument(); + var sharedRegistryDocument = doc.implementation.createHTMLDocument('Document 2'); + + var name = 'x-c'; + var GeneratedConstructor = doc.registerElement(name); + var customElement = new GeneratedConstructor(); + assert_equals(customElement.ownerDocument, doc, + 'Custom element owner document should be the document, where custom element ' + + 'type is registered'); + + var name2 = 'x-d'; + var GeneratedConstructor2 = sharedRegistryDocument.registerElement(name2); + var customElement2 = new GeneratedConstructor2(); + assert_equals(customElement2.ownerDocument, sharedRegistryDocument, + 'Custom element owner document should be the document, where custom element ' + + 'type is registered'); +}, 'Custom element constructor sets owner document to the document, where custom element ' + + 'type is registered. Test different documents with shared registry'); + + +test(function() { + var doc = newHTMLDocument(); + var sharedRegistryDocument = doc.implementation.createHTMLDocument('Document 2'); + HTML5_ELEMENTS.forEach(function(tagName) { + var obj = doc.createElement(tagName); + var name = 'x-e-' + tagName; + var proto = Object.create(obj.constructor.prototype); + var GeneratedConstructor = doc.registerElement(name, { + prototype: proto, + extends: tagName + }); + var customElement = new GeneratedConstructor(); + assert_equals(customElement.ownerDocument, doc, + 'Custom element owner document should be the document, where custom element ' + + 'type is registered'); + + var obj2 = sharedRegistryDocument.createElement(tagName); + var name2 = 'x-f-' + tagName; + var proto2 = Object.create(obj2.constructor.prototype); + var GeneratedConstructor2 = sharedRegistryDocument.registerElement(name2, { + prototype: proto2, + extends: tagName + }); + var customElement2 = new GeneratedConstructor2(); + assert_equals(customElement2.ownerDocument, sharedRegistryDocument, + 'Custom element owner document should be the document, where custom element ' + + 'type is registered'); + }); +}, 'Custom element constructor sets owner document to the document, where custom element ' + + 'type is registered. Test constructor of extended HTML element for different documents ' + + 'with shared registry'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-prototype.html b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-prototype.html new file mode 100644 index 000000000..0158af511 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-constructor-prototype.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<title>Custom element constructor prototype is the prototype object specified in element definition</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="Custom element constructor prototype is the prototype object specified in element definition"> +<link rel="help" href="http://www.w3.org/TR/custom-elements/#registering-custom-elements"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../testcommon.js"></script> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + var proto = Object.create(SVGElement.prototype); + var GeneratedConstructor = doc.registerElement('x-a', { + prototype: proto, + extends: 'p' + }); + assert_true(GeneratedConstructor.prototype === proto, + 'Custom element constructor must have the prototype specified in registerElement()'); +}, 'If custom element type is registered with prototype, the custom element ' + + 'constructor should have the prototype specified in registerElement() call'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-prototype.html b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-prototype.html new file mode 100644 index 000000000..2b298ea74 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-prototype.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<title>Custom element prototype is the prototype object specified in element definition</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="Custom element prototype is the prototype object specified in element definition"> +<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> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + var proto = Object.create(SVGElement.prototype); + var GeneratedConstructor = doc.registerElement('x-a', { + prototype: proto, + extends: 'p' + }); + var customElement = new GeneratedConstructor(); + + assert_true(Object.getPrototypeOf(customElement) === proto, + 'Custom element instance must have the prototype specified in registerElement()'); +}, 'If custom element type is registered with prototype, the custom element ' + + 'instance should have the prototype specified in registerElement() call'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-type-is-attribute.html b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-type-is-attribute.html new file mode 100644 index 000000000..c18290d0e --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-type-is-attribute.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> +<head> +<title>Instantiation of custom element: custom element type is given as the value of the IS attribute</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="The custom element type is given to a custom element at the time of its instantation in one of the two ways: ... 2. As the value of the IS attribute of the custom element."> +<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> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + if (HTML5_DOCUMENT_ELEMENTS.indexOf(tagName) !== -1) { + return; + } + var obj = doc.createElement(tagName); + var name = 'x-a-' + tagName; + var proto = Object.create(obj.constructor.prototype); + var GeneratedConstructor = doc.registerElement(name, {prototype: proto, extends: tagName}); + + if (HTML5_TABLE_ELEMENTS.indexOf(tagName) !== -1) { + doc.body.innerHTML = + '<table>' + + '<' + tagName + ' id="custom-element" is="' + name + '"></' + tagName + '>' + + '</table>'; + } else { + doc.body.innerHTML = + '<' + tagName + ' id="custom-element" is="' + name + '"></' + tagName + '>'; + } + var customElement = doc.querySelector('#custom-element'); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be the type, specified as value of IS attribute'); + }); +}, 'Instantiation of custom element: custom element type is given as the value of ' + + 'the IS attribute'); + + +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + if (HTML5_DOCUMENT_ELEMENTS.indexOf(tagName) !== -1) { + return; + } + var obj = doc.createElement(tagName); + var name = 'x-b-' + tagName; + if (HTML5_TABLE_ELEMENTS.indexOf(tagName) !== -1) { + doc.body.innerHTML = + '<table>' + + '<' + tagName + ' id="custom-element" is="' + name + '"></' + tagName + '>' + + '</table>'; + } else { + doc.body.innerHTML = + '<' + tagName + ' id="custom-element" is="' + name + '"></' + tagName + '>'; + } + var proto = Object.create(obj.constructor.prototype); + var GeneratedConstructor = doc.registerElement(name, {prototype: proto, extends: tagName}); + + var customElement = doc.querySelector('#custom-element'); + + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be the type, specified as value of IS attribute'); + }); +}, 'Instantiation of custom element: custom element type is given as the value ' + + 'of the IS attribute. Custom element is unresolved at first'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-type-local-name-and-is-attribute.html b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-type-local-name-and-is-attribute.html new file mode 100644 index 000000000..c55e2cc25 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-type-local-name-and-is-attribute.html @@ -0,0 +1,101 @@ +<!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> +</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> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-type-local-name.html b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-type-local-name.html new file mode 100644 index 000000000..0f0d46f0a --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/custom-element-type-local-name.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<title>Instantiation of custom element: custom element type is given via the local name of the custom element</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="The custom element type is given to a custom element at the time of its instantation in one of the two ways: 1. As the local name of the custom element."> +<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> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + var GeneratedConstructor = doc.registerElement('x-a'); + doc.body.innerHTML = '<x-a id="x-a"></x-a>'; + var customElement = doc.querySelector('#x-a'); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be the type, specified by the local name of ' + + 'the custom element'); +}, 'Test custom element type, which is given via the local name of the custom element. ' + + 'Custom element created via innerHTML property'); + + +testInIFrame('../resources/x-element.html', function(doc) { + var GeneratedConstructor = doc.registerElement('x-element'); + var xelement = doc.querySelector('#x-element'); + assert_equals(Object.getPrototypeOf(xelement), GeneratedConstructor.prototype, + 'Custom element type should be the type, specified by the local name of ' + + 'the custom element'); +}, 'Test custom element type, which is given via the local name of the custom element. ' + + 'Custom element is defined in loaded HTML document'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-interface-type-is-a-local-name.html b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-interface-type-is-a-local-name.html new file mode 100644 index 000000000..f59d6dcb8 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-interface-type-is-a-local-name.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<title>Document.createElement() and Document.createElementNS() create custom element of type, specified by localName argument</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="If an element definition with matching localName, namespace, and TYPE is not registered with token's document, set TYPE to localName"> +<link rel="help" href="http://www.w3.org/TR/custom-elements/#extensions-to-document-interface-to-instantiate"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + var name1 = 'x-a'; + var name2 = 'x-b'; + var GeneratedConstructor = doc.registerElement(name1); + var customElement = doc.createElement(name1, name2); + + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be the local name of the custom element'); +}, 'Test Document.createElement() creates custom element of type, ' + + 'specified by localName argument, if an element definition with matching localName, ' + + 'namespace, and type is not registered'); + + +test(function() { + var doc = newHTMLDocument(); + var name1 = 'x-c'; + var name2 = 'x-d'; + var GeneratedConstructor = doc.registerElement(name1); + var customElement = doc.createElementNS(HTML_NAMESPACE, name1, name2); + + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be the local name of the custom element'); +}, 'Test Document.createElementNS() creates custom element of type, ' + + 'specified by localName argument, if an element definition with matching ' + + 'localName, namespace, and type is not registered'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-interface-type-is-a-type-extension.html b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-interface-type-is-a-type-extension.html new file mode 100644 index 000000000..3df042676 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-interface-type-is-a-type-extension.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> +<head> +<title>Document.createElement() and Document.createElementNS() create custom element of type, specified by typeExtension argument</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="If an element definition with matching localName, namespace, and TYPE is registered then typeExtension is a TYPE"> +<link rel="help" href="http://www.w3.org/TR/custom-elements/#extensions-to-document-interface-to-instantiate"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + var name1 = 'x-a'; + var GeneratedConstructor1 = doc.registerElement(name1); + var name2 = 'x-b'; + var GeneratedConstructor2 = doc.registerElement(name2); + var customElement = doc.createElement(name1, name2); + + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor2.prototype, + 'Custom element type should be the type extension of the custom element'); +}, 'Test Document.createElement() creates custom element of type, ' + + 'specified by typeExtension argument'); + + +test(function() { + var doc = newHTMLDocument(); + var name1 = 'x-c'; + var GeneratedConstructor1 = doc.registerElement(name1); + var name2 = 'x-d'; + var GeneratedConstructor2 = doc.registerElement(name2); + var customElement = doc.createElementNS(HTML_NAMESPACE, name1, name2); + + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor2.prototype, + 'Custom element type should be the type extension of the custom element'); +}, 'Test Document.createElementNS() creates custom element of type, ' + + 'specified by typeExtension argument'); + + +test(function() { + var doc = newHTMLDocument(); + var name1 = 'x-e'; + var name2 = 'x-f'; + var GeneratedConstructor2 = doc.registerElement(name2); + var customElement = doc.createElement(name1, name2); + + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor2.prototype, + 'Custom element type should be the type extension of the custom element'); +}, 'Test Document.createElement() creates custom element of type, ' + + 'specified by typeExtension argument. Definition for localName is absent'); + + +test(function() { + var doc = newHTMLDocument(); + var name1 = 'x-g'; + var name2 = 'x-h'; + var GeneratedConstructor2 = doc.registerElement(name2); + var customElement = doc.createElementNS(HTML_NAMESPACE, name1, name2); + + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor2.prototype, + 'Custom element type should be the type extension of the custom element'); +}, 'Test Document.createElementNS() creates custom element of type, ' + + 'specified by typeExtension argument. Definition for localName is absent'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-is-attribute.html b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-is-attribute.html new file mode 100644 index 000000000..374ec5922 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-is-attribute.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html> +<head> +<title>Document.createElement() and Document.createElementNS() set IS attribute to type</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="If TYPE is not the same as localName, set the value of ELEMENT's IS attribute to TYPE"> +<link rel="help" href="http://www.w3.org/TR/custom-elements/#extensions-to-document-interface-to-instantiate"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var obj = doc.createElement(tagName); + var name = 'x-a-' + tagName; + var proto = Object.create(obj.constructor.prototype); + doc.registerElement(name, {prototype: proto, extends: tagName}); + var customElement = doc.createElement(tagName, name); + assert_equals(customElement.getAttribute('is'), name, + 'Value of the IS attribute should be set to type by Document.createElement()'); + }); +}, 'Test Document.createElement() sets the element\'s IS attribute value to type, ' + + 'if type is not the same as localName'); + + +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var name = 'x-b-' + tagName; + var customElement = doc.createElement(tagName, name); + assert_equals(customElement.getAttribute('is'), name, + 'Value of the IS attribute should be set to type by Document.createElement()'); + }); +}, 'Test Document.createElement() sets the element\'s IS attribute value to type, ' + + 'if type is not the same as localName and an element definition with matching ' + + 'localName, namespace, and type is not registered'); + + +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var obj = doc.createElement(tagName); + var name = 'x-c-' + tagName; + var proto = Object.create(obj.constructor.prototype); + doc.registerElement(name, {prototype: proto, extends: tagName}); + var customElement = doc.createElementNS(HTML_NAMESPACE, tagName, name); + assert_equals(customElement.getAttribute('is'), name, + 'Value of the IS attribute should be set to type by Document.createElementNS()'); + }); +}, 'Test Document.createElementNS() sets the element\'s IS attribute value to type, ' + + 'if type is not the same as localName'); + + +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var name = 'x-d-' + tagName; + var customElement = doc.createElementNS(HTML_NAMESPACE, tagName, name); + assert_equals(customElement.getAttribute('is'), name, + 'Value of the IS attribute should be set to type by Document.createElementNS()'); + }); +}, 'Test Document.createElementNS() sets the element\'s IS attribute value to type, ' + + 'if type is not the same as localNameand and an element definition with matching ' + + 'localName, namespace, and type is not registered '); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-namespace.html b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-namespace.html new file mode 100644 index 000000000..60d501219 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-namespace.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<html> +<head> +<title>Document.createElement() sets custom element namespace to HTML Namespace</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="Namespace for createElement is HTML Namespace"> +<link rel="help" href="http://www.w3.org/TR/custom-elements/#extensions-to-document-interface-to-instantiate"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + var name = 'x-a'; + doc.registerElement(name); + var customElement = doc.createElement(name); + assert_equals(customElement.namespaceURI, HTML_NAMESPACE, + 'Custom element namespace should be HTML Namespace'); +}, 'Test Document.createElement() sets custom element namespace to HTML Namespace'); + + +test(function() { + var doc = newHTMLDocument(); + var name = 'x-b'; + var customElement = doc.createElement(name); + assert_equals(customElement.namespaceURI, HTML_NAMESPACE, + 'Custom element namespace should be HTML Namespace'); +}, 'Test Document.createElement() sets custom element namespace to HTML Namespace ' + + 'and an element definition with matching localName, namespace, and type is not registered'); + + +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var obj = doc.createElement(tagName); + var name = 'x-c-' + tagName; + var proto = Object.create(obj.constructor.prototype); + doc.registerElement(name, { + prototype: Object.create(proto), + extends: tagName + }); + var customElement = doc.createElement(tagName, name); + assert_equals(customElement.namespaceURI, HTML_NAMESPACE, + 'Custom element namespace for the element extending ' + tagName + + ' should be HTML Namespace'); + }); +}, 'Document.createElement() sets custom element namespace to HTML Namespace. ' + + 'Custom element is extending standard HTML tag'); + + +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var name = 'x-d-' + tagName; + var customElement = doc.createElement(tagName, name); + assert_equals(customElement.namespaceURI, HTML_NAMESPACE, + 'Custom element namespace for the element with tag name ' + tagName + + ' and type name ' + name + ' should be HTML Namespace'); + }); +}, 'Document.createElement() sets custom element namespace to HTML Namespace. ' + + 'Document.createElement() is called with standard HTML tag name and ' + + 'type without registered custom element of such type'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-type-extension-is-a-type.html b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-type-extension-is-a-type.html new file mode 100644 index 000000000..ce7c933e2 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-type-extension-is-a-type.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<title>Document.createElement() and Document.createElementNS() create custom element of type, specified by typeExtension argument</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="Let TYPE be typeExtension, or localName if typeExtension is not present"> +<link rel="help" href="http://www.w3.org/TR/custom-elements/#extensions-to-document-interface-to-instantiate"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var obj = doc.createElement(tagName); + var name = 'x-a-' + tagName; + var proto = Object.create(obj.constructor.prototype); + var GeneratedConstructor = doc.registerElement(name, {prototype: proto, extends: tagName}); + var customElement = doc.createElement(tagName, name); + + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be ' + name); + }); +}, 'Test Document.createElement() creates custom element of type, ' + + 'specified by typeExtension argument'); + + +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var obj = doc.createElement(tagName); + var name = 'x-b-' + tagName; + var proto = Object.create(obj.constructor.prototype); + var GeneratedConstructor = doc.registerElement(name, {prototype: proto, extends: tagName}); + var customElement = doc.createElementNS(HTML_NAMESPACE, tagName, name); + + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be ' + name); + }); +}, 'Test Document.createElementNS() creates custom element of type, ' + + 'specified by typeExtension argument'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-type-extension-unresolved.html b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-type-extension-unresolved.html new file mode 100644 index 000000000..3eaadf312 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-type-extension-unresolved.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<title>Document.createElement() and Document.createElementNS() create custom element of type, specified by localName argument</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="If an element definition with matching localName, namespace, and TYPE is not registered with token's document, set TYPE to localName"> +<link rel="help" href="http://www.w3.org/TR/custom-elements/#extensions-to-document-interface-to-instantiate"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +</head> +<body> +<div id="log"></div> +<script> +test (function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var obj = doc.createElement(tagName); + var name = 'x-a-' + tagName; + var proto = Object.create(obj.constructor.prototype); + var customElement = doc.createElement(tagName, name); + assert_equals(Object.getPrototypeOf(customElement), Object.getPrototypeOf(obj), + 'Unregistered custom element type should be a local name'); + + var GeneratedConstructor = doc.registerElement(name, {prototype: proto, extends: tagName}); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Registered custom element type should be the type extension'); + }); +}, 'If typeExtension is unresolved when createElement called then local name is a type'); + + +test (function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var obj = doc.createElement(tagName); + var name = 'x-b-' + tagName; + var proto = Object.create(obj.constructor.prototype); + var customElement = doc.createElementNS(HTML_NAMESPACE, tagName, name); + assert_equals(Object.getPrototypeOf(customElement), Object.getPrototypeOf(obj), + 'Custom element type should be a local name'); + + var GeneratedConstructor = doc.registerElement(name, {prototype: proto, extends: tagName}); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be the type extension'); + }); +}, 'If typeExtension is unresolved when createElementNS called then local name is a type'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-type-is-a-local-name.html b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-type-is-a-local-name.html new file mode 100644 index 000000000..487b14b9d --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/create-element-type-is-a-local-name.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<title>Document.createElement() and Document.createElementNS() create custom element of type, specified by single localName argument</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="Let TYPE be typeExtension, or localName if typeExtension is not present"> +<link rel="help" href="http://www.w3.org/TR/custom-elements/#extensions-to-document-interface-to-instantiate"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + var name = 'x-a'; + var GeneratedConstructor = doc.registerElement(name); + var customElement = doc.createElement(name); + + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be the local name of the custom element'); +}, 'Test Document.createElement() creates custom element of type, ' + + 'specified by single localName argument'); + + +test(function() { + var doc = newHTMLDocument(); + var name = 'x-b'; + var GeneratedConstructor = doc.registerElement(name); + var customElement = doc.createElementNS(HTML_NAMESPACE, name); + assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype, + 'Custom element type should be the local name of the custom element'); +}, 'Test Document.createElementNS() creates custom element of type, ' + + 'specified by localName argument. Argument typeExtension is not passed'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/created-callback-create-element-ns.html b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/created-callback-create-element-ns.html new file mode 100644 index 000000000..7bf09601c --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/created-callback-create-element-ns.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> +<head> +<title>Document.createElementNS() must enqueue created callback for registered custom element type</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="Document.createElementNS() must enqueue created callback for registered custom element type"> +<link rel="help" href="http://www.w3.org/TR/custom-elements/#extensions-to-document-interface-to-instantiate"> +<link rel="help" href="http://www.w3.org/TR/custom-elements/#types-of-callbacks"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + var proto = newHTMLElementPrototype(); + var name = 'x-a'; + + doc.registerElement(name, {prototype: proto}); + var customElement = doc.createElementNS(HTML_NAMESPACE, name); + assert_equals(proto.createdCallbackCalledCounter, 1, + 'Callback created should be enqueued by Document.createElementNS()'); +}, 'Test Document.createElementNS() without typeExtension argument enqueues created callback'); + + +test(function() { + var doc = newHTMLDocument(); + var proto = newHTMLElementPrototype(); + var name = 'x-b'; + + doc.registerElement(name, {prototype: proto}); + var customElement = doc.createElementNS(HTML_NAMESPACE, name, name); + assert_equals(proto.createdCallbackCalledCounter, 1, + 'Callback created should be enqueued by Document.createElementNS()'); +}, 'Test Document.createElementNS() with typeExtension argument enqueues created callback'); + + +test(function() { + var doc = newHTMLDocument(); + var proto = newHTMLElementPrototype(); + var name = 'x-c'; + var customElement = doc.createElementNS(HTML_NAMESPACE, name); + assert_equals(proto.createdCallbackCalledCounter, 0, + 'Document.createElementNS() should not enqueue created callback ' + + 'for unresolved custom element'); + + doc.registerElement(name, {prototype: proto}); + assert_equals(proto.createdCallbackCalledCounter, 1, + 'Callback created should be called after custom element is registered'); +}, 'Document.createElementNS() should not enqueue created callback ' + + 'for unresolved custom element'); + + +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var obj = doc.createElement(tagName); + var name = 'x-d-' + tagName; + var proto = newCustomElementPrototype(Object.create(obj.constructor.prototype)); + doc.registerElement(name, {prototype: proto, extends: tagName}); + var customElement = doc.createElementNS(HTML_NAMESPACE, tagName, name); + + assert_equals(proto.createdCallbackCalledCounter, 1, + 'Callback created should be enqueued by Document.createElementNS()'); + }); +}, 'Test Document.createElementNS() enqueues created callback for custom elements ' + + 'that are extensions of HTML5 elements'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/created-callback-create-element.html b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/created-callback-create-element.html new file mode 100644 index 000000000..dc05e01e1 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/extensions-to-document-interface/created-callback-create-element.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html> +<head> +<title>Document.createElement() must enqueue created callback for registered custom element type</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="Document.createElement() must enqueue created callback for registered custom element type"> +<link rel="help" href="http://www.w3.org/TR/custom-elements/#extensions-to-document-interface-to-instantiate"> +<link rel="help" href="http://www.w3.org/TR/custom-elements/#types-of-callbacks"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../testcommon.js"></script> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + var proto = newHTMLElementPrototype(); + var name = 'x-a'; + + doc.registerElement(name, {prototype: proto}); + var customElement = doc.createElement(name); + assert_equals(proto.createdCallbackCalledCounter, 1, + 'Callback created should be enqueued by Document.createElement()'); +}, 'Test Document.createElement() without typeExtension argument enqueues created callback'); + + +test(function() { + var doc = newHTMLDocument(); + var proto = newHTMLElementPrototype(); + var name = 'x-b'; + + doc.registerElement(name, {prototype: proto}); + var customElement = doc.createElement(name, name); + assert_equals(proto.createdCallbackCalledCounter, 1, + 'Callback created should be enqueued by Document.createElement()'); +}, 'Test Document.createElement() with typeExtension argument enqueues created callback'); + + +test(function() { + var doc = newHTMLDocument(); + var proto = newHTMLElementPrototype(); + var name = 'x-c'; + var customElement = doc.createElement(name); + assert_equals(proto.createdCallbackCalledCounter, 0, + 'Document.createElement() should not enqueue created callback ' + + 'for unresolved custom element'); + + doc.registerElement(name, {prototype: proto}); + assert_equals(proto.createdCallbackCalledCounter, 1, + 'Callback created should be called after custom element is registered'); +}, 'Document.createElement() should not enqueue created callback ' + + 'for unresolved custom element'); + + +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var obj = doc.createElement(tagName); + var name = 'x-d-' + tagName; + var proto = newCustomElementPrototype(Object.create(obj.constructor.prototype)); + doc.registerElement(name, {prototype: proto, extends: tagName}); + var customElement = doc.createElement(tagName, name); + + assert_equals(proto.createdCallbackCalledCounter, 1, + 'Callback created should be enqueued by Document.createElement()'); + }); +}, 'Test Document.createElement() enqueues created callback for custom elements ' + + 'that are extensions of HTML5 elements'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/non-configurable-constructor-property.html b/testing/web-platform/tests/custom-elements/v0/instantiating/non-configurable-constructor-property.html new file mode 100644 index 000000000..ddb1ff9de --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/non-configurable-constructor-property.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<title>If prototype has a non-configurable property named constructor, Document.registerElement() throws NotSupportedError</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="If PROTOTYPE has a non-configurable property named constructor, throw a NotSupportedError and stop"> +<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> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + var proto = Object.create(HTMLElement.prototype); + Object.defineProperty(proto, 'constructor', {configurable: false}); + assert_throws('NotSupportedError', function() { + doc.registerElement('x-a', {prototype: proto}); + }, 'Exception should be thrown in case of attempt to register element ' + + 'with a non-configurable property named constructor'); +}, 'Test Document.registerElement() throws NotSupportedError ' + + 'if prototype has a non-configurable property named constructor'); + + +test(function() { + var doc = newHTMLDocument(); + var proto = Object.create(HTMLElement.prototype); + Object.defineProperty(proto, 'constructor', {configurable: true}); + try { + doc.registerElement('x-b', {prototype: proto}); + } catch (e) { + assert_unreached('Exception should not be thrown in case of attempt to register ' + + 'element with a configurable property named constructor'); + } +}, 'Test Document.registerElement() accepts prototype with a configurable ' + + 'property named constructor without throwing errors'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/prototype-is-interface-prototype-object.html b/testing/web-platform/tests/custom-elements/v0/instantiating/prototype-is-interface-prototype-object.html new file mode 100644 index 000000000..ad7f454f5 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/prototype-is-interface-prototype-object.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<title>If prototype is already an interface prototype object, Document.registerElement() throws a NotSupportedError</title> +<meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<meta name="assert" content="If PROTOTYPE is already an interface prototype object for any interface object, throw a NotSupportedError and stop"> +<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> +</head> +<body> +<div id="log"></div> +<script> +test(function() { + var doc = newHTMLDocument(); + HTML5_ELEMENTS.forEach(function(tagName) { + var obj = doc.createElement(tagName); + var name = 'x-a-' + tagName; + assert_throws('NotSupportedError', function() { + doc.registerElement(name, {prototype: obj.constructor.prototype}); + }, 'Exception should be thrown in case of attempt to register element ' + + 'if prototype is already an interface prototype object (' + name + ')'); + }); +}, 'Test Document.registerElement() throws NotSupportedError ' + + 'if prototype is already an interface prototype object'); + + +test(function() { + var doc = newHTMLDocument(); + var proto = Object.create(HTMLElement.prototype); + doc.registerElement('x-b', { + prototype: proto + }); + assert_throws('NotSupportedError', function() { + doc.registerElement('x-b', { + prototype: proto + }); + }, 'Exception should be thrown if registring custom element type with already used prototype'); +}, 'Test Document.registerElement() throws NotSupportedError ' + + 'if prototype is already used for another custom element type'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/custom-elements/v0/instantiating/unchanged-attribute.html b/testing/web-platform/tests/custom-elements/v0/instantiating/unchanged-attribute.html new file mode 100644 index 000000000..3baa174cb --- /dev/null +++ b/testing/web-platform/tests/custom-elements/v0/instantiating/unchanged-attribute.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Custom element's type is immutable.</title> +<meta name="author" title="Bon-Yong Lee" href="mailto:bylee78@gmail.com"> +<meta name="assert" content="After a custom element is instantiated, changing the value of the is attribute must not affect this element's custom element type."> +<link rel="help" href="http://w3c.github.io/webcomponents/spec/custom/#instantiating-custom-elements"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<script type="text/javascript"> +test(function() { + var CustomButton = document.registerElement('custom-button', { + prototype: Object.create(HTMLButtonElement.prototype), + extends: 'button' + }); + var customButton = document.createElement('button', 'custom-button'); + + assert_true(customButton instanceof CustomButton, + 'A custom element is of the custom element type after ' + + 'instantiation'); + customButton.setAttribute('is', 'dirty'); + assert_equals('dirty', customButton.getAttribute('is'), + 'An attribute must be changed by method "setAttribute"'); + + assert_true(customButton instanceof CustomButton, + 'A custom element is of the original custom element type even ' + + 'after changing the \'is\' attribute'); +}, 'After a custom element is instantiated, changing the value of the is attribute must not affect this element\'s custom element type.'); +</script> |