wpt / css / cssom-view / scrollWidthHeightWhenNotScrollable.xht

Status: FAIL | Duration: 55ms | Subtests: 10/12 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (10/12)

Data from commit:
1884860 Copy-on-write style attribute blocks that are in the rule tree (#831) (2026-09-02)

SubtestStatusMessage
elemSimple.clientHeight is the height of the padding edgePASS
elemSimple.scrollHeight is its clientHeightPASS
elemSimple.clientWidth is the width of the padding edgePASS
elemSimple.scrollWidth is its clientWidthPASS
elemOverflow.clientHeight is the height of the padding edgePASS
elemOverflow.scrollHeight is the height of its scrolled contents (plus padding, since we overflowed)FAILassert_equals: expected 200 but got 150
elemOverflow.clientWidth is the width of the padding edgePASS
elemOverflow.scrollHeight is the width of its scrolled contents (plus padding)FAILassert_equals: expected 290 but got 250
elemNestedOverflow.clientHeight is the height of the padding edgePASS
elemNestedOverflow.scrollHeight is the height of its scrolled contents (ignoring padding, since we overflowed)PASS
elemNestedOverflow.clientWidth is the height of the padding edgePASS
elemNestedOverflow.scrollWidth is the width of its scrolled contents (ignoring padding, since we overflowed)PASS

/css/cssom-view/scrollWidthHeightWhenNotScrollable.xht

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS Test: CSSOM View scrollWidth/scrollHeight (for nonscrollable elements)</title>
        <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" />
        <link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-element-scrollwidth" />
        <meta name="flags" content="dom" />
        <script src="/resources/testharness.js" type="text/javascript" />
        <script src="/resources/testharnessreport.js" type="text/javascript" />
        <style type="text/css"><![CDATA[
            #elemSimple, #elemOverflow, #elemNestedOverflow {
                border:1px solid black;
                width:200px;
                height:40px;
                padding-bottom:50px;
                padding-right:40px;
            }
            #elemSimple > div {
                background:yellow;
                width:60px;
                height:30px;
            }
            #elemOverflow > div {
                background:yellow;
                width:250px;
                height:150px;
            }
            #elemNestedOverflow > div {
                background:yellow;
                width:60px;
                height:30px;
            }
            #elemNestedOverflow > div > div {
                background:blue;
                width:250px;
                height:150px;
            }
        ]]></style>
    </head>
    <body>
        <noscript>Test not run - javascript required.</noscript>
        <div id="log" />
        <div id="elemSimple">
            <div />
        </div>
        <div id="elemOverflow">
            <div />
        </div>
        <div id="elemNestedOverflow">
            <div>
                <div />
            </div>
        </div>
        <script type="text/javascript"><![CDATA[
            var elemSimple = document.getElementById("elemSimple");
            var elemOverflow = document.getElementById("elemOverflow");
            var elemNestedOverflow = document.getElementById("elemNestedOverflow");

            test(function(){
                assert_equals(elemSimple.clientHeight, 90);
            }, "elemSimple.clientHeight is the height of the padding edge");

            test(function(){
                assert_equals(elemSimple.scrollHeight, 90);
            }, "elemSimple.scrollHeight is its clientHeight");

            test(function(){
                assert_equals(elemSimple.clientWidth, 240);
            }, "elemSimple.clientWidth is the width of the padding edge");

            test(function(){
                assert_equals(elemSimple.scrollWidth, 240);
            }, "elemSimple.scrollWidth is its clientWidth");

            test(function(){
                assert_equals(elemOverflow.clientHeight, 90);
            }, "elemOverflow.clientHeight is the height of the padding edge");

            test(function(){
                assert_equals(elemOverflow.scrollHeight, 200);
            }, "elemOverflow.scrollHeight is the height of its scrolled contents (plus padding, since we overflowed)");

            test(function(){
                assert_equals(elemOverflow.clientWidth, 240);
            }, "elemOverflow.clientWidth is the width of the padding edge");

            test(function(){
                assert_equals(elemOverflow.scrollWidth, 290);
            }, "elemOverflow.scrollHeight is the width of its scrolled contents (plus padding)");

            test(function(){
                assert_equals(elemNestedOverflow.clientHeight, 90);
            }, "elemNestedOverflow.clientHeight is the height of the padding edge");

            /* This test differs from the spec. All major browsers give the result here, ignoring the
               bottom padding.
            */
            test(function(){
                assert_equals(elemNestedOverflow.scrollHeight, 150);
            }, "elemNestedOverflow.scrollHeight is the height of its scrolled contents (ignoring padding, since we overflowed)");

            test(function(){
                assert_equals(elemNestedOverflow.clientWidth, 240);
            }, "elemNestedOverflow.clientWidth is the height of the padding edge");

            /* This test differs from the spec. All major browsers give the result here, ignoring
               the right padding.
            */
            test(function(){
                assert_equals(elemNestedOverflow.scrollWidth, 250);
            }, "elemNestedOverflow.scrollWidth is the width of its scrolled contents (ignoring padding, since we overflowed)");

        ]]></script>
    </body>
</html>