event-interface.html (5022B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <meta name="author" title="Keith Cirkel" href="mailto:wpt@keithcirkel.co.uk" /> 4 <link rel="help" href="https://open-ui.org/components/invokers.explainer/" /> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="resources/invoker-utils.js"></script> 8 9 <div id="div"></div> 10 <button id="button"></button> 11 12 <script> 13 test(function () { 14 const event = new CommandEvent("test"); 15 assert_equals(event.command, ""); 16 assert_readonly(event, "command", "readonly attribute value"); 17 }, "command is a readonly defaulting to ''"); 18 19 test(function () { 20 const event = new CommandEvent("test"); 21 assert_equals(event.source, null); 22 assert_readonly(event, "source", "readonly attribute value"); 23 }, "source is readonly defaulting to null"); 24 25 test(function () { 26 const event = new CommandEvent("test", { command: "sAmPle" }); 27 assert_equals(event.command, "sAmPle"); 28 }, "command reflects initialized attribute"); 29 30 test(function () { 31 const event = new CommandEvent("test", { command: undefined }); 32 assert_equals(event.command, ""); 33 }, "command set to undefined"); 34 35 test(function () { 36 const event = new CommandEvent("test", { command: null }); 37 assert_equals(event.command, "null"); 38 }, "command set to null"); 39 40 test(function () { 41 const event = new CommandEvent("test", { command: false }); 42 assert_equals(event.command, "false"); 43 }, "command set to false"); 44 45 test(function () { 46 const event = new CommandEvent("test", { command: "" }); 47 assert_equals(event.command, ""); 48 }, "command explicitly set to empty string"); 49 50 test(function () { 51 const event = new CommandEvent("test", { command: true }); 52 assert_equals(event.command, "true"); 53 }, "command set to true"); 54 55 test(function () { 56 const event = new CommandEvent("test", { command: 0.5 }); 57 assert_equals(event.command, "0.5"); 58 }, "command set to a number"); 59 60 test(function () { 61 const event = new CommandEvent("test", { command: [] }); 62 assert_equals(event.command, ""); 63 }, "command set to []"); 64 65 test(function () { 66 const event = new CommandEvent("test", { command: [1, 2, 3] }); 67 assert_equals(event.command, "1,2,3"); 68 }, "command set to [1, 2, 3]"); 69 70 test(function () { 71 const event = new CommandEvent("test", { command: { sample: 0.5 } }); 72 assert_equals(event.command, "[object Object]"); 73 }, "command set to an object"); 74 75 test(function () { 76 const event = new CommandEvent("test", { 77 command: { 78 toString() { 79 return "sample"; 80 }, 81 }, 82 }); 83 assert_equals(event.command, "sample"); 84 }, "command set to an object with a toString function"); 85 86 test(function () { 87 const eventInit = { command: "sample", source: document.body }; 88 const event = new CommandEvent("test", eventInit); 89 assert_equals(event.command, "sample"); 90 assert_equals(event.source, document.body); 91 }, "CommandEventInit properties set value"); 92 93 test(function () { 94 const eventInit = { 95 command: "open", 96 source: document.getElementById("div"), 97 }; 98 const event = new CommandEvent("beforetoggle", eventInit); 99 assert_equals(event.command, "open"); 100 assert_equals(event.source, document.getElementById("div")); 101 }, "CommandEventInit properties set value 2"); 102 103 test(function () { 104 const eventInit = { 105 command: "closed", 106 source: document.getElementById("button"), 107 }; 108 const event = new CommandEvent("toggle", eventInit); 109 assert_equals(event.command, "closed"); 110 assert_equals(event.source, document.getElementById("button")); 111 }, "CommandEventInit properties set value 3"); 112 113 test(function () { 114 const event = new CommandEvent("test", { source: undefined }); 115 assert_equals(event.source, null); 116 }, "source set to undefined"); 117 118 test(function () { 119 const event = new CommandEvent("test", { source: null }); 120 assert_equals(event.source, null); 121 }, "source set to null"); 122 123 test(function () { 124 assert_throws_js( 125 TypeError, 126 function () { 127 new CommandEvent("test", { source: false }); 128 }, 129 "source is not an object", 130 ); 131 }, "source set to false"); 132 133 test(function () { 134 assert_throws_js( 135 TypeError, 136 function () { 137 const event = new CommandEvent("test", { source: true }); 138 }, 139 "source is not an object", 140 ); 141 }, "source set to true"); 142 143 test(function () { 144 assert_throws_js( 145 TypeError, 146 function () { 147 const event = new CommandEvent("test", { source: {} }); 148 }, 149 "source is not an object", 150 ); 151 }, "source set to {}"); 152 153 test(function () { 154 assert_throws_js( 155 TypeError, 156 function () { 157 const eventInit = { command: "closed", source: new XMLHttpRequest() }; 158 const event = new CommandEvent("toggle", eventInit); 159 }, 160 "source is not an Element", 161 ); 162 }, "source set to non-Element EventTarget"); 163 </script>