wuggy/Dactyloidae
wuggy/Dactyloidae
1
0
Fork 0
mirror of https://repo.dactyloidae.xyz/Dactyloidae/UXP.git synced 2026-09-19 14:57:32 +09:00
Code Issues Projects Releases Packages Wiki Activity

Bug 1416999 - Remove document.registerElement

Browse source 
Tag #1375
This commit is contained in:
Matt A. Tobin 2020-04-17 07:07:09 -04:00 • committed by Roy Tam
commit cedff6e214
28 changed files with 82 additions and 879 deletions
Download patch file Download diff file Expand all files Collapse all files

5
dom/tests/mochitest/webcomponents/mochitest.ini
View file

@ -17,12 +17,14 @@ support-files =
htmlconstructor_builtin_tests.js
[test_custom_element_in_shadow.html]
skip-if = true || stylo # disabled - See bug 1390396 and 1293844
[test_custom_element_register_invalid_callbacks.html]
[test_custom_element_throw_on_dynamic_markup_insertion.html]
[test_custom_element_get.html]
[test_custom_element_when_defined.html]
[test_custom_element_uncatchable_exception.html]
skip-if = !debug # TestFunctions only applied in debug builds
[test_custom_element_define.html]
[test_custom_element_define_parser.html]
[test_custom_element_template.html]
[test_nested_content_element.html]
[test_dest_insertion_points.html]
[test_fallback_dest_insertion_points.html]
@ -41,7 +43,6 @@ skip-if = true # disabled - See bug 1390396
[test_event_stopping.html]
[test_template.html]
[test_template_xhtml.html]
[test_template_custom_elements.html]
[test_shadowroot.html]
[test_shadowroot_inert_element.html]
[test_shadowroot_style.html]

26
dom/tests/mochitest/webcomponents/test_custom_element_callback_innerhtml.html
View file

