css/cssom-view/elementScroll.html

<!DOCTYPE html>
<meta charset=utf-8>
<title>cssom-view - elementScroll</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
    #section {
        width: 300px;
        height: 500px;
        /*position: absolute;*/
        top: 16px;
        left: 16px;
        border: inset gray 3px;
        overflow: hidden;
        background: white;
    }

    #scrollable {
        width: 400px;
        height: 700px;
        background: linear-gradient(135deg, red, blue);
    }

</style>

<section id="section">
    <div id="scrollable"></div>
    <div id="unrelated"></div>
</section>

<script>
    setup({explicit_done:true});
    window.onload = function () {
        var section = document.getElementById("section");
        var unrelated = document.getElementById("unrelated");

        test(function () {
            assert_equals(section.scrollTop, 0, "initial scrollTop should be 0");
            assert_equals(section.scrollLeft, 0, "initial scrollLeft should be 0");

            section.scrollTop  = 30;
            section.scrollLeft = 40;

            assert_equals(section.scrollTop, 30, "changed scrollTop should be 40");
            assert_equals(section.scrollLeft, 40, "changed scrollLeft should be 40");
            assert_equals(unrelated.scrollTop, 0, "unrelated element should not scroll");
            assert_equals(unrelated.scrollLeft, 0, "unrelated element should not scroll");
        },  "Element scrollTop/Left getter/setter test");

        test(function () {
            section.scroll(50, 60);

            assert_equals(section.scrollLeft, 50, "changed scrollLeft should be 50");
            assert_equals(section.scrollTop, 60, "changed scrollTop should be 60");
        },  "Element scroll test (two arguments)");

        test(function () {
            section.scroll({left: 55, top: 65});

            assert_equals(section.scrollLeft, 55, "changed scrollLeft should be 55");
            assert_equals(section.scrollTop, 65, "changed scrollTop should be 65");

            section.scroll({left: 85});

            assert_equals(section.scrollLeft, 85, "changed scrollLeft should be 85");
            assert_equals(section.scrollTop, 65, "scrollTop should stay at 65");

            section.scroll({top: 75});

            assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85");
            assert_equals(section.scrollTop, 75, "changed scrollTop should be 75");

            section.scroll({});

            assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85");
            assert_equals(section.scrollTop, 75, "scrollTop should stay at 75");

            section.scroll();

            assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85");
            assert_equals(section.scrollTop, 75, "scrollTop should stay at 75");
        },  "Element scroll test (one argument)");

        test(function () {
            section.scrollTo(80, 70);

            assert_equals(section.scrollLeft, 80, "changed scrollLeft should be 70");
            assert_equals(section.scrollTop, 70, "changed scrollTop should be 80");
        }, "Element scrollTo test (two arguments)");

        test(function () {
            section.scrollTo({left: 75, top: 85});

            assert_equals(section.scrollLeft, 75, "changed scrollLeft should be 75");
            assert_equals(section.scrollTop, 85, "changed scrollTop should be 85");

            section.scrollTo({left: 65});

            assert_equals(section.scrollLeft, 65, "changed scrollLeft should be 65");
            assert_equals(section.scrollTop, 85, "scrollTop should stay at 85");

            section.scrollTo({top: 55});

            assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 65");
            assert_equals(section.scrollTop, 55, "changed scrollTop should be 55");

            section.scrollTo({});

            assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 65");
            assert_equals(section.scrollTop, 55, "scrollTop should stay at 55");

            section.scrollTo();

            assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 55");
            assert_equals(section.scrollTop, 55, "scrollTop should stay at 55");
        },  "Element scrollTo test (one argument)");

        test(function () {
            var left = section.scrollLeft;
            var top = section.scrollTop;

            section.scrollBy(10, 20);

            assert_equals(section.scrollLeft, left + 10, "increment of scrollLeft should be 10")
            assert_equals(section.scrollTop, top + 20, "increment of scrollTop should be 20")
        }, "Element scrollBy test (two arguments)");

        test(function () {
            var left = section.scrollLeft;
            var top = section.scrollTop;

            section.scrollBy({left: 5, top: 15});
            left += 5
            top += 15

            assert_equals(section.scrollLeft, left, "increment of scrollLeft should be 5")
            assert_equals(section.scrollTop, top, "increment of scrollTop should be 15")

            section.scrollBy({left: -15});
            left -= 15

            assert_equals(section.scrollLeft, left, "decrement of scrollLeft should be 15")
            assert_equals(section.scrollTop, top, "scrollTop should not be modified")

            section.scrollBy({top: -5});
            top -= 5;

            assert_equals(section.scrollLeft, left, "scrollLeft should not be modified")
            assert_equals(section.scrollTop, top, "decrement of scrollTop should be 5")

            section.scrollBy({});

            assert_equals(section.scrollLeft, left, "scrollLeft should not be modified")
            assert_equals(section.scrollTop, top, "scrollTop should not be modified")

            section.scrollBy();

            assert_equals(section.scrollLeft, left, "scrollLeft should not be modified")
            assert_equals(section.scrollTop, top, "scrollTop should not be modified")
        }, "Element scrollBy test (one argument)");

        test(function () {
            section.scrollTop  = 1000;
            section.scrollLeft = 1000;

            assert_equals(section.scrollTop, 700 - 500, "changed scrollTop should be 200");
            assert_equals(section.scrollLeft, 400 - 300, "changed scrollLeft should be 100");

        }, "Element scroll maximum test");

        done();
    };
</script>