window-placement/multi-screen-fullscreen-manual.tentative.https.html - external/github.com/web-platform-tests/wpt - Git at Google

 <!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>
	<!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>