scrollbar-gutter-005.html | Explore in Territory

<!doctype html>
<meta charset="utf-8">
<title>CSS Overflow: test scrollbar-gutter: stable (classic scrollbars, vertical text)</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:[email protected]"/>
<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#scollbar-gutter-property"/>
<meta name="assert" content="Test scrollbar-gutter: stable with custom classic scrollbars">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>

    .container {
        scrollbar-gutter: stable;
        height: 200px;
        width: 200px;
        margin: 1px;
        padding: 0px;
        border: none;
        background: deepskyblue;
    }

    .content {
        height: 100%;
        width: 100%;
        background: lightsalmon;
    }

    /* ensure that we are using classic scrollbars with a known thickness */
    .classic::-webkit-scrollbar {
        width: 20px;
        height: 20px;
    }
    .classic::-webkit-scrollbar-track {
        background-color: hsla(0, 0%, 40%, 0.4);
    }
    .classic::-webkit-scrollbar-thumb {
        background-color: hsla(0, 0%, 20%, 0.8);
        border-radius: 10px;
    }

    /* writing mode */
    .vertical {
        writing-mode: vertical-rl;
        direction: ltr;
        overflow-y: auto;
    }

    /* overflow on the block direction */
    .vertical.auto      { overflow-x: auto;    }
    .vertical.scroll    { overflow-x: scroll;  }
    .vertical.visible   { overflow:   visible; }
    .vertical.hidden    { overflow-x: hidden;  }

    /* Note: not testing with overflow: clip; */

</style>
<script type="text/javascript">

    function performTest() {
        setup({explicit_done: true});

        // vertical

        test(function() {
            let container = document.getElementById('container_auto_v');
            let content = document.getElementById('content_auto_v');
            assert_equals(container.scrollHeight, 180, "auto/stable scrollHeight");
            assert_equals(container.clientHeight, 180, "auto/stable clientHeight");
            assert_equals(container.offsetTop, content.offsetTop, "auto/stable offsetTop");
            assert_equals(container.clientHeight, content.clientHeight, "auto/stable clientHeight");
            assert_not_equals(container.offsetHeight, content.offsetHeight, "auto/stable offsetHeight");
        }, "overflow auto, scrollbar-gutter stable, vertical-rl");

        test(function() {
            let container = document.getElementById('container_scroll_v');
            let content = document.getElementById('content_scroll_v');
            assert_equals(container.scrollHeight, 180, "scroll/stable scrollHeight");
            assert_equals(container.clientHeight, 180, "scroll/stable clientHeight");
            assert_equals(container.offsetTop, content.offsetTop, "scroll/stable offsetTop");
            assert_equals(container.clientHeight, content.clientHeight, "scroll/stable clientHeight");
            assert_not_equals(container.offsetHeight, content.offsetHeight, "scroll/stable offsetHeight");
        }, "overflow scroll, scrollbar-gutter stable, vertical-rl");

        test(function() {
            let container = document.getElementById('container_visible_v');
            let content = document.getElementById('content_visible_v');
            assert_equals(container.scrollHeight, 200, "visible/stable scrollHeight");
            assert_equals(container.clientHeight, 200, "visible/stable clientHeight");
            assert_equals(container.offsetTop, content.offsetTop, "visible/stable offsetTop");
            assert_equals(container.clientHeight, content.clientHeight, "visible/stable clientHeight");
            assert_equals(container.offsetHeight, content.offsetHeight, "visible/stable offsetHeight");
        }, "overflow visible, scrollbar-gutter stable, vertical-rl");

        test(function() {
            let container = document.getElementById('container_hidden_v');
            let content = document.getElementById('content_hidden_v');
            assert_equals(container.scrollHeight, 180, "hidden/stable scrollHeight");
            assert_equals(container.clientHeight, 180, "hidden/stable clientHeight");
            assert_equals(container.offsetTop, content.offsetTop, "hidden/stable offsetTop");
            assert_equals(container.clientHeight, content.clientHeight, "hidden/stable clientHeight");
            assert_not_equals(container.offsetHeight, content.offsetHeight, "hidden/stable offsetHeight");
        }, "overflow hidden, scrollbar-gutter stable, vertical-rl");

        done();
    }

</script>
<body onload="performTest()">

    Test scrollbar-gutter: stable, writing-mode: vertical-rl

    <div class="container classic vertical auto" id="container_auto_v">
        <div class="content" id="content_auto_v">ｏｖｅｒｆｌｏｗ：ａｕｔｏ</div>
    </div>

    <div class="container classic vertical scroll" id="container_scroll_v">
        <div class="content" id="content_scroll_v">ｏｖｅｒｆｌｏｗ－ｘ：ｓｃｒｏｌｌ</div>
    </div>

    <div class="container classic vertical visible" id="container_visible_v">
        <div class="content" id="content_visible_v">ｏｖｅｒｆｌｏｗ：ｖｉｓｉｂｌｅ</div>
    </div>

    <div class="container classic vertical hidden" id="container_hidden_v">
        <div class="content" id="content_hidden_v">ｏｖｅｒｆｌｏｗ－ｘ：ｈｉｄｄｅｎ</div>
    </div>

</body>
chromium/third_party/blink/web_tests/wpt_internal/css/css-overflow/scrollbar-gutter-005.html
