third_party/WebKit/LayoutTests/fast/dom/custom/document-register-basic.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <div id="container"></div>
   8 <script>
   9 description('Testing document.registerElement() basic behaviors.');
  10
  11 if (window.testRunner)
  12     testRunner.dumpAsText();
  13
  14 function createRegisterParameters()
  15 {
  16     return {
  17         prototype: Object.create(HTMLElement.prototype, { thisIsPrototype: { value: true } })
  18     };
  19 }
  20
  21 var fooConstructor = document.registerElement('x-foo', createRegisterParameters());
  22 shouldBe('typeof fooConstructor', '"function"');
  23 shouldBe('fooConstructor.prototype.__proto__', 'HTMLElement.prototype');
  24 shouldBeTrue('fooConstructor.prototype.thisIsPrototype');
  25
  26 // Bad prototype: prototype is already a built-in interface prototype object
  27 shouldThrow('document.registerElement("x-bad-a", HTMLElement)', '"NotSupportedError: Failed to execute \'registerElement\' on \'Document\': Registration failed for type \'x-bad-a\'. The prototype is already in-use as an interface prototype object."');
  28 // Bad prototype: prototype is already a Custom Element interface prototype object
  29 shouldThrow('document.registerElement("x-bad-b", fooConstructor)', '"NotSupportedError: Failed to execute \'registerElement\' on \'Document\': Registration failed for type \'x-bad-b\'. The prototype is already in-use as an interface prototype object."');
  30 // Bad prototype: 'constructor' is not configurable
  31 var proto = Object.create(HTMLElement.prototype, {
  32   constructor: {configurable: false, writable: true}
  33 });
  34 shouldThrow('document.registerElement("x-bad-c", { prototype: proto })', '"NotSupportedError: Failed to execute \'registerElement\' on \'Document\': Registration failed for type \'x-bad-c\'. Prototype constructor property is not configurable."');
  35 // Call as function
  36 shouldThrow('fooConstructor()', '"TypeError: DOM object constructor cannot be called as a function."')
  37
  38 // Constructor initiated instantiation
  39 var createdFoo = new fooConstructor();
  40
  41 // JS built-in properties
  42 shouldBe('createdFoo.__proto__', 'fooConstructor.prototype');
  43 shouldBe('createdFoo.constructor', 'fooConstructor');
  44
  45 // Native getter
  46 shouldBe('createdFoo.tagName', '"X-FOO"');
  47
  48 // Native setter
  49 createdFoo.innerHTML = 'Hello';
  50 shouldBe('createdFoo.textContent', '"Hello"');
  51
  52 // Native method
  53 var childDiv = document.createElement('div');
  54 createdFoo.appendChild(childDiv);
  55 shouldBe('createdFoo.lastChild', 'childDiv');
  56
  57 // Parser initiated instantiation
  58 var container = document.getElementById('container');
  59 container.innerHTML = '<x-foo></x-foo>';
  60 parsedFoo = container.firstChild;
  61
  62 shouldBe('parsedFoo.__proto__', 'fooConstructor.prototype');
  63 shouldBe('parsedFoo.tagName', '"X-FOO"');
  64
  65 // Ensuring the wrapper is retained
  66 parsedFoo.someProperty = 'hello';
  67 shouldBe('parsedFoo.someProperty', 'container.firstChild.someProperty');
  68
  69 // Having another constructor
  70 var barConstructor = document.registerElement('x-bar', createRegisterParameters());
  71 shouldBeTrue('barConstructor !== fooConstructor');
  72 var createdBar = new barConstructor();
  73 shouldBe('createdBar.tagName', '"X-BAR"');
  74
  75 // Having a subclass
  76 var bazConstructor = document.registerElement('x-baz', { prototype: Object.create(fooConstructor.prototype, { thisIsAlsoPrototype: { value: true } }) });
  77 var createdBaz = new bazConstructor();
  78 shouldBe('createdBaz.tagName', '"X-BAZ"');
  79 shouldBeTrue('createdBaz.thisIsPrototype');
  80 shouldBeTrue('createdBaz.thisIsAlsoPrototype');
  81
  82 // With irregular cases
  83 var createdUpperBar = document.createElement('X-BAR');
  84 var createdMixedBar = document.createElement('X-Bar');
  85 shouldBe('createdUpperBar.constructor', 'barConstructor');
  86 shouldBe('createdUpperBar.tagName', '"X-BAR"');
  87 shouldBe('createdMixedBar.constructor', 'barConstructor');
  88 shouldBe('createdMixedBar.tagName', '"X-BAR"');
  89
  90 container.innerHTML = '<X-BAR></X-BAR><X-Bar></X-Bar>';
  91 shouldBe('container.firstChild.constructor', 'barConstructor');
  92 shouldBe('container.firstChild.tagName', '"X-BAR"');
  93 shouldBe('container.lastChild.constructor', 'barConstructor');
  94 shouldBe('container.lastChild.tagName', '"X-BAR"');
  95
  96 // Constructors shouldn't interfere with each other
  97 shouldBe('(new fooConstructor).tagName', '"X-FOO"');
  98 shouldBe('(new barConstructor).tagName', '"X-BAR"');
  99 shouldBe('(new bazConstructor).tagName', '"X-BAZ"');
 100
 101 </script>
 102 </body>
 103 </html>