on-dialog-invalid-behavior.html (4191B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <meta name="author" title="Keith Cirkel" href="mailto:wpt@keithcirkel.co.uk" /> 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/invoker-utils.js"></script> 9 10 <dialog id="invokee"> 11 <button id="containedinvoker" commandfor="invokee" command="close"></button> 12 </dialog> 13 <button id="invokerbutton" commandfor="invokee" command="showmodal"></button> 14 15 <script> 16 function resetState() { 17 invokee.close(); 18 try { invokee.hidePopover(); } catch {} 19 invokee.removeAttribute("popover"); 20 invokerbutton.removeAttribute("command"); 21 containedinvoker.removeAttribute("command"); 22 } 23 24 // invalid 25 [ 26 "", 27 "foo", 28 "foo-bar", 29 "auto", 30 "showmodal", 31 "show-popover", 32 "hide-popover", 33 "toggle-popover", 34 "show-picker", 35 ].forEach((action) => { 36 test(function (t) { 37 t.add_cleanup(resetState); 38 invokerbutton.setAttribute("command", action); 39 assert_false(invokee.open, "invokee.open"); 40 assert_false(invokee.matches(":modal"), "invokee :modal"); 41 invokerbutton.click(); 42 assert_false(invokee.open, "invokee.open"); 43 assert_false(invokee.matches(":modal"), "invokee :modal"); 44 }, `invoking (as ${action}) on dialog does nothing`); 45 46 test(function (t) { 47 t.add_cleanup(resetState); 48 containedinvoker.setAttribute("command", action); 49 invokee.show(); 50 assert_true(invokee.open, "invokee.open"); 51 assert_false(invokee.matches(":modal"), "invokee :modal"); 52 containedinvoker.click(); 53 assert_true(invokee.open, "invokee.open"); 54 assert_false(invokee.matches(":modal"), "invokee :modal"); 55 }, `invoking (as ${action}) on open dialog does nothing`); 56 57 test(function (t) { 58 t.add_cleanup(resetState); 59 containedinvoker.setAttribute("command", action); 60 invokee.showModal(); 61 assert_true(invokee.open, "invokee.open"); 62 assert_true(invokee.matches(":modal"), "invokee :modal"); 63 containedinvoker.click(); 64 assert_true(invokee.open, "invokee.open"); 65 assert_true(invokee.matches(":modal"), "invokee :modal"); 66 }, `invoking (as ${action}) on open modal dialog does nothing`); 67 68 test(function (t) { 69 t.add_cleanup(resetState); 70 containedinvoker.setAttribute("command", action); 71 invokee.showModal(); 72 assert_true(invokee.open, "invokee.open"); 73 assert_true(invokee.matches(":modal"), "invokee :modal"); 74 invokee.addEventListener( 75 "command", 76 (e) => { 77 containedinvoker.setAttribute("command", ""); 78 }, 79 { once: true }, 80 ); 81 containedinvoker.click(); 82 assert_true(invokee.open, "invokee.open"); 83 assert_true(invokee.matches(":modal"), "invokee :modal"); 84 }, `invoking (as ${action}) on open modal while changing the attributer does nothing`); 85 }); 86 87 // Open Popovers using Dialog actions 88 ["show-modal", "close"].forEach((action) => { 89 ["manual", "auto"].forEach((popoverState) => { 90 test( 91 function (t) { 92 t.add_cleanup(resetState); 93 invokee.setAttribute("popover", popoverState); 94 invokee.showPopover(); 95 containedinvoker.setAttribute("command", action); 96 assert_true( 97 invokee.matches(":popover-open"), 98 "invokee :popover-open", 99 ); 100 assert_false(invokee.open, "invokee.open"); 101 assert_false(invokee.matches(":modal"), "invokee :modal"); 102 invokee.addEventListener("command", (e) => e.preventDefault(), { 103 once: true, 104 }); 105 containedinvoker.click(); 106 assert_true( 107 invokee.matches(":popover-open"), 108 "invokee :popover-open", 109 ); 110 assert_false(invokee.open, "invokee.open"); 111 assert_false(invokee.matches(":modal"), "invokee :modal"); 112 }, 113 `invoking (as ${ 114 action || "explicit empty" 115 }) dialog as open popover=${popoverState} is noop`, 116 ); 117 }); 118 }); 119 </script>