tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

Element-interface-attachShadow-custom-element.html (4058B)

      1 <!DOCTYPE html>
      2 <title>Shadow DOM: Attaching a ShadowRoot for custom elements</title>
      3 <meta name="author" title="Hayato Ito" href="mailto:hayato@chromium.org">
      4 <link rel="help" href="https://dom.spec.whatwg.org/#dom-element-attachshadow">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script>
      8 class MyAutonomousCustomElement extends HTMLElement {
      9 }
     10 
     11 customElements.define('my-custom', MyAutonomousCustomElement);
     12 
     13 test(() => {
     14  assert_true(document.createElement('my-custom').attachShadow({mode: "open"}) instanceof ShadowRoot);
     15 }, 'Element.attachShadow must create an instance of ShadowRoot for autonomous custom elements');
     16 
     17 test(() => {
     18  assert_true(document.createElement('undefined-custom').attachShadow({mode: 'open'}) instanceof ShadowRoot);
     19 }, 'Element.attachShadow must create an instance of ShadowRoot for undefined autonomous custom elements');
     20 
     21 test(() => {
     22  class ShadowDisabledElement extends HTMLElement {
     23    static get disabledFeatures() { return ['shadow']; }
     24  }
     25 
     26  // No definition. attachShadow() should succeed.
     27  let element = document.createElement('shadow-disabled-element');
     28  element.attachShadow({mode: 'closed'});
     29 
     30  // No definition and it's already a host.
     31  assert_throws_dom('NotSupportedError', () => {
     32    element.attachShadow({mode: 'closed'});
     33  }, 'No definition, host');
     34 
     35  // The element has a definition, and it's already a host.
     36  customElements.define('shadow-disabled-element', ShadowDisabledElement);
     37  assert_throws_dom('NotSupportedError', () => {
     38    element.attachShadow({mode: 'closed'});
     39  }, 'Definition, host');
     40 
     41  // The element has a definition, and it's not a host.
     42  assert_throws_dom('NotSupportedError', () => {
     43    document.createElement('shadow-disabled-element').attachShadow({mode: 'closed'});
     44  }, 'Definition, not a host');
     45 }, 'Element.attachShadow for an autonomous custom element with ' +
     46   'disabledFeatures=["shadow"] should throw a NotSupportedError');
     47 
     48 test(() => {
     49  class ShadowDisabledHeadingElement extends HTMLHeadingElement {
     50    static get disabledFeatures() { return ['shadow']; }
     51  }
     52 
     53  // No definition. attachShadow() should succeed.
     54  let element = document.createElement('h2',
     55      {is: 'shadow-disabled-heading-element'});
     56  element.attachShadow({mode: 'closed'});
     57 
     58  // No definition and it's already a host.
     59  assert_throws_dom('NotSupportedError', () => {
     60    element.attachShadow({mode: 'closed'});
     61  }, 'No definition, host.');
     62 
     63  // The element has a definition, and it's already a host.
     64  customElements.define('shadow-disabled-heading-element',
     65      ShadowDisabledHeadingElement, {extends: 'h2'});
     66  assert_throws_dom('NotSupportedError', () => {
     67    element.attachShadow({mode: 'closed'});
     68  }, 'Definition, host');
     69 
     70  // The element has a definition, and it's not a host.
     71  let h2 = document.createElement('h2', {is: 'shadow-disabled-heading-element'});
     72  assert_throws_dom('NotSupportedError', () => {
     73    h2.attachShadow({mode: 'closed'});
     74  }, 'Definition, not a host');
     75 }, 'Element.attachShadow for a customized built-in element with ' +
     76   'disabledFeatures=["shadow"] should throw a NotSupportedError');
     77 
     78 test(() => {
     79  class CapitalShadowDisabledElement extends HTMLElement {
     80    static get disabledFeatures() { return ['SHADOW']; }
     81  }
     82 
     83  customElements.define('capital-shadow-disabled-element', CapitalShadowDisabledElement);
     84 
     85  // Test fails if this throws
     86  document.createElement('capital-shadow-disabled-element').attachShadow({mode: 'open'});
     87 }, 'Element.attachShadow for a custom element with disabledFeatures=["SHADOW"] should not throw a NotSupportedError');
     88 
     89 class MyCustomizedBuiltinElement extends HTMLInputElement {
     90 }
     91 
     92 customElements.define('my-input', MyCustomizedBuiltinElement, { extends: 'input' });
     93 
     94 test(() => {
     95  assert_throws_dom('NotSupportedError', () => {
     96    document.createElement('input', {is: 'my-input'}).attachShadow({mode: "open"});
     97  });
     98 }, 'Element.attachShadow must throw a NotSupportedError for customized built-in elements');
     99 </script>
    100 </body>
    101 </html>