compile-event-handler-lexical-scopes.html (7210B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Lexical scopes when compiling an inline event handler</title> 4 <link rel="help" href="https://html.spec.whatwg.org/C/#getting-the-current-value-of-the-event-handler"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <script> 9 setup({allow_uncaught_exception: true}); 10 </script> 11 12 <!-- test case 1: element, document, and window --> 13 14 <table> 15 <tr id="test1_outer"> 16 <td id="test1_target" onclick=" 17 window.testResults.complete = typeof(complete); 18 window.testResults.cellIndex = typeof(cellIndex); 19 window.testResults.cells = typeof(cells); 20 window.testResults.domain = typeof(domain); 21 window.testResults.print = typeof(print); 22 window.testResults.testResults = typeof(testResults); 23 window.testResults.target_own_property = typeof(target_own_property); 24 window.testResults.inner_own_property = typeof(inner_own_property); 25 window.testResults.outer_own_property = typeof(outer_own_property); 26 window.testResults.event = typeof(event); 27 "> 28 <img id="test1_inner"> 29 </td> 30 </tr> 31 </table> 32 33 <script> 34 "use strict"; 35 36 test(() => { 37 const target_element = document.getElementById("test1_target"); 38 const inner_element = document.getElementById("test1_inner"); 39 const outer_element = document.getElementById("test1_outer"); 40 41 target_element.target_own_property = {}; 42 inner_element.inner_own_property = {}; 43 outer_element.outer_own_property = {}; 44 45 const results = window.testResults = {}; 46 // Clicking an inner element makes the event target where the event handler is 47 // registered doesn't match the event target that the event is fired. From a 48 // point of view |target_element|, event.target != event.currentTarget. 49 inner_element.click(); 50 // Expected scopes are: |target_element|, document, and window. 51 assert_equals(results.complete, "undefined", "HTMLImageElement.prototype.complete"); 52 assert_equals(results.cellIndex, "number", "HTMLTableCellElement.prototype.cellIndex"); 53 assert_equals(results.cells, "undefined", "HTMLTableRowElement.prototype.cellIndex"); 54 assert_equals(results.domain, "string", "Document.prototype.domain"); 55 assert_equals(results.print, "function", "window.print"); 56 assert_equals(results.testResults, "object"); 57 assert_equals(results.target_own_property, "object"); 58 assert_equals(results.inner_own_property, "undefined"); 59 assert_equals(results.outer_own_property, "undefined"); 60 assert_equals(results.event, "object", "The argument of event handler"); 61 }, "The EventHandler is an element's event handler and has no form owner."); 62 </script> 63 64 65 <!-- test case 2: element, form owner, document, and window --> 66 67 <form id="test2_form_owner" onsubmit="return false;"> 68 <!-- 'button' is a form-associated element and has a form owner. 69 https://html.spec.whatwg.org/C/#form-associated-element 70 --> 71 <button id="test2_target" onclick=" 72 window.testResults.cite = typeof(cite); 73 window.testResults.autofocus = typeof(autofocus); 74 window.testResults.form = typeof(form); 75 window.testResults.encoding = typeof(encoding); 76 window.testResults.domain = typeof(domain); 77 window.testResults.print = typeof(print); 78 window.testResults.testResults = typeof(testResults); 79 window.testResults.target_own_property = typeof(target_own_property); 80 window.testResults.inner_own_property = typeof(inner_own_property); 81 window.testResults.form_owner_own_property = typeof(form_owner_own_property); 82 window.testResults.event = typeof(event); 83 "> 84 <q id="test2_inner"></q> 85 </button> 86 </form> 87 88 <script> 89 "use strict"; 90 91 test(() => { 92 const target_element = document.getElementById("test2_target"); 93 const inner_element = document.getElementById("test2_inner"); 94 const form_owner_element = document.getElementById("test2_form_owner"); 95 96 target_element.target_own_property = {}; 97 inner_element.inner_own_property = {}; 98 form_owner_element.form_owner_own_property = {}; 99 100 const results = window.testResults = {}; 101 // Clicking an inner element makes the event target where the event handler is 102 // registered doesn't match the event target that the event is fired. From a 103 // point of view |target_element|, event.target != event.currentTarget. 104 inner_element.click(); 105 // Expected scopes are: |target_element|, form owner, document, and window. 106 assert_equals(results.cite, "undefined", "HTMLQuoteElement.prototype.cite"); 107 assert_equals(results.autofocus, "boolean", "HTMLButtonElement.prototype.autofocus"); 108 assert_equals(results.form, "object", "HTMLButtonElement.prototype.form"); 109 assert_equals(results.encoding, "string", "HTMLFormElement.prototype.encoding"); 110 assert_equals(results.domain, "string", "Document.prototype.domain"); 111 assert_equals(results.print, "function", "window.print"); 112 assert_equals(results.testResults, "object"); 113 assert_equals(results.target_own_property, "object"); 114 assert_equals(results.inner_own_property, "undefined"); 115 assert_equals(results.form_owner_own_property, "object"); 116 assert_equals(results.event, "object", "The argument of event handler"); 117 }, "The EventHandler is an element's event handler and has a form owner."); 118 </script> 119 120 121 <!-- test case 3: element and window --> 122 123 <a id="test3_inner"></a> 124 125 <script> 126 "use strict"; 127 128 // This test is placed at last so that it can safely use a global variable 129 // without conflicting other tests. Only this test is asynchronous. 130 async_test(t => { 131 const target_element = window; 132 const inner_element = document.getElementById("test3_inner"); 133 134 target_element.target_own_property = {}; 135 inner_element.inner_own_property = {}; 136 document.body.body_own_property = {}; 137 138 // "onerror" is one of the Window-reflecting body element event handler set. 139 // https://html.spec.whatwg.org/C/#window-reflecting-body-element-event-handler-set 140 // So, the EventHandler is treated as a Window's event handler. 141 document.body.setAttribute("onerror", "\ 142 window.testResults.ping = typeof(ping); \ 143 window.testResults.domain = typeof(domain); \ 144 window.testResults.print = typeof(print); \ 145 window.testResults.testResults = typeof(testResults); \ 146 window.testResults.target_own_property = typeof(target_own_property); \ 147 window.testResults.inner_own_property = typeof(inner_own_property); \ 148 window.testResults.body_own_property = typeof(body_own_property); \ 149 window.testResults.event = typeof(event); \ 150 "); 151 152 const results = window.testResults = {}; 153 window.addEventListener("error", t.step_func_done(() => { 154 // Expected scopes are: |target_element| and window only. 155 assert_equals(results.domain, "undefined", "Document.prototype.domain"); 156 assert_equals(results.print, "function", "window.print"); 157 assert_equals(results.testResults, "object"); 158 assert_equals(results.target_own_property, "object"); 159 assert_equals(results.inner_own_property, "undefined"); 160 assert_in_array(results.event, ["object", "string"], "The first argument of onerror event handler"); 161 })); 162 163 // Make a compilation error happen in order to invoke onerror event handler. 164 inner_element.setAttribute("onclick", "cause a compilation error"); 165 inner_element.click(); 166 }, "The EventHandler is not an element's event handler (i.e. Window's event handler) and has no form owner."); 167 </script>