fullscreen-behavior.tentative.html (5420B)
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 <div id="invokee"> 14 Fullscreen content 15 <button id="invokerbutton" commandfor="invokee"></button> 16 </div> 17 18 <script> 19 async function resetState() { 20 invokerbutton.setAttribute("command", "toggle-fullscreen"); 21 if (document.fullscreenElement) await document.exitFullscreen(); 22 } 23 24 // toggle-fullscreen 25 26 promise_test(async function (t) { 27 t.add_cleanup(resetState); 28 assert_false(invokee.matches(":fullscreen")); 29 invokerbutton.setAttribute("command", "toggle-fullscreen"); 30 await clickOn(invokerbutton); 31 assert_true(invokee.matches(":fullscreen")); 32 }, "invoking div with toggle-fullscreen action makes div fullscreen"); 33 34 promise_test(async function (t) { 35 t.add_cleanup(resetState); 36 assert_false(invokee.matches(":fullscreen")); 37 invokerbutton.setAttribute("command", "toggle-fullscreen"); 38 invokerbutton.click(); 39 assert_false(invokee.matches(":fullscreen")); 40 }, "invoking div with toggle-fullscreen action (without user activation) is a no-op"); 41 42 promise_test(async function (t) { 43 t.add_cleanup(resetState); 44 invokee.addEventListener("command", (e) => e.preventDefault(), { 45 once: true, 46 }); 47 assert_false(invokee.matches(":fullscreen")); 48 invokerbutton.setAttribute("command", "toggle-fullscreen"); 49 await clickOn(invokerbutton); 50 assert_false(invokee.matches(":fullscreen")); 51 }, "invoking div with toggle-fullscreen action and preventDefault is a no-op"); 52 53 promise_test(async function (t) { 54 t.add_cleanup(resetState); 55 invokerbutton.setAttribute("command", "toggle-fullscreen"); 56 await test_driver.bless('go fullscreen'); 57 await invokee.requestFullscreen(); 58 assert_true(invokee.matches(":fullscreen")); 59 await clickOn(invokerbutton); 60 assert_false(invokee.matches(":fullscreen")); 61 }, "invoking fullscreen div with toggle-fullscreen action exits fullscreen"); 62 63 promise_test(async function (t) { 64 t.add_cleanup(resetState); 65 invokerbutton.setAttribute("command", "tOgGlE-Fullscreen"); 66 await test_driver.bless('go fullscreen'); 67 await invokee.requestFullscreen(); 68 assert_true(invokee.matches(":fullscreen")); 69 await clickOn(invokerbutton); 70 assert_false(invokee.matches(":fullscreen")); 71 }, "invoking fullscreen div with toggle-fullscreen (case-insensitive) action exits fullscreen"); 72 73 // request-fullscreen 74 75 promise_test(async function (t) { 76 t.add_cleanup(resetState); 77 assert_false(invokee.matches(":fullscreen")); 78 invokerbutton.setAttribute("command", "request-fullscreen"); 79 await clickOn(invokerbutton); 80 assert_true(invokee.matches(":fullscreen")); 81 }, "invoking div with request-fullscreen action makes div fullscreen"); 82 83 promise_test(async function (t) { 84 t.add_cleanup(resetState); 85 invokee.addEventListener("command", (e) => e.preventDefault(), { 86 once: true, 87 }); 88 assert_false(invokee.matches(":fullscreen")); 89 invokerbutton.setAttribute("command", "request-fullscreen"); 90 await clickOn(invokerbutton); 91 assert_false(invokee.matches(":fullscreen")); 92 }, "invoking div with request-fullscreen action and preventDefault is a no-op"); 93 94 promise_test(async function (t) { 95 t.add_cleanup(resetState); 96 invokerbutton.setAttribute("command", "request-fullscreen"); 97 await test_driver.bless('go fullscreen'); 98 await invokee.requestFullscreen(); 99 assert_true(invokee.matches(":fullscreen")); 100 await clickOn(invokerbutton); 101 assert_true(invokee.matches(":fullscreen")); 102 }, "invoking fullscreen div with request-fullscreen action is a no-op"); 103 104 // exitFullscreen 105 106 promise_test(async function (t) { 107 t.add_cleanup(resetState); 108 assert_false(invokee.matches(":fullscreen")); 109 invokerbutton.setAttribute("command", "exit-fullscreen"); 110 await clickOn(invokerbutton); 111 assert_false(invokee.matches(":fullscreen")); 112 }, "invoking div with exit-fullscreen action is a no-op"); 113 114 promise_test(async function (t) { 115 t.add_cleanup(resetState); 116 invokerbutton.setAttribute("command", "exit-fullscreen"); 117 await test_driver.bless('go fullscreen'); 118 await invokee.requestFullscreen(); 119 assert_true(invokee.matches(":fullscreen")); 120 await clickOn(invokerbutton); 121 assert_false(invokee.matches(":fullscreen")); 122 }, "invoking fullscreen div with exit-fullscreen action exits fullscreen"); 123 124 promise_test(async function (t) { 125 t.add_cleanup(resetState); 126 invokee.addEventListener("command", (e) => e.preventDefault(), { 127 once: true, 128 }); 129 invokerbutton.setAttribute("command", "exit-fullscreen"); 130 await test_driver.bless('go fullscreen'); 131 await invokee.requestFullscreen(); 132 assert_true(invokee.matches(":fullscreen")); 133 await clickOn(invokerbutton); 134 assert_true(invokee.matches(":fullscreen")); 135 }, "invoking fullscreen div with exit-fullscreen action and preventDefault is a no-op"); 136 137 </script>