Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /mathml/relations/html5-tree/clipboard-event-handlers.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>clipboard event handlers for MathML</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers"/>
<meta
name="assert"
content="MathMLElements incorporates oncopy / oncut / onpaste event handlers"
/>
<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(
"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(
"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>