mirror of
https://github.com/servo/servo.git
synced 2025-10-16 08:20:22 +01:00
116 lines
5 KiB
HTML
116 lines
5 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<meta name="timeout" content="long">
|
|
<title>Multi-Screen Window Placement test: element.requestFullscreen()</title>
|
|
<link rel="help" href="https://w3c.github.io/window-placement/">
|
|
This test uses multi-screen details to request fullscreen on different
|
|
displays and swap between them.<br>
|
|
It runs manually with `wpt serve` and a compatible browser.<br><br>
|
|
<button id="setUpButton">Request screen details</button>
|
|
<ul id="testButtons"></ul>
|
|
<ul id="logger"></ul>
|
|
<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 src="resources/helpers.js"></script>
|
|
|
|
<script>
|
|
'use strict';
|
|
|
|
// Waits until `window` is located on `screen` or until 3 seconds elapses.
|
|
async function ensureWindowOnScreen(window, screen) {
|
|
// Returns true if window `w` in on screen `s`.
|
|
const isWindowOnScreen = async (w, s) => {
|
|
const center = {
|
|
x: w.screenLeft + w.outerWidth / 2,
|
|
y: w.screenTop + w.outerHeight / 2
|
|
};
|
|
return center.x >= s.left && (center.x < s.left + s.width) &&
|
|
center.y >= s.top && (center.y < s.top + s.height) &&
|
|
(await w.getScreenDetails()).currentScreen == s;
|
|
}
|
|
// Checks every 100ms if window `w` is on screen `s` up to 3s maximum.
|
|
const waitForWindowOnScreen = async (w, s, resolve, timestamp = Date.now()) => {
|
|
if (!w || w.closed || Date.now() - timestamp > 3000)
|
|
resolve(false);
|
|
else if (await isWindowOnScreen(w, s))
|
|
resolve(true);
|
|
else
|
|
setTimeout(waitForWindowOnScreen.bind(this, w, s, resolve, timestamp), 100);
|
|
}
|
|
return new Promise(resolve => { waitForWindowOnScreen(window, screen, resolve); });
|
|
}
|
|
|
|
// Asserts that the browser window is correctly positioned on `screen`.
|
|
// `expectFullscreen` specifies whether to expect the window to be
|
|
// fullscreen or not.
|
|
async function testWindowOnScreen(test, screen, expectFullscreen) {
|
|
|
|
// In chrome, the requestFullscreen promise may resolve before the
|
|
// transition completes and the bounds may be incorect in the meantime.
|
|
// Wait until the window is on the expected screen.
|
|
// TODO(crbug.com/1330724) Remove this.
|
|
await ensureWindowOnScreen(window, screen);
|
|
|
|
assert_equals(!!document.fullscreenElement, expectFullscreen);
|
|
assert_equals((await window.getScreenDetails()).currentScreen, screen);
|
|
|
|
if (expectFullscreen) {
|
|
// Window bounds should equal the bounds of the screen when in fullscreen.
|
|
assert_equals(window.screenX, screen.left);
|
|
assert_equals(window.screenY, screen.top);
|
|
assert_equals(window.innerWidth, screen.width);
|
|
assert_equals(window.innerHeight, screen.height);
|
|
} else {
|
|
// Verify the window is somewhere within the specified screen
|
|
assert_true(window.screenX >= screen.left);
|
|
assert_true(window.screenY >= screen.top);
|
|
assert_true(window.screenX + window.outerWidth <= screen.left + screen.width);
|
|
assert_true(window.screenY + window.outerHeight <= screen.top + screen.height);
|
|
}
|
|
}
|
|
|
|
promise_test(async setUpTest => {
|
|
await setUpWindowPlacement(setUpTest, setUpButton);
|
|
const screenDetails = await getScreenDetails();
|
|
assert_true(!!screenDetails, 'Error getting screen details');
|
|
for (const [i, fullscreenScreen] of screenDetails.screens.entries()) {
|
|
const originalScreen = screenDetails.currentScreen;
|
|
const swapFullscreen =
|
|
screenDetails.screens[(i + 1) % screenDetails.screens.length];
|
|
let testName =
|
|
`Fullscreen on '${fullscreenScreen.label}' and swap to ${swapFullscreen.label}`;
|
|
promise_test(async fullscreenTest => {
|
|
// Step 1: Enter Fullscreen.
|
|
await addTestTriggerButtonAndAwaitClick(testButtons,
|
|
`Step 1: ${testName} (Enter Fullscreen)`,
|
|
fullscreenTest);
|
|
log(`Requesting fullscreen on screen: ${fullscreenScreen.label}`);
|
|
await document.documentElement.requestFullscreen(
|
|
{ screen: fullscreenScreen }
|
|
);
|
|
await testWindowOnScreen(fullscreenTest, fullscreenScreen,
|
|
/*expectFullscreen*/true);
|
|
// Step 2: Swap to another screen.
|
|
await addTestTriggerButtonAndAwaitClick(testButtons,
|
|
`Step 2: ${testName} (Swap screens)`,
|
|
fullscreenTest);
|
|
log(`Swapping fullscreen to screen: ${swapFullscreen.label}`);
|
|
await document.documentElement.requestFullscreen(
|
|
{ screen: swapFullscreen }
|
|
);
|
|
await testWindowOnScreen(fullscreenTest, swapFullscreen,
|
|
/*expectFullscreen*/true);
|
|
// Step 3: Exit fullscreen. Should restore window to `originalScreen`.
|
|
await addTestTriggerButtonAndAwaitClick(testButtons,
|
|
`Step 3: ${testName} (Exit Fullscreen)`,
|
|
fullscreenTest);
|
|
log(`Exiting fullscreen. Window should restore to ${originalScreen.label}.`);
|
|
await document.exitFullscreen();
|
|
await testWindowOnScreen(fullscreenTest, originalScreen,
|
|
/*expectFullscreen*/false);
|
|
}, testName);
|
|
}
|
|
}, 'Use multi-screen details to request fullscreen on target displays and swap between them');
|
|
</script>
|