<!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>