107 lines
3.7 KiB
HTML
107 lines
3.7 KiB
HTML
<!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>
|