test_fullscreen_modal.html (2603B)
1 <!doctype html> 2 <title>Test for bug 1771150</title> 3 <script src="/tests/SimpleTest/SimpleTest.js"></script> 4 <script src="/tests/SimpleTest/EventUtils.js"></script> 5 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 6 <style> 7 #fullscreen { 8 background-color: rgba(0, 255, 0, .5); 9 } 10 #fullscreen::backdrop { 11 background-color: transparent; 12 } 13 #fullscreen, #fullscreen::backdrop { 14 pointer-events: none; 15 } 16 </style> 17 <div id="fullscreen"></div> 18 <button>Go fullscreen</button> 19 <script> 20 const button = document.querySelector("button"); 21 let clickCount = 0; 22 let lastFullscreenPromise = null; 23 let shouldEnterFullscreen = false; 24 button.addEventListener("click", function() { 25 clickCount++; 26 if (shouldEnterFullscreen) { 27 const fullscreenElement = document.getElementById("fullscreen"); 28 lastFullscreenPromise = SimpleTest.promiseFocus().then(() => { 29 fullscreenElement.focus(); 30 return fullscreenElement.requestFullscreen(); 31 }); 32 } 33 }); 34 35 function clickButton(expectEvent) { 36 let lastClickCount = clickCount; 37 synthesizeMouseAtCenter(button, {}); 38 (expectEvent ? isnot : is)(clickCount, lastClickCount, `Should've ${expectEvent ? "" : "not "}been able to click`); 39 } 40 41 function enterFullscreen() { 42 lastFullscreenPromise = null; 43 shouldEnterFullscreen = true; 44 clickButton(true); 45 shouldEnterFullscreen = false; 46 isnot(lastFullscreenPromise, null, "Should be transitioning to fullscreen"); 47 return lastFullscreenPromise; 48 } 49 50 async function testFullscreenIsModal(modal) { 51 info("testing modal: " + modal); 52 is(document.fullscreenElement, null, "Shouldn't be in fullscreen"); 53 54 await enterFullscreen(); 55 56 clickButton(/* expectEvent = */ !modal); 57 58 ok(document.fullscreenElement.matches(":fullscreen"), "Fullscreen element matches :fullscreen"); 59 is(document.fullscreenElement.matches(":modal"), modal, "Fullscreen element matches :modal"); 60 61 // Before exiting fullscreen, wait on the document becoming active, 62 // which signifies that the fullscreen request has been completely 63 // processed. It is important that the fullscreen request is all 64 // the way done, or the exit fullscreen request could be dropped. 65 let documentWrapper = SpecialPowers.wrap(document); 66 await SimpleTest.promiseWaitForCondition(() => documentWrapper.isActive(), 67 "Timed out waiting for document to become active."); 68 ok(documentWrapper.isActive(), "Document is active."); 69 70 await document.exitFullscreen(); 71 clickButton(/* expectEvent = */ true); 72 } 73 74 add_task(async function() { 75 await testFullscreenIsModal(true); 76 }); 77 78 </script>