Rename invokeaction->command, invoketarget->commandfor

This also drops the "auto" value, and updates all tests to accommodate these changes, as well as adding more tests for extra robustness. This is the result of a discussion around renaming the attribute which starts around whatwg/html#9625 (comment) and concludes in whatwg/html#9625 (comment). Bug: 349994204 Change-Id: Ic4a5572506e855036c8c1f75aa0de894de026948 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5666705 Reviewed-by: Joey Arhar <[email protected]> Commit-Queue: Keith Cirkel <[email protected]> Cr-Commit-Position: refs/heads/main@{#1325205}
web-platform-tests · Jul 18, 2024 · 9dc26b4 · 9dc26b4
1 parent a4ff48e
commit 9dc26b4
Show file tree

Hide file tree

Showing 17 changed files with 479 additions and 662 deletions.
diff --git a/html/semantics/invokers/idlharness.tentative.html b/html/semantics/invokers/idlharness.tentative.html
@@ -10,7 +10,7 @@
 <script>
   idl_test(["invokers.tentative"], ["html", "dom"], (idl_array) => {
     idl_array.add_objects({
-      InvokeEvent: ['new InvokeEvent("invoke")'],
+      CommandEvent: ['new CommandEvent("invoke")'],
     });
   });
 </script>
diff --git a/html/semantics/invokers/invokeelement-interface.tentative.html b/html/semantics/invokers/invokeelement-interface.tentative.html
@@ -5,89 +5,84 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
-<button id="invoker" invoketarget="invokee"></button>
+<button id="invoker" commandfor="invokee" command="test"></button>
 <div id="invokee"></div>
 
 <script>
   test(function () {
-    assert_equals(invoker.invokeTargetElement, invokee);
-  }, "invokeTargetElement reflects invokee HTML element");
+    assert_equals(invoker.commandForElement, invokee);
+  }, "commandForElement reflects invokee HTML element");
 
   test(function () {
     const div = document.body.appendChild(document.createElement("div"));
-    invoker.invokeTargetElement = div;
-    assert_equals(invoker.invokeTargetElement, div);
-    assert_equals(invoker.getAttribute("invoketarget"), "");
-    assert_false(invoker.hasAttribute("invokeaction"));
-  }, "invokeTargetElement reflects set value");
+    invoker.commandForElement = div;
+    assert_equals(invoker.commandForElement, div);
+    assert_equals(invoker.getAttribute("commandfor"), "");
+    assert_equals(invoker.getAttribute("command"), "test");
+  }, "commandForElement reflects set value");
 
   test(function () {
     const host = document.body.appendChild(document.createElement("div"));
     const shadow = host.attachShadow({ mode: "open" });
     const button = shadow.appendChild(document.createElement("button"));
-    button.invokeTargetElement = invokee;
-    assert_equals(button.invokeTargetElement, invokee);
-    assert_equals(invoker.getAttribute("invoketarget"), "");
-    assert_false(invoker.hasAttribute("invokeaction"));
-  }, "invokeTargetElement reflects set value across shadow root into light dom");
+    button.commandForElement = invokee;
+    assert_equals(button.commandForElement, invokee);
+    assert_equals(invoker.getAttribute("commandfor"), "");
+    assert_equals(invoker.getAttribute("command"), "test");
+  }, "commandForElement reflects set value across shadow root into light dom");
 
   test(function () {
     const host = document.body.appendChild(document.createElement("div"));
     const shadow = host.attachShadow({ mode: "open" });
     const div = shadow.appendChild(document.createElement("div"));
-    invoker.invokeTargetElement = div;
-    assert_equals(invoker.invokeTargetElement, null);
-    assert_equals(invoker.getAttribute("invoketarget"), "");
-    assert_false(invoker.hasAttribute("invokeaction"));
-  }, "invokeTargetElement does not reflect set value inside shadowroot");
+    invoker.commandForElement = div;
+    assert_equals(invoker.commandForElement, null);
+    assert_equals(invoker.getAttribute("commandfor"), "");
+    assert_equals(invoker.getAttribute("command"), "test");
+  }, "commandForElement does not reflect set value inside shadowroot");
 
   test(function () {
     assert_throws_js(
       TypeError,
       function () {
-        invoker.invokeTargetElement = {};
+        invoker.commandForElement = {};
       },
-      "invokeTargetElement attribute must be an instance of Element",
+      "commandForElement attribute must be an instance of Element",
     );
-  }, "invokeTargetElement throws error on assignment of non Element");
+  }, "commandForElement throws error on assignment of non Element");
 
   test(function () {
-    assert_false(invoker.hasAttribute("invokeaction"));
-    assert_equals(invoker.invokeAction, "");
-  }, "invokeAction reflects '' when attribute not present");
+    invoker.setAttribute("command", "");
+    assert_equals(invoker.getAttribute("command"), "");
+    assert_equals(invoker.command, "");
+  }, "command reflects '' when attribute empty, setAttribute version");
 
   test(function () {
-    invoker.setAttribute("invokeaction", "");
-    assert_equals(invoker.getAttribute("invokeaction"), "");
-    assert_equals(invoker.invokeAction, "");
-  }, "invokeAction reflects '' when attribute empty, setAttribute version");
+    invoker.command = "fooBarBaz";
+    assert_equals(invoker.getAttribute("command"), "fooBarBaz");
+    assert_equals(invoker.command, "fooBarBaz");
+  }, "command reflects same casing");
 
   test(function () {
-    invoker.invokeAction = "fooBarBaz";
-    assert_equals(invoker.getAttribute("invokeaction"), "fooBarBaz");
-    assert_equals(invoker.invokeAction, "fooBarBaz");
-  }, "invokeAction reflects same casing");
+    invoker.command = "";
+    assert_equals(invoker.getAttribute("command"), "");
+    assert_equals(invoker.command, "");
+  }, "command reflects '' when attribute empty, IDL version");
 
   test(function () {
-    invoker.invokeAction = "";
-    assert_equals(invoker.getAttribute("invokeaction"), "");
-    assert_equals(invoker.invokeAction, "");
-  }, "invokeAction reflects '' when attribute empty, IDL version");
+    invoker.command = [1, 2, 3];
+    assert_equals(invoker.getAttribute("command"), "1,2,3");
+    assert_equals(invoker.command, "1,2,3");
+  }, "command reflects tostring value");
 
   test(function () {
-    invoker.invokeAction = [1, 2, 3];
-    assert_equals(invoker.getAttribute("invokeaction"), "1,2,3");
-    assert_equals(invoker.invokeAction, "1,2,3");
-  }, "invokeAction reflects tostring value");
+    invoker.command = [];
+    assert_equals(invoker.getAttribute("command"), "");
+    assert_equals(invoker.command, "");
+  }, "command reflects '' when attribute set to []");
 
   test(function () {
-    invoker.invokeAction = [];
-    assert_equals(invoker.getAttribute("invokeaction"), "");
-    assert_equals(invoker.invokeAction, "");
-  }, "invokeAction reflects '' when attribute set to []");
-
-  test(function () {
-    invoker.invokeAction = {};
-    assert_equals(invoker.invokeAction, "[object Object]");
-  }, "invokeAction reflects tostring value 2");
+    invoker.command = {};
+    assert_equals(invoker.command, "[object Object]");
+  }, "command reflects tostring value 2");
 </script>
