OLD | NEW |
| (Empty) |
1 <html> | |
2 <link rel="import" href="../resources/chai.html" /> | |
3 <link rel="import" href="../resources/mocha.html" /> | |
4 <body> | |
5 <div id="container"></div> | |
6 <script> | |
7 describe('document.registerElement()', function() { | |
8 it('should have basic behaviors', function() { | |
9 function createRegisterParameters() | |
10 { | |
11 return { | |
12 prototype: Object.create(HTMLElement.prototype, { thisIsPrototype: {
value: true } }) | |
13 }; | |
14 } | |
15 | |
16 var fooConstructor = document.registerElement('x-foo', createRegisterParamet
ers()); | |
17 assert.equal(typeof fooConstructor, "function"); | |
18 assert.equal(fooConstructor.prototype.__proto__, HTMLElement.prototype); | |
19 assert.ok(fooConstructor.prototype.thisIsPrototype); | |
20 | |
21 // Bad prototype: prototype is already a built-in interface prototype object | |
22 assert.throws(function() { | |
23 document.registerElement("x-bad-a", HTMLElement) | |
24 }); | |
25 // Bad prototype: prototype is already a Custom Element interface prototype
object | |
26 assert.throws(function() { | |
27 document.registerElement("x-bad-b", fooConstructor) | |
28 }); | |
29 // Bad prototype: 'constructor' is not configurable | |
30 var proto = Object.create(HTMLElement.prototype, { | |
31 constructor: {configurable: false, writable: true} | |
32 }); | |
33 assert.throws(function() { | |
34 document.registerElement("x-bad-c", { prototype: proto }) | |
35 }); | |
36 // Call as function | |
37 assert.throws(function() { | |
38 fooConstructor() | |
39 }) | |
40 | |
41 // Constructor initiated instantiation | |
42 var createdFoo = new fooConstructor(); | |
43 | |
44 // JS built-in properties | |
45 assert.equal(createdFoo.__proto__, fooConstructor.prototype); | |
46 assert.equal(createdFoo.constructor, fooConstructor); | |
47 | |
48 // Native getter | |
49 assert.equal(createdFoo.tagName, "x-foo"); | |
50 | |
51 // Native setter | |
52 createdFoo.textContent = 'Hello'; | |
53 assert.equal(createdFoo.textContent, "Hello"); | |
54 | |
55 // Native method | |
56 var childDiv = document.createElement('div'); | |
57 createdFoo.appendChild(childDiv); | |
58 assert.equal(createdFoo.lastChild, childDiv); | |
59 | |
60 // Parser initiated instantiation | |
61 var container = document.getElementById('container'); | |
62 container.appendChild(document.createElement("x-foo")); | |
63 var parsedFoo = container.firstChild; | |
64 | |
65 assert.equal(parsedFoo.__proto__, fooConstructor.prototype); | |
66 assert.equal(parsedFoo.tagName, "x-foo"); | |
67 | |
68 // Ensuring the wrapper is retained | |
69 parsedFoo.someProperty = 'hello'; | |
70 assert.equal(parsedFoo.someProperty, container.firstChild.someProperty); | |
71 | |
72 // Having another constructor | |
73 var barConstructor = document.registerElement('x-bar', createRegisterParamet
ers()); | |
74 assert.ok('barConstructor !== fooConstructor'); | |
75 var createdBar = new barConstructor(); | |
76 assert.equal(createdBar.tagName, "x-bar"); | |
77 | |
78 // Having a subclass | |
79 var bazConstructor = document.registerElement('x-baz', { prototype: Object.c
reate(fooConstructor.prototype, { thisIsAlsoPrototype: { value: true } }) }); | |
80 var createdBaz = new bazConstructor(); | |
81 assert.equal(createdBaz.tagName, "x-baz"); | |
82 assert.ok(createdBaz.thisIsPrototype); | |
83 assert.ok(createdBaz.thisIsAlsoPrototype); | |
84 | |
85 // With irregular cases | |
86 var createdUpperBar = document.createElement('X-BAR'); | |
87 var createdMixedBar = document.createElement('X-Bar'); | |
88 assert.notEqual(createdUpperBar.constructor, barConstructor); | |
89 assert.notEqual(createdUpperBar.tagName, "x-bar"); | |
90 assert.notEqual(createdMixedBar.constructor, barConstructor); | |
91 assert.notEqual(createdMixedBar.tagName, "x-bar"); | |
92 | |
93 // Constructors shouldn't interfere with each other | |
94 assert.equal((new fooConstructor).tagName, "x-foo"); | |
95 assert.equal((new barConstructor).tagName, "x-bar"); | |
96 assert.equal((new bazConstructor).tagName, "x-baz"); | |
97 }); | |
98 }); | |
99 </script> | |
100 </body> | |
101 </html> | |
OLD | NEW |