<?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 and scrollHeight</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;
                overflow:hidden;
                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");

            /* This test differs from the spec. Opera and Webkit meet the spec, IE9 and Firefox
               give the result here. It seems that in this case Opera and Webkit place
               the padding-bottom below elemOverflow's child (i.e. below elemOverflow's bottom border);
               you can scroll to it. IE9 and Firefox do not. I believe this is a Webkit/Opera bug
               (If you remove overflow:hidden then the padding-bottom moves back to be above the bottom
               border, as expected.)
               The underlying issue seems to be whether bottom padding on a scrollable element is
               always placed at the element's bottom border and not scrolled, or else deemed to
               belong to the scrolled content and placed below the scrolled element's children.
               Commenting out for now, because this is not really a CSSOM issue, but an issue
               over the layout of elements with 'overflow'.

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

            test(function(){
                assert_equals(elemOverflow.clientWidth, 240);
            }, "elemOverflow.clientWidth is the width 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(elemOverflow.scrollWidth, 250);
            }, "elemOverflow.scrollHeight is the width of its scrolled contents (ignoring padding, since we overflowed)");

            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.
            */
            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>