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