interestelement-interface.tentative.html (3078B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <link rel="author" title="Keith Cirkel" href="mailto:keithamus@github.com" > 4 <link rel="author" title="Luke Warlow" href="mailto:lwarlow@igalia.com" > 5 <link rel="help" href="https://open-ui.org/components/interest-invokers.explainer/" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <button id="buttonInvoker" interestfor="interestee"></button> 10 <a id="aInvoker" interestfor="interestee"></a> 11 <div id="interestee"></div> 12 13 <script> 14 test(function () { 15 assert_equals(buttonInvoker.interestForElement, interestee); 16 assert_equals(aInvoker.interestForElement, interestee); 17 }, "interestForElement reflects interestee HTML element"); 18 19 test(function () { 20 const div = document.body.appendChild(document.createElement("div")); 21 buttonInvoker.interestForElement = div; 22 aInvoker.interestForElement = div; 23 assert_equals(buttonInvoker.interestForElement, div); 24 assert_equals(buttonInvoker.getAttribute("interestfor"), ""); 25 assert_equals(aInvoker.interestForElement, div); 26 assert_equals(aInvoker.getAttribute("interestfor"), ""); 27 }, "interestForElement reflects set value"); 28 29 test(function () { 30 const host = document.body.appendChild(document.createElement("div")); 31 const shadow = host.attachShadow({ mode: "open" }); 32 const button = shadow.appendChild(document.createElement("button")); 33 button.interestForElement = interestee; 34 assert_equals(button.interestForElement, interestee); 35 assert_equals(buttonInvoker.getAttribute("interestfor"), ""); 36 }, "interestForElement reflects set value across shadow root into light dom"); 37 38 test(function () { 39 const host = document.body.appendChild(document.createElement("div")); 40 const shadow = host.attachShadow({ mode: "open" }); 41 const div = shadow.appendChild(document.createElement("div")); 42 buttonInvoker.interestForElement = div; 43 assert_equals(buttonInvoker.interestForElement, null); 44 assert_equals(buttonInvoker.getAttribute("interestfor"), ""); 45 }, "interestForElement does not reflect set value inside shadowroot"); 46 47 test(function () { 48 buttonInvoker.setAttribute('interestfor', 'invalid'); 49 assert_equals(buttonInvoker.interestForElement, null); 50 assert_equals(buttonInvoker.getAttribute("interestfor"), "invalid"); 51 aInvoker.setAttribute('interestfor', 'invalid'); 52 assert_equals(aInvoker.interestForElement, null); 53 assert_equals(aInvoker.getAttribute("interestfor"), "invalid"); 54 }, "interestForElement does not reflect invalid value"); 55 56 test(function () { 57 assert_throws_js( 58 TypeError, 59 function () { 60 buttonInvoker.interestForElement = {}; 61 }, 62 "interestForElement attribute value must be an instance of Element", 63 ); 64 assert_throws_js( 65 TypeError, 66 function () { 67 aInvoker.interestForElement = {}; 68 }, 69 "interestForElement attribute value must be an instance of Element", 70 ); 71 }, "interestForElement throws error on assignment of non Element"); 72 </script>