| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset='utf-8'> |
| <script src='/resources/js-test-pre.js'></script> |
| <meta charset='utf-8'> |
| </head> |
| <body> |
| <script> |
| function testButton(style, type, version) |
| { |
| shouldBe(`CSS.supports("-apple-pay-button-style: ${style}")`, 'true'); |
| |
| supportsVersion = ApplePaySession.supportsVersion(version); |
| shouldBe(`CSS.supports("-apple-pay-button-type: ${type}")`, 'supportsVersion'); |
| |
| let button = document.createElement('button'); |
| button.setAttribute('style', `-webkit-appearance: -apple-pay-button; -apple-pay-button-style: ${style}; -apple-pay-button-type: ${type}`); |
| document.body.appendChild(button); |
| |
| computedStyle = getComputedStyle(button); |
| expectedStyle = style; |
| expectedType = supportsVersion ? type : 'plain'; |
| shouldBe('computedStyle.getPropertyValue("-webkit-appearance")', '"-apple-pay-button"'); |
| shouldBe('computedStyle.getPropertyValue("-apple-pay-button-style")', 'expectedStyle'); |
| shouldBe('computedStyle.getPropertyValue("-apple-pay-button-type")', 'expectedType'); |
| } |
| |
| description('Test Apple Pay button types and styles'); |
| |
| for (let style of ['white', 'white-outline', 'black']) { |
| for (let type of ['plain', 'buy', 'set-up', 'donate', 'check-out', 'book', 'subscribe']) { |
| testButton(style, type, 4); |
| } |
| |
| for (let type of ['reload', 'add-money', 'top-up', 'order', 'rent', 'support', 'contribute', 'tip']) { |
| testButton(style, type, 10); |
| } |
| } |
| </script> |
| <script src="/resources/js-test-post.js"></script> |
| </body> |
| </html> |
