| <html> |
| <import src="../resources/chai.sky" /> |
| <import src="../resources/mocha.sky" /> |
| <body> |
| <div id="container"></div> |
| <script> |
| describe('document.registerElement()', function() { |
| it('should have basic behaviors', function() { |
| function createRegisterParameters() |
| { |
| return { |
| prototype: Object.create(HTMLElement.prototype, { thisIsPrototype: { value: true } }) |
| }; |
| } |
| |
| var fooConstructor = document.registerElement('x-foo', createRegisterParameters()); |
| assert.equal(typeof fooConstructor, "function"); |
| assert.equal(fooConstructor.prototype.__proto__, HTMLElement.prototype); |
| assert.ok(fooConstructor.prototype.thisIsPrototype); |
| |
| // Bad prototype: prototype is already a built-in interface prototype object |
| assert.throws(function() { |
| document.registerElement("x-bad-a", HTMLElement) |
| }); |
| // Bad prototype: prototype is already a Custom Element interface prototype object |
| assert.throws(function() { |
| document.registerElement("x-bad-b", fooConstructor) |
| }); |
| // Bad prototype: 'constructor' is not configurable |
| var proto = Object.create(HTMLElement.prototype, { |
| constructor: {configurable: false, writable: true} |
| }); |
| assert.throws(function() { |
| document.registerElement("x-bad-c", { prototype: proto }) |
| }); |
| // Call as function |
| assert.throws(function() { |
| fooConstructor() |
| }) |
| |
| // Constructor initiated instantiation |
| var createdFoo = new fooConstructor(); |
| |
| // JS built-in properties |
| assert.equal(createdFoo.__proto__, fooConstructor.prototype); |
| assert.equal(createdFoo.constructor, fooConstructor); |
| |
| // Native getter |
| assert.equal(createdFoo.tagName, "x-foo"); |
| |
| // Native setter |
| createdFoo.textContent = 'Hello'; |
| assert.equal(createdFoo.textContent, "Hello"); |
| |
| // Native method |
| var childDiv = document.createElement('div'); |
| createdFoo.appendChild(childDiv); |
| assert.equal(createdFoo.lastChild, childDiv); |
| |
| // Parser initiated instantiation |
| var container = document.getElementById('container'); |
| container.appendChild(document.createElement("x-foo")); |
| var parsedFoo = container.firstChild; |
| |
| assert.equal(parsedFoo.__proto__, fooConstructor.prototype); |
| assert.equal(parsedFoo.tagName, "x-foo"); |
| |
| // Ensuring the wrapper is retained |
| parsedFoo.someProperty = 'hello'; |
| assert.equal(parsedFoo.someProperty, container.firstChild.someProperty); |
| |
| // Having another constructor |
| var barConstructor = document.registerElement('x-bar', createRegisterParameters()); |
| assert.ok('barConstructor !== fooConstructor'); |
| var createdBar = new barConstructor(); |
| assert.equal(createdBar.tagName, "x-bar"); |
| |
| // Having a subclass |
| var bazConstructor = document.registerElement('x-baz', { prototype: Object.create(fooConstructor.prototype, { thisIsAlsoPrototype: { value: true } }) }); |
| var createdBaz = new bazConstructor(); |
| assert.equal(createdBaz.tagName, "x-baz"); |
| assert.ok(createdBaz.thisIsPrototype); |
| assert.ok(createdBaz.thisIsAlsoPrototype); |
| |
| // With irregular cases |
| var createdUpperBar = document.createElement('X-BAR'); |
| var createdMixedBar = document.createElement('X-Bar'); |
| assert.notEqual(createdUpperBar.constructor, barConstructor); |
| assert.notEqual(createdUpperBar.tagName, "x-bar"); |
| assert.notEqual(createdMixedBar.constructor, barConstructor); |
| assert.notEqual(createdMixedBar.tagName, "x-bar"); |
| |
| // Constructors shouldn't interfere with each other |
| assert.equal((new fooConstructor).tagName, "x-foo"); |
| assert.equal((new barConstructor).tagName, "x-bar"); |
| assert.equal((new bazConstructor).tagName, "x-baz"); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
