MathML: test dynamic changes for on[event] attributes.

mathml/relations/html5-tree/clipboard-event-handlers.tentative.html

@@ -14,9 +14,9 @@
 <script src="/resources/testharnessreport.js"></script>
 <div id="log"></div>
 <math
-  oncopy="window.copyHappened = true"
-  oncut="window.cutHappened = true"
-  onpaste="window.pasteHappened = true"
+  oncopy="window.copyHappened1 = true"
+  oncut="window.cutHappened1 = true"
+  onpaste="window.pasteHappened1 = true"
 >
   <mi>E</mi>
 </math>
@@ -56,10 +56,62 @@
       );
       compiledHandler();
       assert_true(
-        window[name + "Happened"],
+        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 => {

mathml/relations/html5-tree/math-global-event-handlers.tentative.html

@@ -57,25 +57,72 @@
           );
         }, `${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"
           );
-          el.setAttribute(name, `window.${name}Happened = true;`);
-          const compiledHandler = el[name];
+          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`
+            `The ${name} property must be a function (set attribute)`
           );
           compiledHandler();
           assert_true(
-            window[name + "Happened"],
-            "Calling the handler must run the code"
+            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)"
           );
-        }, `${name}: the content attribute must be compiled into a function as the corresponding property`);
+
+          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(
@@ -97,3 +144,5 @@
       done();
     });
 </script>
+
+<div style="display: none" id="container"></div>