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