| <!DOCTYPE html> |
| <meta charset="utf-8" /> |
| <meta viewport="width=device-width, initial-scale=1" /> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script type="module"> |
| import { |
| attachIframe, |
| makeCleanup, |
| getOppositeOrientation, |
| } from "./resources/orientation-utils.js"; |
| |
| promise_test(async (t) => { |
| t.add_cleanup(makeCleanup()); |
| await test_driver.bless("request fullscreen"); |
| await document.documentElement.requestFullscreen(); |
| let orientations = ["portrait", "landscape"]; |
| if (screen.orientation.type.includes("portrait")) { |
| orientations = orientations.reverse(); |
| } |
| const messageWatcher = new EventWatcher(t, window, "message"); |
| const changeWatcher = new EventWatcher(t, screen.orientation, "change"); |
| const iframe = await attachIframe({ |
| src: "resources/iframe-listen-orientation-change.html", |
| sandbox: "allow-scripts allow-same-origin", |
| }); |
| for (const orientation of orientations) { |
| const messagePromise = messageWatcher.wait_for("message"); |
| const eventPromise = changeWatcher.wait_for("change"); |
| await screen.orientation.lock(orientation); |
| const winner = await Promise.race([eventPromise, messagePromise]); |
| assert_true(winner instanceof Event, "change event must be fired first"); |
| const message = await messagePromise; |
| assert_true( |
| message.data.startsWith(orientation), |
| "subframe receives orientation change event" |
| ); |
| } |
| iframe.remove(); |
| }, "Test subframes receive orientation change events"); |
| |
| promise_test(async (t) => { |
| t.add_cleanup(makeCleanup()); |
| const iframe = await attachIframe(); |
| let opposite = getOppositeOrientation(); |
| const original = screen.orientation.type; |
| |
| // Fail fast in case the API is not supported |
| await test_driver.bless("request fullscreen", null, iframe.contentWindow); |
| await iframe.contentDocument.documentElement.requestFullscreen(); |
| await iframe.contentWindow.screen.orientation.lock(opposite); |
| // we have to wait for completion of unlock since unlock doesn't return |
| // promise. |
| const unlockPromise = |
| new Promise(resolve => { |
| function onChange() { |
| if (screen.orientation.type == original) { |
| screen.orientation.removeEventListener("change", onChange); |
| resolve(); |
| } |
| } |
| |
| screen.orientation.addEventListener("change", onChange); |
| }); |
| iframe.contentWindow.screen.orientation.unlock(); |
| await unlockPromise; |
| |
| // Lock from the iframe |
| await test_driver.bless("request fullscreen", null, iframe.contentWindow); |
| await iframe.contentDocument.documentElement.requestFullscreen(); |
| |
| opposite = getOppositeOrientation(); |
| |
| const topEventPromise = new EventWatcher( |
| t, |
| screen.orientation, |
| "change" |
| ).wait_for("change"); |
| const iframeEventPromise = new EventWatcher( |
| t, |
| iframe.contentWindow.screen.orientation, |
| "change" |
| ).wait_for("change"); |
| |
| const lockPromise = iframe.contentWindow.screen.orientation.lock(opposite); |
| |
| const winningEvent = await Promise.race([ |
| topEventPromise, |
| iframeEventPromise, |
| ]); |
| assert_true( |
| winningEvent instanceof window.Event, |
| "top-level change event must be fired first" |
| ); |
| |
| const iframeEvent = await iframeEventPromise; |
| assert_true( |
| iframeEvent instanceof iframe.contentWindow.Event, |
| "iframe event eventually fires" |
| ); |
| |
| await lockPromise; |
| iframe.remove(); |
| }, "Check directly that events are fired in right order (from top to bottom)"); |
| </script> |