diff --git a/html/semantics/invokers/invokeevent-dispatch-shadow.tentative.html b/html/semantics/invokers/invokeevent-dispatch-shadow.tentative.html
@@ -25,7 +25,7 @@
     let hostEventTarget = null;
     let hostEventInvoker = null;
     slot.addEventListener(
-      "invoke",
+      "command",
       (e) => {
         childEvent = e;
         childEventTarget = e.target;
@@ -34,21 +34,21 @@
       { once: true },
     );
     host.addEventListener(
-      "invoke",
+      "command",
       (e) => {
         hostEvent = e;
         hostEventTarget = e.target;
         hostEventInvoker = e.invoker;
       },
       { once: true },
     );
-    const event = new InvokeEvent("invoke", {
+    const event = new CommandEvent("command", {
       bubbles: true,
       invoker: slot,
       composed: true,
     });
     slot.dispatchEvent(event);
-    assert_true(childEvent instanceof InvokeEvent, "slot saw invoke event");
+    assert_true(childEvent instanceof CommandEvent, "slot saw invoke event");
     assert_equals(
       childEventTarget,
       slot,
@@ -74,7 +74,7 @@
       host,
       "invoker is retargeted to shadowroot host",
     );
-  }, "InvokeEvent propagates across shadow boundaries retargeting invoker");
+  }, "CommandEvent propagates across shadow boundaries retargeting invoker");
 
   test(function (t) {
     const host = document.createElement("div");
@@ -83,12 +83,13 @@
     const shadow = host.attachShadow({ mode: "open" });
     const button = shadow.appendChild(document.createElement("button"));
     const invokee = host.appendChild(document.createElement("div"));
-    button.invokeTargetElement = invokee;
+    button.commandForElement = invokee;
+    button.command = 'test-command';
     let event = null;
     let eventTarget = null;
     let eventInvoker = null;
     invokee.addEventListener(
-      "invoke",
+      "command",
       (e) => {
         event = e;
         eventTarget = e.target;
@@ -97,8 +98,8 @@
       { once: true },
     );
     button.click();
-    assert_true(event instanceof InvokeEvent);
+    assert_true(event instanceof CommandEvent);
     assert_equals(eventTarget, invokee, "target is invokee");
     assert_equals(eventInvoker, host, "invoker is host");
-  }, "cross shadow InvokeEvent retargets invoker to host element");
+  }, "cross shadow CommandEvent retargets invoker to host element");
 </script>