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