LayoutTests/fast/custom-elements/HTMLElement-constructor.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Custom Elements: HTMLElement must allow subclassing</title>
   5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
   6 <meta name="assert" content="HTMLElement must allow subclassing">
   7 <script src="../../resources/testharness.js"></script>
   8 <script src="../../resources/testharnessreport.js"></script>
   9 <link rel='stylesheet' href='../../resources/testharness.css'>
  10 </head>
  11 <body>
  12 <div id="log"></div>
  13 <script>
  14
  15 test(function () {
  16     class SomeDefinedElement extends HTMLElement {};
  17     document.defineCustomElement('defined-element', SomeDefinedElement);
  18     assert_throws({'name': 'TypeError'}, function () { new HTMLElement('defined-element'); });
  19 }, 'HTMLElement constructor must throw a TypeError when there is no derived class');
  20
  21 test(function () {
  22     class SomeCustomElement extends HTMLElement {};
  23     assert_throws({'name': 'TypeError'}, function () { new SomeCustomElement; },
  24         'Instantiating a custom element without calling defineCustomElement must throw TypeError');
  25
  26     class AnotherCustomElement extends HTMLElement {
  27         constructor() { super('some-element'); }
  28     };
  29     document.defineCustomElement('another-element', AnotherCustomElement);
  30     assert_throws({'name': 'TypeError'}, function () { new AnotherCustomElement; },
  31         'Calling HTMLElement constructor with a mismatching tag name throw TypeError');
  32
  33     class YetAnotherCustomElement extends HTMLElement {
  34         constructor() { super(1); }
  35     };
  36     document.defineCustomElement('yet-another-element', YetAnotherCustomElement);
  37     assert_throws({'name': 'TypeError'}, function () { new YetAnotherCustomElement; },
  38         'Calling HTMLElement constructor with a bad tag name throw TypeError');
  39
  40 }, 'HTMLElement constructor must throw TypeError when custom element is not well defined');
  41
  42 test(function () {
  43     class CustomElementWithInferredTagName extends HTMLElement {};
  44     document.defineCustomElement('inferred-name', CustomElementWithInferredTagName);
  45
  46     var instance = new CustomElementWithInferredTagName;
  47     assert_true(instance instanceof Element, 'A custom element must inherit from Element');
  48     assert_true(instance instanceof Node, 'A custom element must inherit from Node');
  49     assert_equals(instance.localName, 'inferred-name');
  50     assert_equals(instance.nodeName, 'INFERRED-NAME');
  51     assert_equals(instance.namespaceURI, 'http://www.w3.org/1999/xhtml', 'A custom HTML element must use HTML namespace');
  52
  53     document.body.appendChild(instance);
  54     assert_equals(document.body.lastChild, instance,
  55         'document.body.appendChild must be able to insert a custom element');
  56     assert_equals(document.querySelector('inferred-name'), instance,
  57         'document.querySelector must be able to find a custom element by its tag name');
  58
  59 }, 'HTMLElement constructor must infer the tag name from the element interface');
  60
  61 test(function () {
  62     class ElementWithMultipleTagNames extends HTMLElement { };
  63     document.defineCustomElement('custom-element-1', ElementWithMultipleTagNames);
  64     document.defineCustomElement('custom-element-2', ElementWithMultipleTagNames);
  65
  66     var instance1 = new ElementWithMultipleTagNames('custom-element-1');
  67     assert_true(instance1 instanceof ElementWithMultipleTagNames);
  68     assert_equals(instance1.localName, 'custom-element-1');
  69     assert_equals(instance1.nodeName, 'CUSTOM-ELEMENT-1');
  70
  71     var instance2 = new ElementWithMultipleTagNames('custom-element-2');
  72     assert_true(instance2 instanceof ElementWithMultipleTagNames);
  73     assert_equals(instance2.localName, 'custom-element-2');
  74     assert_equals(instance2.nodeName, 'CUSTOM-ELEMENT-2');
  75
  76     assert_throws({'name': 'TypeError'}, function () { new ElementWithMultipleTagNames; },
  77         'Instantiating an element interface associated with multiple tag names without specifying the tag name must throw TypeError');
  78
  79 }, 'HTMLElement constructor must allow associating an element interface with multiple tag names');
  80
  81 test(function () {
  82     class ConcreteCustomElement extends HTMLElement { };
  83     class SubCustomElement extends ConcreteCustomElement { };
  84     document.defineCustomElement('concrete-custom-element', ConcreteCustomElement);
  85     document.defineCustomElement('sub-custom-element', SubCustomElement);
  86
  87     var instance = new SubCustomElement();
  88     assert_true(instance instanceof SubCustomElement);
  89     assert_equals(instance.localName, 'sub-custom-element');
  90     assert_equals(instance.nodeName, 'SUB-CUSTOM-ELEMENT');
  91
  92 }, 'HTMLElement constructor must allow subclassing a custom element');
  93
  94 test(function () {
  95     class AbstractCustomElement extends HTMLElement { };
  96     class ConcreteSubCustomElement extends AbstractCustomElement { };
  97     document.defineCustomElement('concrete-sub-custom-element', ConcreteSubCustomElement);
  98
  99     var instance = new ConcreteSubCustomElement();
 100     assert_true(instance instanceof ConcreteSubCustomElement);
 101     assert_equals(instance.localName, 'concrete-sub-custom-element');
 102     assert_equals(instance.nodeName, 'CONCRETE-SUB-CUSTOM-ELEMENT');
 103
 104 }, 'HTMLElement constructor must allow subclassing an user-defined subclass of HTMLElement');
 105
 106 </script>
 107 </body>
 108 </html>