mediacapture-streams/BrowserCaptureMediaStreamTrack-restrictTo.https.html - external/github.com/web-platform-tests/wpt - Git at Google

 <!doctype html>
 <html>

 <head>
   <title>BrowserCaptureMediaStreamTrack restrictTo()</title>
   <link rel="help" href="https://screen-share.github.io/element-capture/">
 </head>

 <body>
   <p class="instructions">
     When prompted, accept to give permission to use your audio, video devices.
   </p>
   <h1 class="instructions">Description</h1>
   <p class="instructions">
     This test checks that restricting BrowserCaptureMediaStreamTrack works as
     expected.
   </p>

   <style>
     div {
       height: 100px;
     }
     .stacking {
       opacity: 0.9;
     }
     #container {
       columns:4;
       column-fill:auto;
     }
     .fragmentize {
       height: 50px;
     }
     #target {
       background: linear-gradient(red, blue);
     }
   </style>


   <div id='container'>
     <div id='target'></div>
   </div>
   <video id="video"
          style="border: 2px blue dotted; width: 250px; height: 250px;"
          autoplay playsinline muted></video>

   <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>
     "use strict";

     // For more information, see:
     // https://screen-share.github.io/element-capture/#elements-eligible-for-restriction
     const EligibilityRequirement = {
       StackingContext: "StackingContext",
       OnlyOneBoxFragment: "OnlyOneBoxFragment",
       FlattenedIn3D: "FlattenedIn3D",
     };

     // The target div.
     const div = document.getElementById('target');

     // Returns a promise that, if successful, will resolve to a media stream.
     async function getDisplayMedia() {
       return test_driver.bless('getDisplayMedia', () =>
         navigator.mediaDevices.getDisplayMedia({
           video: { displaySurface: "browser" },
           selfBrowserSurface: "include",
         }));
     }

     // Returns a promise that will resolve successfully if at least one frame is
     // read before the timeout.
     function assertFrameRead(t, state, message) {
       const last_frame_count = state.frame_count;
       return t.step_wait(() => state.frame_count > last_frame_count,
         message, 5000, 10);
     }

     // Returns a promise that will resolve successfully if there are no frames
     // produced for an entire second after being called.
     function assertStopsProducingFrames(t, state, message) {
       let last_frame_count = state.frame_count;

       return t.step_timeout(() => {
         assert_equals(state.frame_count, last_frame_count);
       }, 1000);
     }

     function makeDivEligible() {
       // Must always have a stacking context to be eligible.
       div.classList.add("stacking");
       div.parentElement.classList.remove("fragmented");
       div.style.transform = "";
     }

     function makeDivIneligible(state) {
       switch(state.eligibilityParam) {
         case EligibilityRequirement.StackingContext:
           div.classList.remove("stacking");
           break;

         case EligibilityRequirement.OnlyOneBoxFragment:
           div.parentElement.classList.add("fragmented");
           break;

         case EligibilityRequirement.FlattenedIn3D:
           div.style.transform = "rotateY(90deg)";
           break;
       }
     }

     // Restore element state after each test.
     function cleanupDiv() {
       div.classList.remove("stacking");
       div.parentElement.classList.remove("fragmented");
       div.style.transform = "";
     }

     function startAnimation(t, state) {
       let count = 0;
       function animate() {
         if (!state.running) {
           return;
         }
         count += 1;
         div.innerText = count;
         window.requestAnimationFrame(animate);
       }
       window.requestAnimationFrame(animate);

       // Stop animation as part of cleanup.
       t.add_cleanup(() => { state.running = false; });
     }

     // Updates the state.frame_count value whenever a new frame is received on
     // the passed in media stream track.
     async function readFromTrack(state, track) {
       while (state.running) {
         const reader = new MediaStreamTrackProcessor(track).readable.getReader();
         while (true) {
           const frameOrDone = await reader.read();
           if (frameOrDone.done) {
             break;
           }
           frameOrDone.value.close();
           state.frame_count += 1;
         }
       }
     }

     // Parameterized test method. Note that this returns a Promise that will be
     // resolved to represent success of the entire promise test.
     async function runTest(t, eligibilityParam) {
       let state = {
         eligibilityParam: eligibilityParam,
         frame_count: 0,
         running: true,
         reading: false,
       };
       startAnimation(t, state);

       let videoTrack = undefined;
       return getDisplayMedia().then(stream => {
         t.add_cleanup(() => {
           stream.getTracks().forEach(track => track.stop());
         });
         assert_true(!!stream, "should have resolved to a stream.");
         assert_true(stream.active, "stream should be active.");
         assert_equals(stream.getVideoTracks().length, 1);

         [videoTrack] = stream.getVideoTracks();
         assert_true(videoTrack instanceof MediaStreamTrack,
           "track should be either MediaStreamTrack or a subclass thereof.");
         assert_equals(videoTrack.readyState, "live", "track should be live.");

         // Consume the stream in a video element.
         const video = document.querySelector('video');
         video.srcObject = stream;

         // Remove the video source, so that the stream object can be released.
         t.add_cleanup(() => {video.srcObject = null});

         // Keep track of the number of frames used.
         const readPromise = readFromTrack(state, videoTrack);
         t.add_cleanup(() => readPromise);

         return assertFrameRead(t, state, "Track should produce frames.");
       }).then(() => {
         assert_true(!!RestrictionTarget, "RestrictionTarget exposed.");
         assert_true(!!RestrictionTarget.fromElement,
           "RestrictionTarget.fromElement exposed.");

         return RestrictionTarget.fromElement(div);
       }).then(restrictionTarget => {
         assert_true(!!videoTrack.restrictTo, "restrictTo exposed.");
         assert_true(typeof videoTrack.restrictTo === 'function',
           "restrictTo is a function.");

         return videoTrack.restrictTo(restrictionTarget);
       }).then(() => {
         // By default, elements are not eligible for restriction due to not being
         // placed in their own stacking context.
         return assertStopsProducingFrames(t, state,
           "No new frames after restriction.");
       });

     // TODO(crbug.com/333770107): once the issue with the
     // --disable-threaded-compositing flag is resolved on Chrome's check in bots
     // the rest of this test should be enabled.
     //   ).then(() => {
     //     // Should be unpaused now that the element is eligible.
     //     makeDivEligible();

     //     // Make sure the element state is restored to default between tests.
     //     t.add_cleanup(() => { cleanupDiv(); });

     //     // Restart the reader now that the stream is producing frames again.
     //     return assertFrameRead(t, state,
     //       "Received at least one frame after becoming eligible.");
     //   }).then(() => {

     //     // Should pause if it becomes ineligible again.
     //     makeDivIneligible(state);
     //     return assertStopsProducingFrames(t, state,
     //       "No new frames after becoming ineligible again.");
     //   });
     }

     // Test parameterizations.
     [
       EligibilityRequirement.StackingContext,
       EligibilityRequirement.OnlyOneBoxFragment,
       EligibilityRequirement.FlattenedIn3D,
     ].forEach(param =>
       promise_test(t => runTest(t, param),
         `Tests that restricting MediaStreamTrack objects works as expected (${param}).`
     ));

   </script>
 </body>

 </html>
	<!doctype html>
	<html>

	<head>
	<title>BrowserCaptureMediaStreamTrack restrictTo()</title>
	<link rel="help" href="https://screen-share.github.io/element-capture/">
	</head>

	<body>
	<p class="instructions">
	When prompted, accept to give permission to use your audio, video devices.
	</p>
	<h1 class="instructions">Description</h1>
	<p class="instructions">
	This test checks that restricting BrowserCaptureMediaStreamTrack works as
	expected.
	</p>

	<style>
	div {
	height: 100px;
	}
	.stacking {
	opacity: 0.9;
	}
	#container {
	columns:4;
	column-fill:auto;
	}
	.fragmentize {
	height: 50px;
	}
	#target {
	background: linear-gradient(red, blue);
	}
	</style>


	<div id='container'>
	<div id='target'></div>
	</div>
	<video id="video"
	style="border: 2px blue dotted; width: 250px; height: 250px;"
	autoplay playsinline muted></video>

	<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>
	"use strict";

	// For more information, see:
	// https://screen-share.github.io/element-capture/#elements-eligible-for-restriction
	const EligibilityRequirement = {
	StackingContext: "StackingContext",
	OnlyOneBoxFragment: "OnlyOneBoxFragment",
	FlattenedIn3D: "FlattenedIn3D",
	};

	// The target div.
	const div = document.getElementById('target');

	// Returns a promise that, if successful, will resolve to a media stream.
	async function getDisplayMedia() {
	return test_driver.bless('getDisplayMedia', () =>
	navigator.mediaDevices.getDisplayMedia({
	video: { displaySurface: "browser" },
	selfBrowserSurface: "include",
	}));
	}

	// Returns a promise that will resolve successfully if at least one frame is
	// read before the timeout.
	function assertFrameRead(t, state, message) {
	const last_frame_count = state.frame_count;
	return t.step_wait(() => state.frame_count > last_frame_count,
	message, 5000, 10);
	}

	// Returns a promise that will resolve successfully if there are no frames
	// produced for an entire second after being called.
	function assertStopsProducingFrames(t, state, message) {
	let last_frame_count = state.frame_count;

	return t.step_timeout(() => {
	assert_equals(state.frame_count, last_frame_count);
	}, 1000);
	}

	function makeDivEligible() {
	// Must always have a stacking context to be eligible.
	div.classList.add("stacking");
	div.parentElement.classList.remove("fragmented");
	div.style.transform = "";
	}

	function makeDivIneligible(state) {
	switch(state.eligibilityParam) {
	case EligibilityRequirement.StackingContext:
	div.classList.remove("stacking");
	break;

	case EligibilityRequirement.OnlyOneBoxFragment:
	div.parentElement.classList.add("fragmented");
	break;

	case EligibilityRequirement.FlattenedIn3D:
	div.style.transform = "rotateY(90deg)";
	break;
	}
	}

	// Restore element state after each test.
	function cleanupDiv() {
	div.classList.remove("stacking");
	div.parentElement.classList.remove("fragmented");
	div.style.transform = "";
	}

	function startAnimation(t, state) {
	let count = 0;
	function animate() {
	if (!state.running) {
	return;
	}
	count += 1;
	div.innerText = count;
	window.requestAnimationFrame(animate);
	}
	window.requestAnimationFrame(animate);

	// Stop animation as part of cleanup.
	t.add_cleanup(() => { state.running = false; });
	}

	// Updates the state.frame_count value whenever a new frame is received on
	// the passed in media stream track.
	async function readFromTrack(state, track) {
	while (state.running) {
	const reader = new MediaStreamTrackProcessor(track).readable.getReader();
	while (true) {
	const frameOrDone = await reader.read();
	if (frameOrDone.done) {
	break;
	}
	frameOrDone.value.close();
	state.frame_count += 1;
	}
	}
	}

	// Parameterized test method. Note that this returns a Promise that will be
	// resolved to represent success of the entire promise test.
	async function runTest(t, eligibilityParam) {
	let state = {
	eligibilityParam: eligibilityParam,
	frame_count: 0,
	running: true,
	reading: false,
	};
	startAnimation(t, state);

	let videoTrack = undefined;
	return getDisplayMedia().then(stream => {
	t.add_cleanup(() => {
	stream.getTracks().forEach(track => track.stop());
	});
	assert_true(!!stream, "should have resolved to a stream.");
	assert_true(stream.active, "stream should be active.");
	assert_equals(stream.getVideoTracks().length, 1);

	[videoTrack] = stream.getVideoTracks();
	assert_true(videoTrack instanceof MediaStreamTrack,
	"track should be either MediaStreamTrack or a subclass thereof.");
	assert_equals(videoTrack.readyState, "live", "track should be live.");

	// Consume the stream in a video element.
	const video = document.querySelector('video');
	video.srcObject = stream;

	// Remove the video source, so that the stream object can be released.
	t.add_cleanup(() => {video.srcObject = null});

	// Keep track of the number of frames used.
	const readPromise = readFromTrack(state, videoTrack);
	t.add_cleanup(() => readPromise);

	return assertFrameRead(t, state, "Track should produce frames.");
	}).then(() => {
	assert_true(!!RestrictionTarget, "RestrictionTarget exposed.");
	assert_true(!!RestrictionTarget.fromElement,
	"RestrictionTarget.fromElement exposed.");

	return RestrictionTarget.fromElement(div);
	}).then(restrictionTarget => {
	assert_true(!!videoTrack.restrictTo, "restrictTo exposed.");
	assert_true(typeof videoTrack.restrictTo === 'function',
	"restrictTo is a function.");

	return videoTrack.restrictTo(restrictionTarget);
	}).then(() => {
	// By default, elements are not eligible for restriction due to not being
	// placed in their own stacking context.
	return assertStopsProducingFrames(t, state,
	"No new frames after restriction.");
	});

	// TODO(crbug.com/333770107): once the issue with the
	// --disable-threaded-compositing flag is resolved on Chrome's check in bots
	// the rest of this test should be enabled.
	// ).then(() => {
	// // Should be unpaused now that the element is eligible.
	// makeDivEligible();

	// // Make sure the element state is restored to default between tests.
	// t.add_cleanup(() => { cleanupDiv(); });

	// // Restart the reader now that the stream is producing frames again.
	// return assertFrameRead(t, state,
	// "Received at least one frame after becoming eligible.");
	// }).then(() => {

	// // Should pause if it becomes ineligible again.
	// makeDivIneligible(state);
	// return assertStopsProducingFrames(t, state,
	// "No new frames after becoming ineligible again.");
	// });
	}

	// Test parameterizations.
	[
	EligibilityRequirement.StackingContext,
	EligibilityRequirement.OnlyOneBoxFragment,
	EligibilityRequirement.FlattenedIn3D,
	].forEach(param =>
	promise_test(t => runTest(t, param),
	`Tests that restricting MediaStreamTrack objects works as expected (${param}).`
	));

	</script>
	</body>

	</html>