onchange-event-subframe.html (3813B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <meta viewport="width=device-width, initial-scale=1" /> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <script type="module"> 9 import { 10 attachIframe, 11 makeCleanup, 12 getOppositeOrientation, 13 } from "./resources/orientation-utils.js"; 14 15 promise_test(async (t) => { 16 t.add_cleanup(makeCleanup()); 17 await test_driver.bless("request fullscreen"); 18 await document.documentElement.requestFullscreen(); 19 let orientations = ["portrait", "landscape"]; 20 if (screen.orientation.type.includes("portrait")) { 21 orientations = orientations.reverse(); 22 } 23 const messageWatcher = new EventWatcher(t, window, "message"); 24 const changeWatcher = new EventWatcher(t, screen.orientation, "change"); 25 const iframe = await attachIframe({ 26 src: "resources/iframe-listen-orientation-change.html", 27 sandbox: "allow-scripts allow-same-origin", 28 }); 29 for (const orientation of orientations) { 30 const messagePromise = messageWatcher.wait_for("message"); 31 const eventPromise = changeWatcher.wait_for("change"); 32 await screen.orientation.lock(orientation); 33 const winner = await Promise.race([eventPromise, messagePromise]); 34 assert_true(winner instanceof Event, "change event must be fired first"); 35 const message = await messagePromise; 36 assert_true( 37 message.data.startsWith(orientation), 38 "subframe receives orientation change event" 39 ); 40 } 41 iframe.remove(); 42 }, "Test subframes receive orientation change events"); 43 44 promise_test(async (t) => { 45 t.add_cleanup(makeCleanup()); 46 const iframe = await attachIframe(); 47 let opposite = getOppositeOrientation(); 48 const original = screen.orientation.type; 49 50 // Fail fast in case the API is not supported 51 await test_driver.bless("request fullscreen", null, iframe.contentWindow); 52 await iframe.contentDocument.documentElement.requestFullscreen(); 53 await iframe.contentWindow.screen.orientation.lock(opposite); 54 // we have to wait for completion of unlock since unlock doesn't return 55 // promise. 56 const unlockPromise = 57 new Promise(resolve => { 58 function onChange() { 59 if (screen.orientation.type == original) { 60 screen.orientation.removeEventListener("change", onChange); 61 resolve(); 62 } 63 } 64 65 screen.orientation.addEventListener("change", onChange); 66 }); 67 iframe.contentWindow.screen.orientation.unlock(); 68 await unlockPromise; 69 70 // Lock from the iframe 71 await test_driver.bless("request fullscreen", null, iframe.contentWindow); 72 await iframe.contentDocument.documentElement.requestFullscreen(); 73 74 opposite = getOppositeOrientation(); 75 76 const topEventPromise = new EventWatcher( 77 t, 78 screen.orientation, 79 "change" 80 ).wait_for("change"); 81 const iframeEventPromise = new EventWatcher( 82 t, 83 iframe.contentWindow.screen.orientation, 84 "change" 85 ).wait_for("change"); 86 87 const lockPromise = iframe.contentWindow.screen.orientation.lock(opposite); 88 89 const winningEvent = await Promise.race([ 90 topEventPromise, 91 iframeEventPromise, 92 ]); 93 assert_true( 94 winningEvent instanceof window.Event, 95 "top-level change event must be fired first" 96 ); 97 98 const iframeEvent = await iframeEventPromise; 99 assert_true( 100 iframeEvent instanceof iframe.contentWindow.Event, 101 "iframe event eventually fires" 102 ); 103 104 await lockPromise; 105 iframe.remove(); 106 }, "Check directly that events are fired in right order (from top to bottom)"); 107 </script>