clipboard-event-handlers.tentative.html (4184B)
1 <!DOCTYPE html> 2 <title>clipboard event handlers for MathML</title> 3 <link rel="help" href="https://w3c.github.io/mathml-core/#dom-and-javascript"/> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers"/> 5 <link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-copy"/> 6 <link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-cut"/> 7 <link rel="help" href="https://w3c.github.io/clipboard-apis/#clipboard-event-paste"/> 8 <meta 9 name="assert" 10 content="MathMLElements incorporates oncopy / oncut / onpaste event handlers" 11 /> 12 13 <script src="/resources/testharness.js"></script> 14 <script src="/resources/testharnessreport.js"></script> 15 <div id="log"></div> 16 <math 17 oncopy="window.copyHappened1 = true" 18 oncut="window.cutHappened1 = true" 19 onpaste="window.pasteHappened1 = true" 20 > 21 <mi>E</mi> 22 </math> 23 <script> 24 const EVENTS = ["copy", "cut", "paste"]; 25 const el = document.querySelector("math"); 26 27 function dispatchEventTest(name) { 28 const mathEl = document.createElementNS( 29 "http://www.w3.org/1998/Math/MathML", 30 "math" 31 ); 32 test(() => { 33 let target = undefined; 34 mathEl[`on${name}`] = (e) => { target = e.currentTarget; } 35 const event = new ClipboardEvent(name, { 36 bubbles: true, 37 cancellable: true 38 }); 39 mathEl.dispatchEvent(event); 40 assert_equals(target, mathEl, "The event must be fired at the <math> element"); 41 }, `${name}: dispatching an Event at a <math> element must trigger element.on${name}`); 42 } 43 44 function evaluatedHandlerTest(name) { 45 const handlerName = "on" + name; 46 47 test(() => { 48 const compiledHandler = el[handlerName]; 49 50 assert_equals( 51 typeof compiledHandler, 52 "function", 53 `The ${handlerName} property must be a function` 54 ); 55 compiledHandler(); 56 assert_true( 57 window[`${name}Happened1`], 58 "Calling the handler must run the code" 59 ); 60 }, `${handlerName}: the content attribute must be compiled into a function as the corresponding property`); 61 62 test(() => { 63 const mathEl = document.createElementNS( 64 "http://www.w3.org/1998/Math/MathML", 65 "math" 66 ); 67 assert_equals(mathEl[handlerName], null, `The ${handlerName} property must be null (no attribute)`); 68 69 mathEl.setAttribute(handlerName, `window.${handlerName}Happened2 = true;`); 70 const compiledHandler = mathEl[handlerName]; 71 assert_equals( 72 typeof compiledHandler, 73 "function", 74 `The ${handlerName} property must be a function (set attribute)` 75 ); 76 compiledHandler(); 77 assert_true( 78 window[`${handlerName}Happened2`], 79 "Calling the handler must run the code (set attribute)" 80 ); 81 82 window[`${handlerName}Happened2`] = false; 83 const clonedMathEl = mathEl.cloneNode(true); 84 const clonedCompiledHandler = clonedMathEl[handlerName]; 85 assert_equals( 86 typeof clonedCompiledHandler, 87 "function", 88 `The ${handlerName} property must be a function (clone node)` 89 ); 90 clonedCompiledHandler(); 91 assert_true( 92 window[`${handlerName}Happened2`], 93 "Calling the handler must run the code (clone node)" 94 ); 95 96 mathEl.setAttribute(handlerName, `window.${handlerName}Happened3 = true;`); 97 const newCompiledHandler = mathEl[handlerName]; 98 assert_equals( 99 typeof newCompiledHandler, 100 "function", 101 `The ${handlerName} property must be a function (modify attribute)` 102 ); 103 newCompiledHandler(); 104 assert_true( 105 window[`${handlerName}Happened3`], 106 "Calling the handler must run the code (modify attribute)" 107 ); 108 109 mathEl.removeAttribute(handlerName); 110 assert_equals(mathEl[handlerName], null, `The ${handlerName} property must be null (remove attribute)`); 111 }, `${handlerName}: dynamic changes on the attribute`); 112 113 } 114 115 EVENTS.forEach(name => { 116 dispatchEventTest(name); 117 evaluatedHandlerTest(name); 118 }); 119 </script>