| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script src="spec/resources/custom-elements-helpers.js"></script> |
| <body> |
| <script> |
| 'use strict'; |
| |
| test_with_window((w) => { |
| class X extends w.HTMLElement {} |
| |
| w.customElements.define('new-old', X); |
| assert_throws("NotSupportedError", () => { |
| w.document.registerElement('new-old', {prototype: X.prototype}); |
| }, '"registering" (v0) a name already "defined" should throw'); |
| |
| w.document.registerElement('old-new', { |
| prototype: Object.create(w.HTMLElement.prototype) |
| }); |
| class Y extends w.HTMLElement {} |
| assert_throws("NotSupportedError", () => { |
| w.customElements.define('old-new', Y); |
| }, '"defining" (v1) a name already "registered" (v0) should throw'); |
| }, 'Overlapping old and new-style custom elements are not allowed'); |
| |
| test_with_window((w) => { |
| var A = w.document.registerElement('a-a', { |
| prototype: Object.create(w.HTMLDivElement.prototype), |
| extends: 'div' |
| }); |
| var a = w.document.createElement('div', 'a-a'); |
| |
| assert_true(a instanceof A, |
| 'V0 createElement syntax works with V0 registerElement'); |
| assert_equals(w.document.createElement('div', {is: 'a-a'}).constructor, |
| w.HTMLDivElement, |
| 'V1 createElement syntax does not work with V0 registerElement'); |
| assert_equals(w.document.createElementNS('http://www.w3.org/1999/xhtml', 'div', {is: 'a-a'}).constructor, |
| w.HTMLDivElement, |
| 'V1 createElementNS syntax does not work with V0 registerElement'); |
| |
| class B extends w.HTMLDivElement { |
| constructor() { |
| super(); |
| this.addEventListener("click", () => { |
| console.log("CLICKED B!"); |
| }); |
| } |
| } |
| w.customElements.define('b-b', B, {extends: 'div' }); |
| |
| assert_true(w.document.createElement('div', {is: 'b-b'}) instanceof B, |
| 'V1 createElement syntax works with V1 defined element'); |
| assert_true(w.document.createElement('div', 'b-b') instanceof w.HTMLDivElement, |
| 'V0 createElement syntax does not work with V1 defined element'); |
| }, 'V0 and V1 definition and createElement cannot be used together'); |
| |
| test_with_window((w) => { |
| const element = w.document.createElement('my-element'); |
| assert_true(element.matches(':unresolved'), 'Undefined element should be matched to :unresolved'); |
| assert_false(element.matches(':defined'), 'Undefined element should not be matched to :defined'); |
| |
| class MyElement extends w.HTMLElement {}; |
| w.document.registerElement('my-element', {prototype: MyElement.prototype}); |
| assert_true(element instanceof MyElement, 'Make sure V0-upgraded'); |
| assert_false(element.matches(':unresolved'), 'V0-defined element should not be matched to :unresolved'); |
| assert_true(element.matches(':defined'), 'V0-defined element should be matched to :defined'); |
| |
| const element1 = w.document.createElement('my-element1'); |
| w.customElements.define('my-element1', MyElement); |
| w.customElements.upgrade(element1); |
| assert_true(element1 instanceof MyElement, 'Make sure V1-upgraded'); |
| assert_false(element1.matches(':unresolved'), 'V1-defined element should not be matched to :unresolved'); |
| assert_true(element1.matches(':defined'), 'V1-defined element should be matched to :defined'); |
| |
| const builtin = w.document.createElement('span'); |
| assert_false(builtin.matches(':unresolved'), 'Built-in element should not be matched to :unresolved'); |
| assert_true(builtin.matches(':defined'), 'Built-in element should be matched to :defined'); |
| |
| }, ':unresolved and :defined work with both of V0 and V1 custom elements'); |
| </script> |
