on-audio-behavior.tentative.html (6732B)
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 <audio controls id="invokee" src="/media/sound_5.mp3"></audio> 14 <button id="invokerbutton" commandfor="invokee" command="mute"></button> 15 16 <script> 17 function resetState() { 18 invokerbutton.setAttribute("command", "mute"); 19 invokee.pause(); 20 invokee.currentTime = 0; 21 invokee.muted = false; 22 } 23 24 // play-pause 25 26 promise_test(async function (t) { 27 t.add_cleanup(resetState); 28 assert_true(invokee.paused); 29 invokerbutton.setAttribute("command", "play-pause"); 30 await clickOn(invokerbutton); 31 await new Promise((resolve) => { 32 requestAnimationFrame(resolve); 33 }); 34 assert_false(invokee.paused); 35 }, "invoking audio with play-pause action makes audio play"); 36 37 promise_test(async function (t) { 38 t.add_cleanup(resetState); 39 assert_true(invokee.paused); 40 invokerbutton.setAttribute("command", "play-pause"); 41 invokerbutton.click(); 42 await new Promise((resolve) => { 43 requestAnimationFrame(resolve); 44 }); 45 assert_false(invokee.paused); 46 }, "invoking audio with play-pause action (without user activation) is a no-op"); 47 48 promise_test(async function (t) { 49 t.add_cleanup(resetState); 50 invokee.addEventListener("command", (e) => e.preventDefault(), { 51 once: true, 52 }); 53 assert_true(invokee.paused); 54 invokerbutton.setAttribute("command", "play-pause"); 55 await clickOn(invokerbutton); 56 await new Promise((resolve) => { 57 requestAnimationFrame(resolve); 58 }); 59 assert_true(invokee.paused); 60 }, "invoking audio with play-pause action and preventDefault is a no-op"); 61 62 promise_test(async function (t) { 63 t.add_cleanup(resetState); 64 await test_driver.bless("play audio"); 65 invokee.play(); 66 assert_false(invokee.paused); 67 invokerbutton.setAttribute("command", "play-pause"); 68 await clickOn(invokerbutton); 69 await new Promise((resolve) => { 70 requestAnimationFrame(resolve); 71 }); 72 assert_true(invokee.paused); 73 }, "invoking playing audio with play-pause action pauses it"); 74 75 // play 76 77 promise_test(async function (t) { 78 t.add_cleanup(resetState); 79 assert_true(invokee.paused); 80 invokerbutton.setAttribute("command", "play"); 81 await clickOn(invokerbutton); 82 await new Promise((resolve) => { 83 requestAnimationFrame(resolve); 84 }); 85 assert_false(invokee.paused); 86 }, "invoking audio with play action makes audio play"); 87 88 promise_test(async function (t) { 89 t.add_cleanup(resetState); 90 assert_true(invokee.paused); 91 invokerbutton.setAttribute("command", "play"); 92 invokerbutton.click(); 93 await new Promise((resolve) => { 94 requestAnimationFrame(resolve); 95 }); 96 assert_false(invokee.paused); 97 }, "invoking audio with play action (without user activation) is a no-op"); 98 99 promise_test(async function (t) { 100 t.add_cleanup(resetState); 101 invokee.addEventListener("command", (e) => e.preventDefault(), { 102 once: true, 103 }); 104 assert_true(invokee.paused); 105 invokerbutton.setAttribute("command", "play"); 106 await clickOn(invokerbutton); 107 await new Promise((resolve) => { 108 requestAnimationFrame(resolve); 109 }); 110 assert_true(invokee.paused); 111 }, "invoking audio with play action and preventDefault is a no-op"); 112 113 promise_test(async function (t) { 114 t.add_cleanup(resetState); 115 await test_driver.bless("play audio"); 116 invokee.play(); 117 assert_false(invokee.paused); 118 invokerbutton.setAttribute("command", "play"); 119 await clickOn(invokerbutton); 120 await new Promise((resolve) => { 121 requestAnimationFrame(resolve); 122 }); 123 assert_false(invokee.paused); 124 }, "invoking playing audio with play action is a no-op"); 125 126 // pause 127 128 promise_test(async function (t) { 129 t.add_cleanup(resetState); 130 assert_true(invokee.paused); 131 invokerbutton.setAttribute("command", "pause"); 132 await clickOn(invokerbutton); 133 await new Promise((resolve) => { 134 requestAnimationFrame(resolve); 135 }); 136 assert_true(invokee.paused); 137 }, "invoking audio with pause action is a no-op"); 138 139 promise_test(async function (t) { 140 t.add_cleanup(resetState); 141 invokee.addEventListener("command", (e) => e.preventDefault(), { 142 once: true, 143 }); 144 assert_true(invokee.paused); 145 invokerbutton.setAttribute("command", "pause"); 146 await clickOn(invokerbutton); 147 await new Promise((resolve) => { 148 requestAnimationFrame(resolve); 149 }); 150 assert_true(invokee.paused); 151 }, "invoking audio with pause action and preventDefault is a no-op"); 152 153 promise_test(async function (t) { 154 t.add_cleanup(resetState); 155 await test_driver.bless("play audio"); 156 invokee.play(); 157 assert_false(invokee.paused); 158 invokerbutton.setAttribute("command", "pause"); 159 await clickOn(invokerbutton); 160 await new Promise((resolve) => { 161 requestAnimationFrame(resolve); 162 }); 163 assert_true(invokee.paused); 164 }, "invoking playing audio with pause action makes it pause"); 165 166 // mute 167 168 promise_test(async function (t) { 169 t.add_cleanup(resetState); 170 assert_false(invokee.muted); 171 invokerbutton.setAttribute("command", "toggle-muted"); 172 await clickOn(invokerbutton); 173 await new Promise((resolve) => { 174 requestAnimationFrame(resolve); 175 }); 176 assert_true(invokee.muted); 177 }, "invoking audio with toggle-muted action mutes it"); 178 179 promise_test(async function (t) { 180 t.add_cleanup(resetState); 181 invokee.addEventListener("command", (e) => e.preventDefault(), { 182 once: true, 183 }); 184 assert_false(invokee.muted); 185 invokerbutton.setAttribute("command", "toggle-muted"); 186 await clickOn(invokerbutton); 187 await new Promise((resolve) => { 188 requestAnimationFrame(resolve); 189 }); 190 assert_false(invokee.muted); 191 }, "invoking audio with toggle-muted action and preventDefault is a no-op"); 192 193 promise_test(async function (t) { 194 t.add_cleanup(resetState); 195 invokee.muted = true; 196 assert_true(invokee.muted); 197 invokerbutton.setAttribute("command", "toggle-muted"); 198 await clickOn(invokerbutton); 199 await new Promise((resolve) => { 200 requestAnimationFrame(resolve); 201 }); 202 assert_false(invokee.muted); 203 }, "invoking muted audio with toggle-muted action unmutes it"); 204 </script>