<!DOCTYPE html>
<title>DocumentAndElementEventHandlers / clipboard events for MathML</title>
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#dom-and-javascript"/>
<link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#documentandelementeventhandlers"/>
<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-copy"/>
<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-cut"/>
<link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-paste"/>
<meta
  name="assert"
  content="MathMLElements incorporate a functional DocumentAndElementEventHandlers interface"
/>

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<math
  oncopy="window.copyHappened1 = true"
  oncut="window.cutHappened1 = true"
  onpaste="window.pasteHappened1 = true"
>
  <mi>E</mi>
</math>
<script>
  const EVENTS = ["copy", "cut", "paste"];
  const el = document.querySelector("math");

  function dispatchEventTest(name) {
    const mathEl = document.createElementNS(
        "http://www.w3.org/1998/Math/MathML",
        "math"
    );
    test(() => {
      let target = undefined;
      mathEl[`on${name}`] = (e) => { target = e.currentTarget; }
      const event = new ClipboardEvent(name, {
        bubbles: true,
        cancellable: true
      });
      mathEl.dispatchEvent(event);
      assert_equals(target, mathEl, "The event must be fired at the <math> element");
    }, `${name}: dispatching an Event at a <math> element must trigger element.on${name}`);
  }

  function evaluatedHandlerTest(name) {
    const handlerName = "on" + name;

    test(() => {
      const compiledHandler = el[handlerName];

      assert_equals(
        typeof compiledHandler,
        "function",
        `The ${handlerName} property must be a function`
      );
      compiledHandler();
      assert_true(
        window[`${name}Happened1`],
        "Calling the handler must run the code"
      );
    }, `${handlerName}: the content attribute must be compiled into a function as the corresponding property`);

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

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

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

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

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

  }

  EVENTS.forEach(name => {
    dispatchEventTest(name);
    evaluatedHandlerTest(name);
  });
</script>