1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130
|
<!DOCTYPE html>
<title>Custom Elements: [HTMLConstructor] derives prototype from NewTarget</title>
<meta name="author" title="Domenic Denicola" href="mailto:d@domenic.me">
<meta name="help" content="https://html.spec.whatwg.org/multipage/dom.html#htmlconstructor">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../resources/custom-elements-helpers.js"></script>
<body>
<script>
"use strict";
test_with_window(w => {
let beforeDefinition = true;
const proto1 = { "proto": "number one" };
const proto2 = { "proto": "number two" };
function TestElement() {
const o = Reflect.construct(w.HTMLElement, [], new.target);
assert_equals(Object.getPrototypeOf(o), proto2,
"Must use the value returned from new.target.prototype");
assert_not_equals(Object.getPrototypeOf(o), proto1,
"Must not use the prototype stored at definition time");
}
const ElementWithDynamicPrototype = new Proxy(TestElement, {
get: function (target, name) {
if (name == "prototype")
return beforeDefinition ? proto1 : proto2;
return target[name];
}
});
w.customElements.define("test-element", ElementWithDynamicPrototype);
beforeDefinition = false;
new ElementWithDynamicPrototype();
}, "Use NewTarget's prototype, not the one stored at definition time");
test_with_window(w => {
// We have to not throw during define(), but throw during super()
let throws = false;
let err = { name: "prototype throws" };
function TestElement() {
throws = true;
assert_throws_exactly(err, () => {
Reflect.construct(w.HTMLElement, [], new.target);
});
}
const ElementWithDynamicPrototype = new Proxy(TestElement, {
get: function (target, name) {
if (throws && name == "prototype")
throw err;
return target[name];
}
});
w.customElements.define("test-element", ElementWithDynamicPrototype);
new ElementWithDynamicPrototype();
}, "Rethrow any exceptions thrown while getting the prototype");
[null, undefined, 5, "string"].forEach(function (notAnObject) {
test_with_window(w => {
// We have to return an object during define(), but not during super()
let returnNotAnObject = false;
function TestElement() {
const o = Reflect.construct(w.HTMLElement, [], new.target);
assert_equals(Object.getPrototypeOf(new.target), window.Function.prototype);
assert_equals(Object.getPrototypeOf(o), window.HTMLElement.prototype,
"Must use the HTMLElement from the realm of NewTarget");
assert_not_equals(Object.getPrototypeOf(o), w.HTMLElement.prototype,
"Must not use the HTMLElement from the realm of the active function object (w.HTMLElement)");
return o;
}
const ElementWithDynamicPrototype = new Proxy(TestElement, {
get: function (target, name) {
if (name == "prototype")
return returnNotAnObject ? notAnObject : {};
return target[name];
}
});
w.customElements.define("test-element", ElementWithDynamicPrototype);
returnNotAnObject = true;
new ElementWithDynamicPrototype();
}, "If prototype is not object (" + notAnObject + "), derives the fallback from NewTarget's realm (autonomous custom elements)");
test_with_window(w => {
// We have to return an object during define(), but not during super()
let returnNotAnObject = false;
function TestElement() {
const o = Reflect.construct(w.HTMLElement, [], new.target);
assert_equals(Object.getPrototypeOf(new.target), window.Function.prototype);
assert_equals(Object.getPrototypeOf(o), window.HTMLElement.prototype,
"Must use the HTMLElement from the realm of NewTarget");
assert_not_equals(Object.getPrototypeOf(o), w.HTMLElement.prototype,
"Must not use the HTMLElement from the realm of the active function object (w.HTMLElement)");
return o;
}
// Create the proxy in the subframe, which should not affect what our
// prototype ends up as.
const ElementWithDynamicPrototype = new w.Proxy(TestElement, {
get: function (target, name) {
if (name == "prototype")
return returnNotAnObject ? notAnObject : {};
return target[name];
}
});
w.customElements.define("test-element", ElementWithDynamicPrototype);
returnNotAnObject = true;
new ElementWithDynamicPrototype();
}, "If prototype is not object (" + notAnObject + "), derives the fallback from NewTarget's GetFunctionRealm (autonomous custom elements)");
});
</script>
</body>
|