src/third_party/WebKit/LayoutTests/imported/web-platform-tests/custom-elements/instantiating-custom-elements/custom-element-type-local-name-and-is-attribute.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Instantiation of custom element: the custom tag must win over the type extension</title>
   5 <meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
   6 <meta name="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru">
   7 <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">
   8 <link rel="help" href="http://www.w3.org/TR/custom-elements/#instantiating-custom-elements">
   9 <script src="../../../../resources/testharness.js"></script>
  10 <script src="../../../../resources/testharnessreport.js"></script>
  11 <script src="../testcommon.js"></script>
  12 <link rel="stylesheet" href="../../../../resources/testharness.css">
  13 </head>
  14 <body>
  15 <div id="log"></div>
  16 <script>
  17 test(function() {
  18     var doc = newHTMLDocument();
  19     var GeneratedConstructor = doc.registerElement('x-a');
  20     doc.registerElement('x-b');
  21     doc.body.innerHTML = '<x-a id="x-a" is="x-b"></x-a>';
  22     var customElement = doc.querySelector('#x-a');
  23
  24     assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
  25         'Custom element type should be the type, specified in the local name of the element');
  26 }, 'Custom element type must be taken from the local name of the element even ' +
  27     'if IS attribute provided.');
  28
  29
  30 test(function() {
  31     var doc = newHTMLDocument();
  32     doc.registerElement('x-d');
  33     doc.body.innerHTML = '<x-c id="x-c" is="x-d"></x-c>';
  34     var customElement = doc.querySelector('#x-c');
  35
  36     var GeneratedConstructor = doc.registerElement('x-c');
  37     assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
  38         'Custom element type should be the type, specified in the local name of the element');
  39 }, 'Custom element type must be taken from the local name of the element even ' +
  40     'if IS attribute provided. Custom element is unresolved at first');
  41
  42
  43 test(function() {
  44     var doc = newHTMLDocument();
  45     var GeneratedConstructor = doc.registerElement('x-f');
  46     doc.body.innerHTML = '<x-f id="x-f" is="x-e"></x-f>';
  47     var customElement = doc.querySelector('#x-f');
  48     assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
  49         'Custom element type should be the type, specified in local name of the element');
  50
  51     doc.registerElement('x-e');
  52     assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
  53         'Custom element type should be the type, specified in local name of the element');
  54 }, 'Custom element type must be taken from the local name of the element even if IS ' +
  55     'attribute provided. There\'s no definition for the value of IS attribute at first');
  56
  57
  58 test(function() {
  59     var doc = newHTMLDocument();
  60     var GeneratedConstructor = doc.registerElement('x-element');
  61     HTML5_ELEMENTS.forEach(function(tagName) {
  62         var obj = doc.createElement(tagName);
  63         var name = 'x-d-' + tagName;
  64         doc.registerElement(name, {
  65             prototype: Object.create(obj.constructor.prototype),
  66             extends: tagName
  67         });
  68         doc.body.innerHTML = '<x-element id="x-element" is="' + name + '"></x-element>';
  69         var customElement = doc.querySelector('#x-element');
  70         assert_equals(Object.getPrototypeOf(customElement), GeneratedConstructor.prototype,
  71             'Custom element type should be the local name of the custom element');
  72     });
  73 }, 'Custom element type must be taken from the local name of the element even ' +
  74     'if IS attribute provided. IS attribute refers to another custom element type, ' +
  75     'which extends HTML5 elements');
  76
  77
  78 test(function() {
  79     var doc = newHTMLDocument();
  80     doc.registerElement('y-element');
  81
  82     HTML5_ELEMENTS.forEach(function(tagName) {
  83         var obj = doc.createElement(tagName);
  84         var name = 'x-e-' + tagName;
  85         var id = 'x-e-' + tagName;
  86         doc.registerElement(name, {
  87             prototype: Object.create(obj.constructor.prototype),
  88             extends: tagName
  89         });
  90         doc.body.innerHTML = '<' + name + ' id="' + id + '" is="y-element"></' + name + '>';
  91         var customElement = doc.querySelector('#' + id);
  92         // We have <x-e-a is='y-element'>. Custom element type for this will be
  93         // HTMLElement, not x-e-a (for x-e-a there should be <a is='x-e-a'>...)
  94         assert_class_string(customElement, 'HTMLElement',
  95             'Custom element type should be HTMLElement');
  96     });
  97 }, 'Custom element type must be taken from the local name of the custom element even ' +
  98     'if IS attribute provided. The element extends HTML5 elements, IS attribute refers ' +
  99     'to another custom element type.');
 100 </script>
 101 </body>
 102 </html>