doc-without-browsing-context.html | Explore in Territory

<!DOCTYPE html>
<title>Custom Elements: create an element inside a template </title>
<link rel="help" href="https://dom.spec.whatwg.org/#concept-create-element">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/custom-elements-helpers.js"></script>
<iframe id="iframe"></iframe>
<script>
'use strict';

// A document`s browsing context only afffects the look up result of custom element definition
// https://html.spec.whatwg.org/#look-up-a-custom-element-definition
// There are two places where we need to look up a custom element definition:
// 1. creating an element
//    https://dom.spec.whatwg.org/#concept-create-element
// 2. trying to upgrade an element
//    https://html.spec.whatwg.org/#concept-try-upgrade
// The previous observation leads to the following behaviours:
// 1. an element in a document without browsing context should not be upgraded
// 2. a custom element cannot be created in a document without browsing context
// 3. an already "defined" custom element should remain "defined" after being inserted
//    into a document without browsing context

test_with_window(w => {
  let doc_without_browsing_context = w.document.implementation.createHTMLDocument();
  let element = doc_without_browsing_context.createElement('a-a');
  w.customElements.define('a-a', class extends w.HTMLElement {});
  doc_without_browsing_context.body.appendChild(element);
  assert_true(element.matches(':not(:defined)'));
  w.document.body.appendChild(element);
  assert_true(element.matches(':defined'));
}, 'An element should not upgraded in a document without browsing context');

test_with_window(w => {
  let doc_without_browsing_context = w.document.implementation.createHTMLDocument();
  w.customElements.define('b-b', class extends w.HTMLElement {});
  let e1 = doc_without_browsing_context.createElement('b-b');
  assert_true(e1.matches(':not(:defined)'));
  let e2 = w.document.createElement('b-b');
  assert_true(e2.matches(':defined'));
}, 'Custom element should not be created in a document without browsing context');

test_with_window(w => {
  w.customElements.define('a-a', class extends w.HTMLElement {});
  let element = w.document.createElement('a-a');
  assert_true(element.matches(':defined'));
  let doc_without_browsing_context = w.document.implementation.createHTMLDocument();
  doc_without_browsing_context.body.appendChild(element);
  let inserted_element = doc_without_browsing_context.body.querySelector('a-a');
  assert_true(inserted_element.matches(':defined'));
}, 'Inserting an already defined custom element into a document without browsing context ' +
   'should not change its state');
</script>
chromium/third_party/blink/web_tests/custom-elements/spec/doc-without-browsing-context.html
