element-request-fullscreen-and-exit-iframe.html (3393B)
1 <!DOCTYPE html> 2 <title> 3 Element#requestFullscreen() and Document#exitFullscreen() in iframe 4 </title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="../trusted-click.js"></script> 10 <div id="log"></div> 11 <iframe allowfullscreen></iframe> 12 <script> 13 const iframe = document.querySelector("iframe"); 14 let iframeDoc; 15 let iframeBody; 16 17 promise_setup(async () => { 18 const iframe = document.querySelector("iframe"); 19 await new Promise((resolve) => { 20 iframe.onload = resolve; 21 iframe.src = "about:blank"; 22 }); 23 iframeDoc = iframe.contentDocument; 24 iframeBody = iframeDoc.body; 25 }); 26 /** 27 * 28 * @param {Document} doc 29 * @param {HTMLElement} value 30 * @returns {Promise<Event>} 31 */ 32 function makeChangeListener(doc) { 33 return new Promise((resolve) => { 34 doc.addEventListener("fullscreenchange", resolve, { once: true }); 35 }); 36 } 37 38 // Both when entering and exiting, the fullscreenchange event is fired first 39 // on the outer document and then on the iframe's document. This is because 40 // the events are fired in animation frame tasks, which run in "frame tree" 41 // order. 42 promise_test(async (t) => { 43 document.onfullscreenerror = t.unreached_func( 44 "document fullscreenerror event" 45 ); 46 iframeDoc.onfullscreenerror = t.unreached_func( 47 "iframe fullscreenerror event" 48 ); 49 const outerPromise = makeChangeListener(document); 50 const innerPromise = makeChangeListener(iframeDoc); 51 const request = trusted_request(iframeBody, iframeBody); 52 53 const winningEvent = await Promise.race([outerPromise, innerPromise]); 54 assert_equals(winningEvent.target, iframe); 55 56 await Promise.allSettled([outerPromise, innerPromise, request]); 57 58 assert_equals( 59 document.fullscreenElement, 60 iframe, 61 "outer fullscreenElement" 62 ); 63 64 assert_equals( 65 iframeDoc.fullscreenElement, 66 iframeBody, 67 "inner fullscreenElement" 68 ); 69 }, "Checks that the fullscreenchange events fire in right order when entering fullscreen"); 70 71 promise_test(async (t) => { 72 document.onfullscreenerror = t.unreached_func( 73 "document fullscreenerror event" 74 ); 75 iframeDoc.onfullscreenerror = t.unreached_func( 76 "iframe fullscreenerror event" 77 ); 78 const outerPromise = makeChangeListener(document); 79 const innerPromise = makeChangeListener(iframeDoc); 80 const exitPromise = iframeDoc.exitFullscreen(); 81 82 const winningEvent = await Promise.race([outerPromise, innerPromise]); 83 assert_equals(winningEvent.target, iframe); 84 85 await Promise.allSettled([outerPromise, innerPromise, exitPromise]); 86 assert_equals( 87 document.fullscreenElement, 88 null, 89 "outer fullscreenElement" 90 ); 91 assert_equals( 92 iframeDoc.fullscreenElement, 93 null, 94 "inner fullscreenElement" 95 ); 96 }, "Checks that the fullscreenchange events fire in right order when exiting fullscreen"); 97 </script>