chromium/src/third_party/blink/web_tests/external/wpt/html/webappapis/scripting/events/compile-event-handler-lexical-scopes.html - manifest_repos/chromium_src - Git at Google

 <!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>
	<!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>