@ -18,23 +18,19 @@ SimpleTest.waitForExplicitFinish();
var connectedCallbackCount = 0;
var p = Object.create(HTMLElement.prototype);
p.createdCallback = function() {
ok(true, "createdCallback called.");
class Foo extends HTMLElement {
connectedCallback() {
ok(true, "connectedCallback should be called when the parser creates an element in the document.");
connectedCallbackCount++;
// connectedCallback should be called twice, once for the element created for innerHTML and
// once for the element created in this document.
if (connectedCallbackCount == 2) {
SimpleTest.finish();
}
}
};
p.connectedCallback = function() {
ok(true, "connectedCallback should be called when the parser creates an element in the document.");
connectedCallbackCount++;
// connectedCallback should be called twice, once for the element created for innerHTML and
// once for the element created in this document.
if (connectedCallbackCount == 2) {
SimpleTest.finish();
}
}
document.registerElement("x-foo", { prototype: p });
customElements.define("x-foo", Foo);
var container = document.getElementById("container");
container.innerHTML = '<x-foo></x-foo>';

69
dom/tests/mochitest/webcomponents/test_custom_element_register_invalid_callbacks.html
View file

@ -1,69 +0,0 @@
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1275835
-->
<head>
<title>Test registering invalid lifecycle callbacks for custom elements.</title>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1275835">Bug 1275835</a>
<iframe id="iframe"></iframe>
<script>
// Use window from iframe to isolate the test.
const testWindow = iframe.contentDocument.defaultView;
// This is for backward compatibility.
// We should do the same checks for the callbacks from v0 spec.
[
'attributeChangedCallback',
].forEach(callback => {
var c = class {};
var p = c.prototype;
// Test getting callback throws exception.
Object.defineProperty(p, callback, {
get() {
const e = new Error('this is rethrown');
e.name = 'rethrown';
throw e;
}
});
SimpleTest.doesThrow(() => {
testWindow.document.registerElement(`test-register-${callback}-rethrown`,
{ prototype: p });
}, `document.registerElement should throw exception if prototype.${callback} throws`);
SimpleTest.doesThrow(() => {
testWindow.customElements.define(`test-define-${callback}-rethrown`, c);
}, `customElements.define should throw exception if constructor.${callback} throws`);
// Test callback is not callable.
[
{ name: 'null', value: null },
{ name: 'object', value: {} },
{ name: 'integer', value: 1 },
].forEach(data => {
var c = class {};
var p = c.prototype;
p[callback] = data.value;
SimpleTest.doesThrow(() => {
testWindow.document.registerElement(`test-register-${callback}-${data.name}`,
{ prototype: p });
}, `document.registerElement should throw exception if ${callback} is ${data.name}`);
SimpleTest.doesThrow(() => {
testWindow.customElements.define(`test-define-${callback}-${data.name}`, c);
}, `customElements.define should throw exception if ${callback} is ${data.name}`);
});
});
</script>
</body>
</html>

47
dom/tests/mochitest/webcomponents/test_document_register_parser.html
View file

@ -1,47 +0,0 @@
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=783129
-->
<head>
<title>Test for document.registerElement for elements created by the parser</title>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
<script>
var extendedButtonProto = Object.create(HTMLButtonElement.prototype);
var buttonCallbackCalled = false;
extendedButtonProto.connectedCallback = function() {
is(buttonCallbackCalled, false, "created callback for x-button should only be called once.");
is(this.tagName, "BUTTON", "Only the <button> element should be upgraded.");
buttonCallbackCalled = true;
};
document.registerElement("x-button", { prototype: extendedButtonProto, extends: "button" });
var divProto = Object.create(HTMLDivElement.prototype);
var divCallbackCalled = false;
divProto.connectedCallback = function() {
is(divCallbackCalled, false, "created callback for x-div should only be called once.");
is(buttonCallbackCalled, true, "crated callback should be called for x-button before x-div.");
is(this.tagName, "X-DIV", "Only the <x-div> element should be upgraded.");
divCallbackCalled = true;
SimpleTest.finish();
};
document.registerElement("x-div", { prototype: divProto });
SimpleTest.waitForExplicitFinish();
</script>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783129">Bug 783129</a>
<button is="x-button"></button><!-- should be upgraded -->
<x-button></x-button><!-- should not be upgraded -->
<span is="x-button"></span><!-- should not be upgraded -->
<div is="x-div"></div><!-- should not be upgraded -->
<x-div></x-div><!-- should be upgraded -->
<script>
</script>
</body>
</html>

46
dom/tests/mochitest/webcomponents/test_document_shared_registry.html
View file

@ -1,46 +0,0 @@
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=783129
-->
<head>
<title>Test shared registry for associated HTML documents.</title>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<div id="container"></div>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783129">Bug 783129</a>
<script>
var container = document.getElementById("container");
function registerNoRegistryDoc() {
var assocDoc = document.implementation.createDocument(null, "html");
try {
assocDoc.registerElement("x-dummy", { prototype: Object.create(HTMLElement.prototype) });
ok(false, "Registring element in document without registry should throw.");
} catch (ex) {
ok(true, "Registring element in document without registry should throw.");
}
runNextTest();
}
function runNextTest() {
if (testFunctions.length > 0) {
var nextTestFunction = testFunctions.shift();
nextTestFunction();
}
}
var testFunctions = [
registerNoRegistryDoc,
SimpleTest.finish
];
SimpleTest.waitForExplicitFinish();
runNextTest();
</script>
</body>
</html>

32
dom/tests/mochitest/webcomponents/test_template_custom_elements.html
View file

@ -1,32 +0,0 @@
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1091425
-->
<head>
<title>Test for custom elements in template</title>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<template>
<x-foo></x-foo>
</template>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1091425">Bug 1091425</a>
<script>
var p = {};
p.createdCallback = function() {
ok(false, "Created callback should not be called for custom elements in templates.");
};
document.registerElement("x-foo", { prototype: p });
ok(true, "Created callback should not be called for custom elements in templates.");
</script>
<template>
<x-foo></x-foo>
</template>
</body>
</html>

26
dom/tests/mochitest/webcomponents/test_unresolved_pseudo_class.html
View file

@ -42,7 +42,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1111633
<span id="del" is="x-del"></span>
<script>
// Before registerElement
// Before define
var foo = document.querySelector('#foo');
is(getComputedStyle(foo).color, "rgb(0, 0, 255)", "foo - color");
is(getComputedStyle(foo).backgroundColor, "rgb(0, 0, 255)", "foo - backgroundColor");
@ -58,25 +58,25 @@ is(getComputedStyle(baz).backgroundColor, "rgb(0, 0, 255)", "baz - backgroundCol
var span1 = document.querySelector('#span1');
is(getComputedStyle(span1).color, "rgb(255, 0, 0)", "span1 - color");
var Foo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) });
customElements.define('x-foo', class extends HTMLElement {});
var Bar = document.registerElement('x-bar', { extends: 'span', prototype: Object.create(HTMLSpanElement.prototype) });
customElements.define('x-bar', class extends HTMLSpanElement {}, { extends: 'span' });
var Baz = document.registerElement('x-baz', { prototype: Object.create(HTMLElement.prototype) });
customElements.define('x-baz', class extends HTMLElement {});
// After registerElement
// After define
is(getComputedStyle(foo).color, "rgb(255, 0, 0)",
"foo - color (after registerElement)");
"foo - color (after define)");
is(getComputedStyle(bar).color,
"rgb(255, 0, 0)", "bar - color (after registerElement)");
"rgb(255, 0, 0)", "bar - color (after define)");
is(getComputedStyle(baz).color,
"rgb(255, 0, 0)", "baz - color (after registerElement)");
"rgb(255, 0, 0)", "baz - color (after define)");
is(getComputedStyle(baz).backgroundColor,
"rgb(255, 0, 0)", "baz - backgroundColor (after registerElement)");
"rgb(255, 0, 0)", "baz - backgroundColor (after define)");
is(getComputedStyle(span1).color, "rgb(0, 255, 0)", "span1 - color (after registerElement)");
is(getComputedStyle(span1).color, "rgb(0, 255, 0)", "span1 - color (after define)");
// After tree removal
var del = document.querySelector('#del');
@ -88,9 +88,11 @@ par.removeChild(del);
del.setAttribute("is", "foobar");
par.appendChild(del);
is(getComputedStyle(del).color, "rgb(0, 0, 255)", "del - color (after reappend)");
var Del = document.registerElement('x-del', { extends: 'span', prototype: Object.create(HTMLSpanElement.prototype) });
class Del extends HTMLSpanElement {};
customElements.define('x-del', Del, { extends: 'span' });
// [is="x-del"] will not match any longer so the rule of span will apply
is(getComputedStyle(del).color, "rgb(0, 255, 0)", "del - color (after registerElement)");
is(getComputedStyle(del).color, "rgb(0, 255, 0)", "del - color (after define)");
// but the element should have been upgraded:
ok(del instanceof Del, "element was upgraded correctly after changing |is|");