elementScroll.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom-view/elementScroll.html - WPT Dashboard Interop Dashboard

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