interface.html (3402B)
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 8 <button id="invoker" commandfor="invokee" command="test"></button> 9 <div id="invokee"></div> 10 11 <script> 12 test(function () { 13 assert_equals(invoker.commandForElement, invokee); 14 }, "commandForElement reflects invokee HTML element"); 15 16 test(function () { 17 const div = document.body.appendChild(document.createElement("div")); 18 invoker.commandForElement = div; 19 assert_equals(invoker.commandForElement, div); 20 assert_equals(invoker.getAttribute("commandfor"), ""); 21 assert_equals(invoker.getAttribute("command"), "test"); 22 }, "commandForElement reflects set value"); 23 24 test(function () { 25 const host = document.body.appendChild(document.createElement("div")); 26 const shadow = host.attachShadow({ mode: "open" }); 27 const button = shadow.appendChild(document.createElement("button")); 28 button.commandForElement = invokee; 29 assert_equals(button.commandForElement, invokee); 30 assert_equals(invoker.getAttribute("commandfor"), ""); 31 assert_equals(invoker.getAttribute("command"), "test"); 32 }, "commandForElement reflects set value across shadow root into light dom"); 33 34 test(function () { 35 const host = document.body.appendChild(document.createElement("div")); 36 const shadow = host.attachShadow({ mode: "open" }); 37 const div = shadow.appendChild(document.createElement("div")); 38 invoker.commandForElement = div; 39 assert_equals(invoker.commandForElement, null); 40 assert_equals(invoker.getAttribute("commandfor"), ""); 41 assert_equals(invoker.getAttribute("command"), "test"); 42 }, "commandForElement does not reflect set value inside shadowroot"); 43 44 test(function () { 45 assert_throws_js( 46 TypeError, 47 function () { 48 invoker.commandForElement = {}; 49 }, 50 "commandForElement attribute must be an instance of Element", 51 ); 52 }, "commandForElement throws error on assignment of non Element"); 53 54 test(function () { 55 invoker.setAttribute("command", ""); 56 assert_equals(invoker.getAttribute("command"), ""); 57 assert_equals(invoker.command, ""); 58 }, "command reflects '' when attribute empty, setAttribute version"); 59 60 test(function () { 61 invoker.command = "fooBarBaz"; 62 assert_equals(invoker.getAttribute("command"), "fooBarBaz"); 63 assert_equals(invoker.command, ""); 64 }, "command reflects correctly for invalid"); 65 66 test(function () { 67 invoker.command = ""; 68 assert_equals(invoker.getAttribute("command"), ""); 69 assert_equals(invoker.command, ""); 70 }, "command reflects '' when attribute empty, IDL version"); 71 72 test(function () { 73 invoker.command = [1, 2, 3]; 74 assert_equals(invoker.getAttribute("command"), "1,2,3"); 75 assert_equals(invoker.command, ""); 76 }, "command reflects correctly for invalid when array"); 77 78 test(function () { 79 invoker.command = []; 80 assert_equals(invoker.getAttribute("command"), ""); 81 assert_equals(invoker.command, ""); 82 }, "command reflects '' when attribute set to []"); 83 84 test(function () { 85 invoker.command = {}; 86 assert_equals(invoker.command, ""); 87 }, "command reflects correctly for invalid when object"); 88 </script>