[Payment Request] Update web platform tests
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / payment-request / rejects_if_not_active.https.html
1 <!DOCTYPE html>
2 <meta charset=utf-8>
3 <link rel="help" href="https://w3c.github.io/payment-request/#show()-method">
4 <title>PaymentRequest show() rejects if doc is not fully active</title>
5 <script src="/resources/testharness.js"></script>
6 <script src="/resources/testharnessreport.js"></script>
7 <script src="/resources/testdriver.js"></script>
8 <script src="/resources/testdriver-vendor.js"></script>
9 <link rel="help" href="https://w3c.github.io/payment-request/#dom-paymentrequest-show()">
10 <body>
11 <script>
12 const validMethod = Object.freeze({
13   supportedMethods: "basic-card",
14 });
15 const validMethods = Object.freeze([validMethod]);
16 const validAmount = Object.freeze({
17   currency: "USD",
18   value: "5.00",
19 });
20 const validTotal = Object.freeze({
21   label: "Total due",
22   amount: validAmount,
23 });
24 const validDetails = Object.freeze({
25   total: validTotal,
26 });
27
28 function getLoadedPaymentRequest(iframe, url) {
29   return new Promise(resolve => {
30     iframe.addEventListener(
31       "load",
32       () => {
33         const { PaymentRequest } = iframe.contentWindow;
34         const request = new PaymentRequest(validMethods, validDetails);
35         resolve(request);
36       },
37       { once: true }
38     );
39     iframe.src = url;
40   });
41 }
42
43 promise_test(async t => {
44   const iframe = document.createElement("iframe");
45   iframe.allowPaymentRequest = true;
46   document.body.appendChild(iframe);
47   // We first got to page1.html, grab a PaymentRequest instance.
48   const request1 = await getLoadedPaymentRequest(
49     iframe,
50     "/payment-request/resources/page1.html"
51   );
52   // We navigate the iframe again, putting request1's document into an inactive state.
53   const request2 = await getLoadedPaymentRequest(
54     iframe,
55     "/payment-request/resources/page2.html"
56   );
57   await test_driver.bless("show payment request", async () => {
58     // Now, request1's relevant global object's document is no longer active.
59     // So, call .show(), and make sure it rejects appropriately.
60     await promise_rejects(
61       t,
62       "AbortError",
63       request1.show(),
64       "Inactive document, so must throw AbortError"
65     );
66   });
67   await test_driver.bless("show payment request", async () => {
68     // request2 has an active document tho, so confirm it's working as expected:
69     request2.show();
70     await request2.abort();
71     await promise_rejects(
72       t,
73       "InvalidStateError",
74       request2.show(),
75       "Abort already called, so InvalidStateError"
76     );
77     // We are done, so clean up.
78     iframe.remove();
79   });
80 }, "PaymentRequest.show() aborts if the document is not active");
81
82 promise_test(async t => {
83   // We nest two iframes and wait for them to load.
84   const outerIframe = document.createElement("iframe");
85   outerIframe.allowPaymentRequest = true;
86   document.body.appendChild(outerIframe);
87   // Load the outer iframe (we don't care about the awaited request)
88   await getLoadedPaymentRequest(
89     outerIframe,
90     "/payment-request/resources/page1.html"
91   );
92
93   // Now we create the inner iframe
94   const innerIframe = outerIframe.contentDocument.createElement("iframe");
95   innerIframe.allowPaymentRequest = true;
96
97   // nest them
98   outerIframe.contentDocument.body.appendChild(innerIframe);
99
100   // load innerIframe, and get the PaymentRequest instance
101   const request = await getLoadedPaymentRequest(
102     innerIframe,
103     "/payment-request/resources/page2.html"
104   );
105
106   // Navigate the outer iframe to a new location.
107   // Wait for the load event to fire.
108   await new Promise(resolve => {
109     outerIframe.addEventListener("load", resolve);
110     outerIframe.src = "/payment-request/resources/page2.html";
111   });
112
113   const showPromise = await test_driver.bless("show payment request", () => {
114     return request.show();
115   });
116   // Now, request's relevant global object's document is still active
117   // (it is the active document of the inner iframe), but is not fully active
118   // (since the parent of the inner iframe is itself no longer active).
119   // So, call request.show() and make sure it rejects appropriately.
120   await promise_rejects(
121     t,
122     "AbortError",
123     showPromise,
124     "Active, but not fully active, so must throw AbortError"
125   );
126   // We are done, so clean up.
127
128   iframe.remove();
129 }, "PaymentRequest.show() aborts if the document is active, but not fully active");
130
131 promise_test(async t => {
132   const iframe = document.createElement("iframe");
133   iframe.allowPaymentRequest = true;
134   document.body.appendChild(iframe);
135   // Make a request in the iframe.
136   const request = await getLoadedPaymentRequest(
137     iframe,
138     "/payment-request/resources/page1.html"
139   );
140   const showPromise = await test_driver.bless("show payment request", () => {
141     return request.show();
142   });
143   // Navigate the iframe to a new location. Wait for the load event to fire.
144   await new Promise(resolve => {
145     iframe.addEventListener("load", resolve);
146     iframe.src = "/payment-request/resources/page2.html";
147   });
148   await promise_rejects(
149     t,
150     "AbortError",
151     showPromise,
152     "The iframe was navigated away, so showPromise must reject with AbortError"
153   );
154   // We are done, so clean up.
155   iframe.remove();
156 }, "If a payment request is showing, but its document is navigated away (so no longer fully active), the payment request aborts.");
157 </script>