sousa-gecko/testing/web-platform/tests/sanitizer-api/sethtml-with-custom-elements.html

<!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>