mirror of
https://github.com/servo/servo
synced 2026-05-11 17:37:21 +02:00
172 lines
5.5 KiB
HTML
172 lines
5.5 KiB
HTML
<!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>
|