compile-event-handler-lexical-scopes-form-owner.html (1599B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Form's lexical scope is established only for form-associated elements</title> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#form-associated-element"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#getting-the-current-value-of-the-event-handler"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <form id="form"> 10 <input onclick="window.inputOnClickElements = elements;"> 11 <img onclick="window.imgOnClickElements = elements;" alt="img"> 12 <div onclick="window.divOnClickElements = elements;">div</div> 13 <x-foo onclick="window.xFooOnClickElements = elements;">x-foo</x-foo> 14 </form> 15 16 <script> 17 "use strict"; 18 19 window.elements = "global_elements"; 20 21 test(() => { 22 const input = form.querySelector("input"); 23 input.click(); 24 assert_equals(window.inputOnClickElements, form.elements); 25 }, "<input> has a form owner"); 26 27 test(() => { 28 const img = form.querySelector("img"); 29 img.click(); 30 assert_equals(window.imgOnClickElements, form.elements); 31 }, "<img> has a form owner"); 32 33 test(() => { 34 const div = form.querySelector("div"); 35 div.click(); 36 assert_equals(window.divOnClickElements, window.elements); 37 }, "<div> doesn't have a form owner"); 38 39 test(() => { 40 customElements.define("x-foo", class extends HTMLElement { 41 static formAssociated = true; 42 }); 43 44 const xFoo = form.querySelector("x-foo"); 45 xFoo.click(); 46 assert_equals(window.xFooOnClickElements, form.elements); 47 }, "form-associated <x-foo> has a form owner"); 48 </script>