blob: f0ee2603d8edd45117c70c1378f8b76b5e6a8f5f [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test rendering Apple Pay buttons in version 4</title>
<style>
.apple-pay-button {
-webkit-appearance: -apple-pay-button;
display: block;
}
.white {
-apple-pay-button-style: white;
}
.white-outline {
-apple-pay-button-style: white-outline;
}
.black {
-apple-pay-button-style: black;
}
.check-out {
-apple-pay-button-type: check-out;
}
.book {
-apple-pay-button-type: book;
}
.subscribe {
-apple-pay-button-type: subscribe;
}
.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 ["check-out", "book", "subscribe"]) {
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>