<!DOCTYPE html>
<html>
    <head>
        <style>
            .horizontalGallery {
                width: 400px;
                height: 50px;
                overflow-y: hidden;
                overflow-x: auto;
            }
            .verticalGallery {
                width: 400px;
                height: 50px;
                display: inline-block;
                overflow-x: hidden;
                overflow-y: auto;
            }
            .horizontalGalleryDrawer {
                width: 3000px;
                height: 50px;
            }
            .verticalGalleryDrawer {
                width: 400px;
                height: 300px;
            }
            .colorBox {
                height: 50px;
                width: 400px;
                float: left;
            }

            .noInitial {
                scroll-snap-type: both;
                scroll-snap-align: center;
                scroll-padding: 20px;
                scroll-snap-margin: 1px;
            }

            .initialType {
                scroll-snap-type: initial;
                scroll-snap-align: center;
                scroll-padding: 20px;
                scroll-snap-margin: 1px;
            }

            .initialPadding {
                scroll-snap-type: both;
                scroll-snap-align: center;
                scroll-padding: initial;
                scroll-snap-margin: 1px;
            }

            .initialMargin {
                scroll-snap-type: both;
                scroll-snap-align: center;
                scroll-padding: 20px;
                scroll-snap-margin: initial;
            }

            .initialAlign {
                scroll-snap-type: both;
                scroll-snap-align: initial;
                scroll-padding: 20px;
                scroll-snap-margin: 1px;
            }

            .allInitial {
                scroll-snap-type: initial;
                scroll-snap-align: initial;
                scroll-padding: initial;
                scroll-snap-margin: initial;
            }

            #item0 { background-color: red; }
            #item1 { background-color: green; }
            #item2 { background-color: blue; }
            #item3 { background-color: aqua; }
            #item4 { background-color: yellow; }
            #item5 { background-color: fuchsia; }
        </style>
        <script src="../../resources/js-test-pre.js"></script>
    </head>
    <body>
        <div style="width: 400px">
            <div id="noInitial" class="horizontalGallery noInitial">
                <div class="horizontalGalleryDrawer">
                    <div id="item0" class="colorBox"></div>
                    <div id="item1" class="colorBox"></div>
                    <div id="item2" class="colorBox"></div>
                    <div id="item3" class="colorBox"></div>
                    <div id="item4" class="colorBox"></div>
                    <div id="item5" class="colorBox"></div>
                </div>
            </div>
            <div id="initialType" class="horizontalGallery initialType" style="scroll-snap-type: initial">
                <div class="horizontalGalleryDrawer">
                    <div id="item0" class="colorBox"></div>
                    <div id="item1" class="colorBox"></div>
                    <div id="item2" class="colorBox"></div>
                    <div id="item3" class="colorBox"></div>
                    <div id="item4" class="colorBox"></div>
                    <div id="item5" class="colorBox"></div>
                </div>
            </div>
            <div id="initialPadding" class="horizontalGallery initialPadding" style="scroll-padding: initial">
                <div class="horizontalGalleryDrawer">
                    <div id="item0" class="colorBox"></div>
                    <div id="item1" class="colorBox"></div>
                    <div id="item2" class="colorBox"></div>
                    <div id="item3" class="colorBox"></div>
                    <div id="item4" class="colorBox"></div>
                    <div id="item5" class="colorBox"></div>
                </div>
            </div>
            <div id="initialMargin" class="horizontalGallery initialMargin" style="scroll-snap-margin: initial">
                <div class="horizontalGalleryDrawer">
                    <div id="item0" class="colorBox"></div>
                    <div id="item1" class="colorBox"></div>
                    <div id="item2" class="colorBox"></div>
                    <div id="item3" class="colorBox"></div>
                    <div id="item4" class="colorBox"></div>
                    <div id="item5" class="colorBox"></div>
                </div>
            </div>
            <div id="initialAlign" class="horizontalGallery initialAlign" style="scroll-snap-align: initial">
                <div class="horizontalGalleryDrawer">
                    <div id="item0" class="colorBox"></div>
                    <div id="item1" class="colorBox"></div>
                    <div id="item2" class="colorBox"></div>
                    <div id="item3" class="colorBox"></div>
                    <div id="item4" class="colorBox"></div>
                    <div id="item5" class="colorBox"></div>
                </div>
            </div>
            <div id="allInitial" class="horizontalGallery allInitial" style="scroll-snap-type: initial; scroll-padding: initial; scroll-snap-margin: initial; scroll-snap-align: initial;">
                <div class="horizontalGalleryDrawer">
                    <div id="item0" class="colorBox"></div>
                    <div id="item1" class="colorBox"></div>
                    <div id="item2" class="colorBox"></div>
                    <div id="item3" class="colorBox"></div>
                    <div id="item4" class="colorBox"></div>
                    <div id="item5" class="colorBox"></div>
                </div>
            </div>
            <div id="allInitialY" class="verticalGallery noInitial" style="scroll-snap-type: initial; scroll-padding: initial; scroll-snap-margin: initial; scroll-snap-align: initial;">
                <div class="verticalGalleryDrawer">
                    <div id="item0" class="colorBox"></div>
                    <div id="item1" class="colorBox"></div>
                    <div id="item2" class="colorBox"></div>
                    <div id="item3" class="colorBox"></div>
                    <div id="item4" class="colorBox"></div>
                    <div id="item5" class="colorBox"></div>
                </div>
            </div>
        </div>
        <div id="console"></div>
        <script>
        description("Tests 'initial' on scroll snap properties.");

        var noInitial = document.getElementById('noInitial');
        shouldBeEmptyString("noInitial.style['scroll-snap-type']");
        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-type')", "both");
        shouldBeEmptyString("noInitial.style['scroll-padding']");
        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-padding')", "20px");
        shouldBeEmptyString("noInitial.style['scroll-snap-margin']");
        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-margin')", "1px");
        shouldBeEmptyString("noInitial.style['scroll-snap-align']");
        shouldBeEqualToString("window.getComputedStyle(noInitial).getPropertyValue('scroll-snap-align')", "center");

        var initialType = document.getElementById('initialType');
        shouldBeEqualToString("initialType.style['scroll-snap-type']", "initial");
        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-snap-type')", "none");
        shouldBeEmptyString("initialType.style['scroll-padding']");
        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-padding')", "20px");
        shouldBeEmptyString("initialType.style['scroll-snap-margin']");
        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-snap-margin')", "1px");
        shouldBeEmptyString("initialType.style['scroll-snap-align']");
        shouldBeEqualToString("window.getComputedStyle(initialType).getPropertyValue('scroll-snap-align')", "center");

        var initialPadding = document.getElementById('initialPadding');
        shouldBeEmptyString("initialPadding.style['scroll-snap-type']");
        shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-type')", "both");
        shouldBeEqualToString("initialPadding.style['scroll-padding']", "initial");
        shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-padding')", "auto");
        shouldBeEmptyString("initialPadding.style['scroll-snap-margin']");
        shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-margin')", "1px");
        shouldBeEmptyString("initialPadding.style['scroll-snap-align']");
        shouldBeEqualToString("window.getComputedStyle(initialPadding).getPropertyValue('scroll-snap-align')", "center");

        var initialMargin = document.getElementById('initialMargin');
        shouldBeEmptyString("initialMargin.style['scroll-snap-type']");
        shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-type')", "both");
        shouldBeEmptyString("initialMargin.style['scroll-padding']");
        shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-padding')", "20px");
        shouldBeEqualToString("initialMargin.style['scroll-snap-margin']", "initial");
        shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-margin')", "0px");
        shouldBeEmptyString("initialMargin.style['scroll-snap-align']");
        shouldBeEqualToString("window.getComputedStyle(initialMargin).getPropertyValue('scroll-snap-align')", "center");

        var initialAlign = document.getElementById('initialAlign');
        shouldBeEmptyString("initialAlign.style['scroll-snap-type']");
        shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-type')", "both");
        shouldBeEmptyString("initialAlign.style['scroll-padding']");
        shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-padding')", "20px");
        shouldBeEmptyString("initialAlign.style['scroll-snap-margin']");
        shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-margin')", "1px");
        shouldBeEqualToString("initialAlign.style['scroll-snap-align']", "initial");
        shouldBeEqualToString("window.getComputedStyle(initialAlign).getPropertyValue('scroll-snap-align')", "none");

        var allInitial = document.getElementById('allInitial');
        shouldBeEqualToString("allInitial.style['scroll-snap-type']", "initial");
        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-type')", "none");
        shouldBeEqualToString("allInitial.style['scroll-padding']", "initial");
        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-padding')", "auto");
        shouldBeEqualToString("allInitial.style['scroll-snap-margin']", "initial");
        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-margin')", "0px");
        shouldBeEqualToString("allInitial.style['scroll-snap-align']", "initial");
        shouldBeEqualToString("window.getComputedStyle(allInitial).getPropertyValue('scroll-snap-align')", "none");
        </script>
        <script src="../../resources/js-test-post.js"></script>
    </body>
</html>