| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Test rendering Apple Pay buttons</title> |
| <style> |
| .apple-pay-button { |
| -webkit-appearance: -apple-pay-button; |
| display: block; |
| float: left; |
| } |
| |
| .white { |
| -apple-pay-button-style: white; |
| } |
| |
| .white-outline { |
| -apple-pay-button-style: white-outline; |
| } |
| |
| .black { |
| -apple-pay-button-style: black; |
| } |
| |
| .plain { |
| -apple-pay-button-type: plain; |
| } |
| |
| .buy { |
| -apple-pay-button-type: buy; |
| } |
| |
| .set-up { |
| -apple-pay-button-type: set-up; |
| } |
| |
| .donate { |
| -apple-pay-button-type: donate; |
| } |
| .borderRadiusLarge { |
| border-top-left-radius: 20px/21px; |
| border-top-right-radius: 25px; |
| border-bottom-left-radius: 10px/1px; |
| border-bottom-right-radius: 5px; |
| } |
| </style> |
| </head> |
| <body bgcolor="#E6E6FA"> |
| <script> |
| for (let style of ["white", "white-outline", "black"]) { |
| for (let type of ["plain", "buy", "set-up", "donate"]) { |
| var button = document.createElement("button"); |
| button.classList.add("apple-pay-button", style, type, "borderRadiusLarge"); |
| var buttonNoRadius = document.createElement("button"); |
| buttonNoRadius.classList.add("apple-pay-button", style, type); |
| document.body.appendChild(button); |
| document.body.appendChild(buttonNoRadius); |
| } |
| } |
| </script> |
| </body> |
| </html> |
