Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /sanitizer-api/sethtml-with-custom-elements.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<head>
<title>Test custom element callbacks with Sanitizer</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div></div>
<script>
window.constructed = 0;
window.connected = 0;
function cleanup() {
window.constructed = 0;
window.connected = 0;
}
customElements.define("x-probe", class extends HTMLElement {
constructor() { super(); window.constructed++; }
connectedCallback() { window.connected++; }
});
// Test cases involving named custom elements.
test(t => {
t.add_cleanup(cleanup);
document.body.firstElementChild.setHTML("<x-probe></x-probe>");
assert_equals(window.constructed, 0);
assert_equals(window.connected, 0);
}, "Custom element that is removed during sanitization.");
test(t => {
t.add_cleanup(cleanup);
document.body.firstElementChild.setHTML("<x-probe></x-probe>",
{sanitizer: {elements: ["x-probe"]}});
assert_equals(window.constructed, 1);
assert_equals(window.connected, 1);
}, "Custom element that is allowed.");
// Test cases involving `is=`.
customElements.define("x-div", class extends HTMLDivElement {
constructor() { super(); window.constructed++; }
connectedCallback() { window.connected++; }
}, { extends: "div" });
test(t => {
t.add_cleanup(cleanup);
document.body.firstElementChild.setHTML("<div is='x-div'></div>");
assert_equals(window.constructed, 0);
assert_equals(window.connected, 0);
}, "Custom element via is-attribute, where is attribute is not default-allowed.");
test(t => {
t.add_cleanup(cleanup);
document.body.firstElementChild.setHTML("<div is='x-div'></div>",
{sanitizer: {elements:["div"], removeAttributes:["is"]}});
assert_equals(window.constructed, 0);
assert_equals(window.connected, 0);
}, "Custom element via is-attribute, where is attribute is removed.");
test(t => {
t.add_cleanup(cleanup);
document.body.firstElementChild.setHTML("<div is='x-div'></div>",
{sanitizer: {elements:["div", "x-div"], removeAttributes:["is"]}});
assert_equals(window.constructed, 0);
assert_equals(window.connected, 0);
}, "Custom element via is-attribute, where is attribute is removed but the custom element would have been allowed.");
test(t => {
t.add_cleanup(cleanup);
document.body.firstElementChild.setHTML("<x-probe is='x-div'></x-probe>",
{sanitizer: {elements:["div", "x-probe"], removeAttributes:["is"]}});
assert_equals(window.constructed, 1);
assert_equals(window.connected, 1);
}, "Custom element with an is-attribute, where the is=-attribute is blocked.");
test(t => {
t.add_cleanup(cleanup);
document.body.firstElementChild.setHTML("<div is='x-div'></div>",
{sanitizer: {elements:["p", "x-div"], attributes:["is", "data-attr"]}});
assert_equals(window.constructed, 0);
assert_equals(window.connected, 0);
}, "Custom element via is-attribute, where is attribute is allowed, but the element is not.");
test(t => {
t.add_cleanup(cleanup);
document.body.firstElementChild.setHTML("<div is='x-div'></div>",
{sanitizer: {removeElements:["div"], attributes:["is", "data-attr"]}});
assert_equals(window.constructed, 0);
assert_equals(window.connected, 0);
}, "Custom element via is-attribute, where is attribute is allowed, but the element is removed.");
test(t => {
t.add_cleanup(cleanup);
document.body.firstElementChild.setHTML("<div is='x-div'></div>",
{sanitizer: {replaceWithChildrenElements:["div"], attributes:["is", "data-attr"]}});
assert_equals(window.constructed, 0);
assert_equals(window.connected, 0);
}, "Custom element via is-attribute, where is attribute is allowed, but the element is replaced.");
test(t => {
t.add_cleanup(cleanup);
document.body.firstElementChild.setHTMLUnsafe("<div is='x-div'></div>",
{sanitizer: "default"});
assert_equals(window.constructed, 0);
assert_equals(window.connected, 0);
}, "Custom element via is-attribute with unsafe, where is attribute is not default-allowed.");
test(t => {
t.add_cleanup(cleanup);
document.body.firstElementChild.setHTML(
"<div is='x-div'></div>",
{sanitizer: {elements:["p", "div"], attributes:["is"]}});
assert_equals(window.constructed, 1);
assert_equals(window.connected, 1);
}, "Sanity check, that is= processing still works when allowed.");
// Test cases involving `is=` with <html> or <script>
customElements.define("x-script", class extends HTMLScriptElement {
constructor() { super(); window.constructed++; }
connectedCallback() { window.connected++; }
}, {extends: "script"});
test(t => {
t.add_cleanup(cleanup);
document.body.firstElementChild.setHTMLUnsafe(
"<script is='x-script'>2+2</sc" + "ript>",
{sanitizer: {elements: ["script"],removeAttributes:["is"]}});
assert_equals(window.constructed, 0);
assert_equals(window.connected, 0);
}, "Custom element via is-attribute on script element, where is attribute is not allowed.");
customElements.define("x-html", class extends HTMLHtmlElement {
constructor() { super(); window.constructed++; }
connectedCallback() { window.connected++; }
}, {extends: "html"});
test(t => {
t.add_cleanup(cleanup);
document.body.firstElementChild.setHTMLUnsafe(
"<html is='x-html'></html>",
{sanitizer: {elements: ["html"],removeAttributes:["is"]}});
assert_equals(window.constructed, 0);
assert_equals(window.connected, 0);
}, "Custom element via is-attribute on html element, where is attribute is not default-allowed.");
</script>
</body>