chromium/src/third_party/blink/web_tests/external/wpt/payment-request/rejects_if_not_active-manual.https.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>PaymentRequest show() rejects if doc is not fully active</title>
 <link rel="help" href="https://w3c.github.io/payment-request/#show-method">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <body>
 <script>
 setup({
   explicit_done: true,
   explicit_timeout: true,
 });

 const applePay = Object.freeze({
   supportedMethods: "https://apple.com/apple-pay",
   data: {
     version: 3,
     merchantIdentifier: "merchant.com.example",
     countryCode: "US",
     merchantCapabilities: ["supports3DS"],
     supportedNetworks: ["visa"],
   }
 });
 const validMethod = Object.freeze({
   supportedMethods: "basic-card",
 });
 const validMethods = Object.freeze([validMethod, applePay]);

 const validDetails = Object.freeze({
   total: {
     label: "Total due",
       amount: {
       currency: "USD",
       value: "5.00",
     },
   },
 });

 function getLoadedPaymentRequest(iframe, url) {
   return new Promise(resolve => {
     iframe.addEventListener(
       "load",
       () => {
         const { PaymentRequest } = iframe.contentWindow;
         const request = new PaymentRequest(validMethods, validDetails);
         resolve(request);
       },
       { once: true }
     );
     iframe.src = url;
   });
 }

 function testAbortShowIfDocumentIsNotActive() {
   promise_test(async t => {
     const iframe = document.createElement("iframe");
     iframe.allow = "payment";
     document.body.appendChild(iframe);
     // We first got to page1.html, grab a PaymentRequest instance.
     const request1 = await getLoadedPaymentRequest(
       iframe,
       "/payment-request/resources/page1.html"
     );
     // Save the DOMException of page1.html before navigating away.
     const frameDOMException1 = iframe.contentWindow.DOMException;
     // We navigate the iframe again, putting request1's document into an inactive state.
     const request2 = await getLoadedPaymentRequest(
       iframe,
       "/payment-request/resources/page2.html"
     );
     // Now, request1's relevant global object's document is no longer active.
     // So, call .show(), and make sure it rejects appropriately.
     await promise_rejects_dom(
       t,
       "AbortError",
       frameDOMException1,
       request1.show(),
       "Inactive document, so must throw AbortError"
     );
     // request2 has an active document tho, so confirm it's working as expected:
     request2.show();
     await request2.abort();
     await promise_rejects_dom(
       t,
       "InvalidStateError",
       iframe.contentWindow.DOMException,
       request2.show(),
       "Abort already called, so InvalidStateError"
     );
     // We are done, so clean up.
     iframe.remove();
   }, "PaymentRequest.show() aborts if the document is not active.");
 }

 function testAbortShowIfDocumentIsNotFullyActive() {
   promise_test(async t => {
     // We nest two iframes and wait for them to load.
     const outerIframe = document.createElement("iframe");
     outerIframe.allow = "payment";
     document.body.appendChild(outerIframe);
     // Load the outer iframe (we don't care about the awaited request)
     await getLoadedPaymentRequest(
       outerIframe,
       "/payment-request/resources/page1.html"
     );

     // Now we create the inner iframe
     const innerIframe = outerIframe.contentDocument.createElement("iframe");
     innerIframe.allow = "payment";

     // nest them
     outerIframe.contentDocument.body.appendChild(innerIframe);

     // load innerIframe, and get the PaymentRequest instance
     const request = await getLoadedPaymentRequest(
       innerIframe,
       "/payment-request/resources/page2.html"
     );
     // Save DOMException from innerIframe before navigating away.
     const innerIframeDOMException = innerIframe.contentWindow.DOMException;

     // Navigate the outer iframe to a new location.
     // Wait for the load event to fire.
     await new Promise(resolve => {
       outerIframe.addEventListener("load", resolve);
       outerIframe.src = "/payment-request/resources/page2.html";
     });

     const showPromise = request.show();
     // Now, request's relevant global object's document is still active
     // (it is the active document of the inner iframe), but is not fully active
     // (since the parent of the inner iframe is itself no longer active).
     // So, call request.show() and make sure it rejects appropriately.
     await promise_rejects_dom(
       t,
       "AbortError",
       innerIframeDOMException,
       showPromise,
       "Active, but not fully active, so must throw AbortError"
     );
     // We are done, so clean up.

     outerIframe.remove();
   }, "PaymentRequest.show() aborts if the document is active, but not fully active.");
 }
 </script>

 <h2>PaymentRequest show() rejects if doc is not fully active</h2>
 <p>
   Click on each button in sequence from top to bottom without refreshing the
   page. Each button will bring up the Payment Request UI window and then will
   close it automatically. (If a payment sheet stays open, the test has failed.)
 </p>
 <ol>
   <li>
     <button onclick="testAbortShowIfDocumentIsNotActive()">
       PaymentRequest.show() aborts if the document is not active.
     </button>
   </li>
   <li>
     <button onclick="testAbortShowIfDocumentIsNotFullyActive()">
       PaymentRequest.show() aborts if the document is active, but not fully
       active.
     </button>
   </li>
   <li><button onclick="done()">Done!</button></li>
 </ol>
 <small>
   If you find a buggy test, please <a href="https://github.com/web-platform-tests/wpt/issues">file a bug</a>
   and tag one of the <a href="https://github.com/web-platform-tests/wpt/blob/master/payment-request/META.yml">suggested reviewers</a>.
 </small>
	<!DOCTYPE html>
	<meta charset=utf-8>
	<title>PaymentRequest show() rejects if doc is not fully active</title>
	<link rel="help" href="https://w3c.github.io/payment-request/#show-method">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<body>
	<script>
	setup({
	explicit_done: true,
	explicit_timeout: true,
	});

	const applePay = Object.freeze({
	supportedMethods: "https://apple.com/apple-pay",
	data: {
	version: 3,
	merchantIdentifier: "merchant.com.example",
	countryCode: "US",
	merchantCapabilities: ["supports3DS"],
	supportedNetworks: ["visa"],
	}
	});
	const validMethod = Object.freeze({
	supportedMethods: "basic-card",
	});
	const validMethods = Object.freeze([validMethod, applePay]);

	const validDetails = Object.freeze({
	total: {
	label: "Total due",
	amount: {
	currency: "USD",
	value: "5.00",
	},
	},
	});

	function getLoadedPaymentRequest(iframe, url) {
	return new Promise(resolve => {
	iframe.addEventListener(
	"load",
	() => {
	const { PaymentRequest } = iframe.contentWindow;
	const request = new PaymentRequest(validMethods, validDetails);
	resolve(request);
	},
	{ once: true }
	);
	iframe.src = url;
	});
	}

	function testAbortShowIfDocumentIsNotActive() {
	promise_test(async t => {
	const iframe = document.createElement("iframe");
	iframe.allow = "payment";
	document.body.appendChild(iframe);
	// We first got to page1.html, grab a PaymentRequest instance.
	const request1 = await getLoadedPaymentRequest(
	iframe,
	"/payment-request/resources/page1.html"
	);
	// Save the DOMException of page1.html before navigating away.
	const frameDOMException1 = iframe.contentWindow.DOMException;
	// We navigate the iframe again, putting request1's document into an inactive state.
	const request2 = await getLoadedPaymentRequest(
	iframe,
	"/payment-request/resources/page2.html"
	);
	// Now, request1's relevant global object's document is no longer active.
	// So, call .show(), and make sure it rejects appropriately.
	await promise_rejects_dom(
	t,
	"AbortError",
	frameDOMException1,
	request1.show(),
	"Inactive document, so must throw AbortError"
	);
	// request2 has an active document tho, so confirm it's working as expected:
	request2.show();
	await request2.abort();
	await promise_rejects_dom(
	t,
	"InvalidStateError",
	iframe.contentWindow.DOMException,
	request2.show(),
	"Abort already called, so InvalidStateError"
	);
	// We are done, so clean up.
	iframe.remove();
	}, "PaymentRequest.show() aborts if the document is not active.");
	}

	function testAbortShowIfDocumentIsNotFullyActive() {
	promise_test(async t => {
	// We nest two iframes and wait for them to load.
	const outerIframe = document.createElement("iframe");
	outerIframe.allow = "payment";
	document.body.appendChild(outerIframe);
	// Load the outer iframe (we don't care about the awaited request)
	await getLoadedPaymentRequest(
	outerIframe,
	"/payment-request/resources/page1.html"
	);

	// Now we create the inner iframe
	const innerIframe = outerIframe.contentDocument.createElement("iframe");
	innerIframe.allow = "payment";

	// nest them
	outerIframe.contentDocument.body.appendChild(innerIframe);

	// load innerIframe, and get the PaymentRequest instance
	const request = await getLoadedPaymentRequest(
	innerIframe,
	"/payment-request/resources/page2.html"
	);
	// Save DOMException from innerIframe before navigating away.
	const innerIframeDOMException = innerIframe.contentWindow.DOMException;

	// Navigate the outer iframe to a new location.
	// Wait for the load event to fire.
	await new Promise(resolve => {
	outerIframe.addEventListener("load", resolve);
	outerIframe.src = "/payment-request/resources/page2.html";
	});

	const showPromise = request.show();
	// Now, request's relevant global object's document is still active
	// (it is the active document of the inner iframe), but is not fully active
	// (since the parent of the inner iframe is itself no longer active).
	// So, call request.show() and make sure it rejects appropriately.
	await promise_rejects_dom(
	t,
	"AbortError",
	innerIframeDOMException,
	showPromise,
	"Active, but not fully active, so must throw AbortError"
	);
	// We are done, so clean up.

	outerIframe.remove();
	}, "PaymentRequest.show() aborts if the document is active, but not fully active.");
	}
	</script>

	<h2>PaymentRequest show() rejects if doc is not fully active</h2>
	<p>
	Click on each button in sequence from top to bottom without refreshing the
	page. Each button will bring up the Payment Request UI window and then will
	close it automatically. (If a payment sheet stays open, the test has failed.)
	</p>
	<ol>
	<li>
	<button onclick="testAbortShowIfDocumentIsNotActive()">
	PaymentRequest.show() aborts if the document is not active.
	</button>
	</li>
	<li>
	<button onclick="testAbortShowIfDocumentIsNotFullyActive()">
	PaymentRequest.show() aborts if the document is active, but not fully
	active.
	</button>
	</li>
	<li><button onclick="done()">Done!</button></li>
	</ol>
	<small>
	If you find a buggy test, please <a href="https://github.com/web-platform-tests/wpt/issues">file a bug</a>
	and tag one of the <a href="https://github.com/web-platform-tests/wpt/blob/master/payment-request/META.yml">suggested reviewers</a>.
	</small>