on-details-behavior.tentative.html (4143B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <meta name="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> 4 <meta name="timeout" content="long" /> 5 <link rel="help" href="https://open-ui.org/components/invokers.explainer/" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="resources/invoker-utils.js"></script> 12 13 <details id="invokee">Details Contents</details> 14 <button id="invokerbutton" commandfor="invokee" command="open"></button> 15 16 <script> 17 function resetState() { 18 invokerbutton.removeAttribute("command"); 19 invokee.removeAttribute("open"); 20 } 21 22 // Open actions 23 [ 24 "toggle", 25 "open", 26 /* test case sensitivity */ 27 "tOgGlE", 28 "oPeN", 29 ].forEach((command) => { 30 promise_test( 31 async function (t) { 32 t.add_cleanup(resetState); 33 invokerbutton.command = command; 34 assert_false(invokee.matches("[open]"), "invokee does not match [open]"); 35 await clickOn(invokerbutton); 36 assert_true(invokee.matches("[open]"), "invokee matches [open]"); 37 }, 38 `invoking (as ${command}) closed details opens`, 39 ); 40 41 promise_test( 42 async function (t) { 43 t.add_cleanup(resetState); 44 invokerbutton.command = command; 45 assert_false(invokee.matches("[open]"), "invokee does not match [open]"); 46 invokee.addEventListener("command", (e) => e.preventDefault(), { 47 once: true, 48 }); 49 await clickOn(invokerbutton); 50 t.add_cleanup(() => invokee.removeAttribute("open")); 51 assert_false(invokee.matches("[open]"), "invokee still does not match [open]"); 52 }, 53 `invoking (as ${command}) closed details with preventDefault does not open`, 54 ); 55 }); 56 57 // Close actions 58 [ 59 "toggle", 60 "close", 61 /* test case sensitivity */ 62 "tOgGlE", 63 "cLoSe", 64 ].forEach((command) => { 65 promise_test( 66 async function (t) { 67 t.add_cleanup(resetState); 68 invokerbutton.command = command; 69 invokee.setAttribute("open", ""); 70 assert_true(invokee.matches("[open]")); 71 await clickOn(invokerbutton); 72 assert_false(invokee.matches("[open]")); 73 }, 74 `invoking (as ${command}) open details closes`, 75 ); 76 77 promise_test( 78 async function (t) { 79 t.add_cleanup(resetState); 80 invokerbutton.command = command; 81 invokee.setAttribute("open", ""); 82 invokerbutton.setAttribute("command", "toggle"); 83 invokee.addEventListener("command", (e) => e.preventDefault(), { 84 once: true, 85 }); 86 assert_true(invokee.matches("[open]")); 87 await clickOn(invokerbutton); 88 assert_true(invokee.matches("[open]")); 89 }, 90 `invoking (as ${command}) open details with prevent default closes`, 91 ); 92 }); 93 94 // toggle specific 95 96 promise_test(async function (t) { 97 t.add_cleanup(resetState); 98 invokerbutton.command = "toggle"; 99 invokee.addEventListener( 100 "command", 101 (e) => { 102 invokee.setAttribute("open", ""); 103 }, 104 { 105 once: true, 106 }, 107 ); 108 assert_false(invokee.matches("[open]")); 109 await clickOn(invokerbutton); 110 assert_false(invokee.matches("[open]")); 111 }, "invoking (as toggle) closed details where event listener opens leads to a closed details"); 112 113 // open specific 114 115 promise_test(async function (t) { 116 t.add_cleanup(resetState); 117 invokerbutton.command = "open"; 118 invokee.setAttribute("open", ""); 119 assert_true(invokee.matches("[open]")); 120 await clickOn(invokerbutton); 121 assert_true(invokee.matches("[open]")); 122 }, "invoking open details with open command is noop"); 123 124 // close 125 126 promise_test(async function (t) { 127 t.add_cleanup(resetState); 128 invokerbutton.command = "close"; 129 assert_false(invokee.matches("[open]")); 130 await clickOn(invokerbutton); 131 assert_false(invokee.matches("[open]")); 132 }, "invoking closed details with close command is noop"); 133 </script>