<!DOCTYPE html>
<title>MathMLElement GlobalEventHandlers</title>
<link rel="author" title="Brian Kardell" href="mailto:bkardell@igalia.com" />
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#dom-and-javascript"/>
<link rel="help" href="https://html.spec.whatwg.org/multipage/#event-handler-idl-attributes"/>
<link rel="help" href="https://html.spec.whatwg.org/multipage/#event-handler-content-attributes"/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/WebIDLParser.js"></script>

<div style="display: none" id="container"></div>

<script>
  "use strict";

  // The prefixed animation events are special; their event types are
  // camel-case.
  const prefixedAnimationAttributeToEventType = new Map([
    ["webkitanimationend", "webkitAnimationEnd"],
    ["webkitanimationiteration", "webkitAnimationIteration"],
    ["webkitanimationstart", "webkitAnimationStart"],
    ["webkittransitionend", "webkitTransitionEnd"],
  ]);

  setup({ explicit_done: true });

  // basic pattern lifted from /html/webappapis/scripting/events/event-handler-all-global-events.html
  fetch("/interfaces/html.idl")
    .then(res => res.text())
    .then(htmlIDL => {
      const parsedHTMLIDL = WebIDL2.parse(htmlIDL);
      const globalEventHandlers = parsedHTMLIDL.find(
        idl => idl.name === "GlobalEventHandlers"
      );

      // onerror is too special
      const names = globalEventHandlers.members
        .map(member => member.name)
        .filter(name => name !== "onerror");

      for (const name of names) {
        const withoutOn = name.substring(2);

        test(() => {
          const location = MathMLElement.prototype;
          assert_true(
            location.hasOwnProperty(name),
            `${location.constructor.name} has an own property named "${name}"`
          );

          assert_false(
            name in Element.prototype,
            `Element.prototype must not contain a "${name}" property`
          );
        }, `${name}: must be on the appropriate locations for GlobalEventHandlers`);

        test(() => {
          const location = document.createElementNS(
            "http://www.w3.org/1998/Math/MathML",
            "math"
          );

          assert_equals(
            location[name],
            null,
            `The default value of the property is null for a ${
              location.constructor.name
            } instance`
          );
        }, `${name}: the default value must be null`);

        test(() => {
          const div = document.getElementById("container");
          div.innerHTML = `<math ${name}="window.${name}Happened1 = true;"></math>`;
          const compiledHandler = div.firstElementChild[name];
          assert_equals(
            typeof compiledHandler,
            "function",
            `The ${name} property must be a function`
          );
          compiledHandler();
          assert_true(
            window[`${name}Happened1`],
            "Calling the handler must run the code"
          );
        }, `${name}: the content attribute must be compiled into a function as the corresponding property`);

        test(() => {
          const el = document.createElementNS(
            "http://www.w3.org/1998/Math/MathML",
            "math"
          );
          assert_equals(el[name], null, `The ${name} property must be null (no attribute)`);

          el.setAttribute(name, `window.${name}Happened2 = true;`);
          const compiledHandler = el[name];
          assert_equals(
            typeof compiledHandler,
            "function",
            `The ${name} property must be a function (set attribute)`
          );
          compiledHandler();
          assert_true(
            window[`${name}Happened2`],
            "Calling the handler must run the code (set attribute)"
          );

          window[`${name}Happened2`] = false;
          const clonedEl = el.cloneNode(true);
          const clonedCompiledHandler = clonedEl[name];
          assert_equals(
            typeof clonedCompiledHandler,
            "function",
            `The ${name} property must be a function (clone node)`
          );
          clonedCompiledHandler();
          assert_true(
            window[`${name}Happened2`],
            "Calling the handler must run the code (clone node)"
          );

          el.setAttribute(name, `window.${name}Happened3 = true;`);
          const newCompiledHandler = el[name];
          assert_equals(
            typeof newCompiledHandler,
            "function",
            `The ${name} property must be a function (modify attribute)`
          );
          newCompiledHandler();
          assert_true(
            window[`${name}Happened3`],
            "Calling the handler must run the code (modify attribute)"
          );

          el.removeAttribute(name);
          assert_equals(el[name], null, `The ${name} property must be null (remove attribute)`);
        }, `${name}: dynamic changes on the attribute`);

        test(() => {
          const element = document.createElementNS(
            "http://www.w3.org/1998/Math/MathML",
            "math"
          );
          let target = undefined;
          element[name] = (e) => { target = e.currentTarget; }
          let eventType = withoutOn;
          if (prefixedAnimationAttributeToEventType.has(eventType)) {
            eventType = prefixedAnimationAttributeToEventType.get(eventType);
          }
          element.dispatchEvent(new Event(eventType));
          assert_equals(target, element, "The event must be fired at the <math> element");
        }, `${name}: dispatching an Event at a <math> element must trigger element.${name}`);
      }

      done();
    });
</script>