tor-browser

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

ElementInternals-form.html (2150B)

      1 <!DOCTYPE html>
      2 <title>form attribute of ElementInternals</title>
      3 <body>
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 
      7 <script>
      8 customElements.define('custom-input-parser', class extends HTMLElement {
      9  static get formAssociated() { return true; }
     10 
     11  constructor() {
     12    super();
     13    this.internals_ = this.attachInternals();
     14  }
     15  get i() { return this.internals_; }
     16 });
     17 </script>
     18 
     19 <form id="custom-form">
     20  <custom-input-parser id="custom-1"></custom-input-parser>
     21  <custom-input-upgrade id="custom-2"></custom-input-upgrade>
     22 </form>
     23 <custom-input-parser id="custom-3" form="custom-form"></custom-input-parser>
     24 <custom-input-upgrade id="custom-4" form="custom-form"></custom-input-upgrade>
     25 <custom-input-upgrade id="custom-5"></custom-input-upgrade>
     26 
     27 <script>
     28 test(() => {
     29  const form = document.forms[0];
     30  assert_equals(document.getElementById("custom-1").i.form, form);
     31  assert_equals(document.getElementById("custom-3").i.form, form);
     32 
     33  // Test upgrading.
     34  customElements.define('custom-input-upgrade', class extends HTMLElement {
     35    static get formAssociated() { return true; }
     36    constructor() {
     37      super();
     38      this.internals_ = this.attachInternals();
     39    }
     40    get i() { return this.internals_; }
     41  });
     42  assert_equals(document.getElementById("custom-2").i.form, form);
     43  assert_equals(document.getElementById("custom-4").i.form, form);
     44 
     45  // Test changing name attribuate.
     46  let custom5 = document.getElementById("custom-5");
     47  assert_equals(custom5.i.form, null);
     48  custom5.setAttribute("form", "custom-form");
     49  assert_equals(custom5.i.form, form);
     50 }, "ElementInternals.form should return the target element's form owner");
     51 
     52 test(() => {
     53  class NotFormAssociatedElement extends HTMLElement {}
     54  customElements.define('not-form-associated-element', NotFormAssociatedElement);
     55  const element = new NotFormAssociatedElement();
     56  const i = element.attachInternals();
     57  assert_throws_dom('NotSupportedError', () => i.form);
     58 }, "ElementInternals.form should throws NotSupportedError if the target element is not a form-associated custom element");
     59 
     60 </script>
     61 </body>