<!DOCTYPE html>
<html>
    <head>
        <style>
            .topLevel {
                width: 400px;
                scroll-snap-type: x proximity;
                scroll-snap-align: start end;
                scroll-padding: 10%;
                scroll-snap-margin: 5px 5px 10px 10px;
            }

            .horizontalGallery {
                width: 400px;
                height: 50px;
                overflow-y: hidden;
                overflow-x: auto;
            }

            .horizontalGalleryDrawer {
                width: 3000px;
                height: 50px;
            }

            .colorBox {
                height: 50px;
                width: 400px;
                float: left;
            }

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

            .inheritType {
                scroll-snap-type: inherit;
                scroll-snap-align: center;
                scroll-padding: 20px;
                scroll-snap-margin: 0 1px;
            }

            .inheritAlign {
                scroll-snap-type: both mandatory;
                scroll-snap-align: inherit;
                scroll-padding: 20px;
                scroll-snap-margin: 0 1px;
            }

            .inheritPadding {
                scroll-snap-type: both mandatory;
                scroll-snap-align: center;
                scroll-padding: inherit;
                scroll-snap-margin: 0 1px;
            }

            .inheritMargin {
                scroll-snap-type: both mandatory;
                scroll-snap-align: center;
                scroll-padding: 20px;
                scroll-snap-margin: inherit;
            }

            .inheritAll {
                scroll-snap-type: inherit;
                scroll-snap-align: inherit;
                scroll-padding: inherit;
                scroll-snap-margin: inherit;
            }

            .inheritNone { }

            #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 class="topLevel">
            <div id="noInherit" class="horizontalGallery noInherit">
                <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="inheritType" class="horizontalGallery inheritType" style="scroll-snap-type: inherit;">
                <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="inheritAlign" class="horizontalGallery inheritAlign" style="scroll-snap-align: inherit;">
                <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="inheritPadding" class="horizontalGallery inheritPadding" style="scroll-padding: inherit;">
                <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="inheritMargin" class="horizontalGallery inheritMargin" style="scroll-snap-margin: inherit;">
                <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="inheritAll" class="horizontalGallery inheritAll" style="scroll-snap-type: inherit; scroll-snap-align: inherit; scroll-padding: inherit; scroll-snap-margin: inherit;">
                <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="inheritNone" class="horizontalGallery inheritNone">
                <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>
        <div id="console"></div>
        <script>
        description("Tests 'inherit' on scroll snap properties.");

        var noInherit = document.getElementById('noInherit');
        shouldBeEmptyString("noInherit.style['scroll-snap-type']");
        shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('scroll-snap-type')", "both mandatory");
        shouldBeEmptyString("noInherit.style['scroll-snap-align']");
        shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('scroll-snap-align')", "center");
        shouldBeEmptyString("noInherit.style['scroll-padding']");
        shouldBeEmptyString("noInherit.style['scroll-padding-left']");
        shouldBeEmptyString("noInherit.style['scroll-padding-right']");
        shouldBeEmptyString("noInherit.style['scroll-padding-top']");
        shouldBeEmptyString("noInherit.style['scroll-padding-bottom']");
        shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('scroll-padding')", "20px");
        shouldBeEmptyString("noInherit.style['scroll-snap-margin']");
        shouldBeEmptyString("noInherit.style['scroll-snap-margin-left']");
        shouldBeEmptyString("noInherit.style['scroll-snap-margin-right']");
        shouldBeEmptyString("noInherit.style['scroll-snap-margin-top']");
        shouldBeEmptyString("noInherit.style['scroll-snap-margin-bottom']");
        shouldBeEqualToString("window.getComputedStyle(noInherit).getPropertyValue('scroll-snap-margin')", "0px 1px");
        debug("");

        var inheritType = document.getElementById('inheritType');
        shouldBeEqualToString("inheritType.style['scroll-snap-type']", "inherit");
        shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('scroll-snap-type')", "x");
        shouldBeEmptyString("inheritType.style['scroll-snap-align']");
        shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('scroll-snap-align')", "center");
        shouldBeEmptyString("inheritType.style['scroll-padding']");
        shouldBeEmptyString("inheritType.style['scroll-padding-left']");
        shouldBeEmptyString("inheritType.style['scroll-padding-right']");
        shouldBeEmptyString("inheritType.style['scroll-padding-top']");
        shouldBeEmptyString("inheritType.style['scroll-padding-bottom']");
        shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('scroll-padding')", "20px");
        shouldBeEmptyString("inheritType.style['scroll-snap-margin']");
        shouldBeEmptyString("inheritType.style['scroll-snap-margin-left']");
        shouldBeEmptyString("inheritType.style['scroll-snap-margin-right']");
        shouldBeEmptyString("inheritType.style['scroll-snap-margin-top']");
        shouldBeEmptyString("inheritType.style['scroll-snap-margin-bottom']");
        shouldBeEqualToString("window.getComputedStyle(inheritType).getPropertyValue('scroll-snap-margin')", "0px 1px");
        debug("");

        var inheritAlign = document.getElementById('inheritAlign');
        shouldBeEmptyString("inheritAlign.style['scroll-snap-type']");
        shouldBeEqualToString("window.getComputedStyle(inheritAlign).getPropertyValue('scroll-snap-type')", "both mandatory");
        shouldBeEqualToString("inheritAlign.style['scroll-snap-align']", "inherit");
        shouldBeEqualToString("window.getComputedStyle(inheritAlign).getPropertyValue('scroll-snap-align')", "start end");
        shouldBeEmptyString("inheritAlign.style['scroll-padding']");
        shouldBeEmptyString("inheritAlign.style['scroll-padding-left']");
        shouldBeEmptyString("inheritAlign.style['scroll-padding-right']");
        shouldBeEmptyString("inheritAlign.style['scroll-padding-top']");
        shouldBeEmptyString("inheritAlign.style['scroll-padding-bottom']");
        shouldBeEqualToString("window.getComputedStyle(inheritAlign).getPropertyValue('scroll-padding')", "20px");
        shouldBeEmptyString("inheritAlign.style['scroll-snap-margin']");
        shouldBeEmptyString("inheritAlign.style['scroll-snap-margin-left']");
        shouldBeEmptyString("inheritAlign.style['scroll-snap-margin-right']");
        shouldBeEmptyString("inheritAlign.style['scroll-snap-margin-top']");
        shouldBeEmptyString("inheritAlign.style['scroll-snap-margin-bottom']");
        shouldBeEqualToString("window.getComputedStyle(inheritAlign).getPropertyValue('scroll-snap-margin')", "0px 1px");
        debug("");

        var inheritPadding = document.getElementById('inheritPadding');
        shouldBeEmptyString("inheritPadding.style['scroll-snap-type']");
        shouldBeEqualToString("window.getComputedStyle(inheritPadding).getPropertyValue('scroll-snap-type')", "both mandatory");
        shouldBeEmptyString("inheritPadding.style['scroll-snap-align']");
        shouldBeEqualToString("window.getComputedStyle(inheritPadding).getPropertyValue('scroll-snap-align')", "center");
        shouldBeEqualToString("inheritPadding.style['scroll-padding']", "inherit");
        shouldBeEqualToString("inheritPadding.style['scroll-padding-left']", "inherit");
        shouldBeEqualToString("inheritPadding.style['scroll-padding-right']", "inherit");
        shouldBeEqualToString("inheritPadding.style['scroll-padding-top']", "inherit");
        shouldBeEqualToString("inheritPadding.style['scroll-padding-bottom']", "inherit");
        shouldBeEqualToString("window.getComputedStyle(inheritPadding).getPropertyValue('scroll-padding')", "10%");
        shouldBeEmptyString("inheritPadding.style['scroll-snap-margin']");
        shouldBeEmptyString("inheritPadding.style['scroll-snap-margin-left']");
        shouldBeEmptyString("inheritPadding.style['scroll-snap-margin-right']");
        shouldBeEmptyString("inheritPadding.style['scroll-snap-margin-top']");
        shouldBeEmptyString("inheritPadding.style['scroll-snap-margin-bottom']");
        shouldBeEqualToString("window.getComputedStyle(inheritPadding).getPropertyValue('scroll-snap-margin')", "0px 1px");
        debug("");

        var inheritMargin = document.getElementById('inheritMargin');
        shouldBeEmptyString("inheritMargin.style['scroll-snap-type']");
        shouldBeEqualToString("window.getComputedStyle(inheritMargin).getPropertyValue('scroll-snap-type')", "both mandatory");
        shouldBeEmptyString("inheritMargin.style['scroll-snap-align']");
        shouldBeEqualToString("window.getComputedStyle(inheritMargin).getPropertyValue('scroll-snap-align')", "center");
        shouldBeEmptyString("inheritMargin.style['scroll-padding']");
        shouldBeEmptyString("inheritMargin.style['scroll-padding-left']");
        shouldBeEmptyString("inheritMargin.style['scroll-padding-right']");
        shouldBeEmptyString("inheritMargin.style['scroll-padding-top']");
        shouldBeEmptyString("inheritMargin.style['scroll-padding-bottom']");
        shouldBeEqualToString("window.getComputedStyle(inheritMargin).getPropertyValue('scroll-padding')", "20px");
        shouldBeEqualToString("inheritMargin.style['scroll-snap-margin']", "inherit");
        shouldBeEqualToString("inheritMargin.style['scroll-snap-margin-left']", "inherit");
        shouldBeEqualToString("inheritMargin.style['scroll-snap-margin-right']", "inherit");
        shouldBeEqualToString("inheritMargin.style['scroll-snap-margin-top']", "inherit");
        shouldBeEqualToString("inheritMargin.style['scroll-snap-margin-bottom']", "inherit");
        shouldBeEqualToString("window.getComputedStyle(inheritMargin).getPropertyValue('scroll-snap-margin')", "5px 5px 10px 10px");
        debug("");

        var inheritAll = document.getElementById('inheritAll');
        shouldBeEqualToString("inheritAll.style['scroll-snap-type']", "inherit");
        shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('scroll-snap-type')", "x");
        shouldBeEqualToString("inheritAll.style['scroll-snap-align']", "inherit");
        shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('scroll-snap-align')", "start end");
        shouldBeEqualToString("inheritAll.style['scroll-padding']", "inherit");
        shouldBeEqualToString("inheritAll.style['scroll-padding-left']", "inherit");
        shouldBeEqualToString("inheritAll.style['scroll-padding-right']", "inherit");
        shouldBeEqualToString("inheritAll.style['scroll-padding-top']", "inherit");
        shouldBeEqualToString("inheritAll.style['scroll-padding-bottom']", "inherit");
        shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('scroll-padding')", "10%");
        shouldBeEqualToString("inheritAll.style['scroll-snap-margin']", "inherit");
        shouldBeEqualToString("inheritAll.style['scroll-snap-margin-left']", "inherit");
        shouldBeEqualToString("inheritAll.style['scroll-snap-margin-right']", "inherit");
        shouldBeEqualToString("inheritAll.style['scroll-snap-margin-top']", "inherit");
        shouldBeEqualToString("inheritAll.style['scroll-snap-margin-bottom']", "inherit");
        shouldBeEqualToString("window.getComputedStyle(inheritAll).getPropertyValue('scroll-snap-margin')", "5px 5px 10px 10px");
        debug("");

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