complex-percentage-height.html | Explore in Territory

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <style type="text/css" media="screen">

            * {
                margin: 0;
                padding: 0;
            }

            /* -------- Test case ---------- */

            #warper {
                margin: 40px;
                width: 400px;
                border: 3px solid blue;
                position: relative;
                height: auto;
            }

            .fill {
                height: 40px;
                margin-bottom: 10px;
                background-color: green;
            }

            #abs_100_height {
                height: 100%;
                width: 200px;
                position: absolute;
                top: 0;
                left: 0;
                border: 3px solid yellow;
            }

            #abs_100_height div {
                height: 100%;
                border: 3px dashed red;
            }

            /* -------- Test case ends ---------- */

            #desc {
                margin: 100px 0 0 50px;
            }

            h3 {
                margin-bottom: 5px;
            }

            ul {
                list-style-position: inside;
                margin-bottom: 20px;
            }

            li {
                margin-bottom: 7px;
            }

            p {
                margin-bottom: 20px;
            }

        </style>

    </head>

    <body>

        <!-- Test case -->

        <div id="warper">

            <div class="fill"></div>
            <div class="fill"></div>
            <div class="fill"></div>

            <div id="abs_100_height">
                <div id="inner_abs_100_height"></div>
            </div>

        </div>

        <!-- Test case ends -->

        <div id="desc">

            <h3>Test case:</h3>
            <ul>
                <li>
                    Blue div has 400px width, dynamic height, and position: relative.
                </li>
                <li>
                    Inside blue div there are 3 other div with height: 40px (and has some bottom margin..)<br>
                    the height of the blue div expands with the green divs inside..
                </li>
                <li>
                    Yellow div has position absolute (and positioned in the top left corner of the blue div)<br>
                    it's height set to 100%<br>
                    the height of the yellow div now equals with the height of the blue div
                </li>
                <li>
                    Red div is inserted into the yellow div, and it's height set to 100%
                </li>
            </ul>

            <h3>Problem:</h3>
            <p>
                The height of the red div <strong>should equals</strong> to the height of the blue (and yellow) div.<br>
                It works right with Opera 9.2, Firefox 2, Camino 1.0.4 and Internet Explorer 7.
            </p>

            <h3>Workaround:</h3>
            <p>
                If you set position absolute to the red div, it's height will expands along with the blue div.
            </p>

            <h3>Result:</h3>
            <div id="result"></div>
        </div>

        <script>
            function gebi(id)
            {
                return document.getElementById(id);
            }

            function addResult(color, message)
            {
                var result = gebi("result");
                var div = document.createElement("div");
                div.style.color = color;
                div.appendChild(document.createTextNode(message));
                result.appendChild(div);
            }

            var blueHeight = gebi("warper").offsetHeight;
            var yellowHeight = gebi("abs_100_height").offsetHeight;
            var redHeight = gebi("inner_abs_100_height").offsetHeight;
            if (redHeight == yellowHeight)
                addResult("green", "PASS: redHeight == yellowHeight");
            else
                addResult("red", "FAILED: redHeight (" + redHeight + ") != yellowHeight (" + yellowHeight + ")");
            if (redHeight == blueHeight)
                addResult("green", "PASS: redHeight == blueHeight");
            else
                addResult("red", "FAILED: redHeight (" + redHeight + ") != blueHeight (" + blueHeight + ")");

            if (window.testRunner)
                testRunner.dumpAsText();
        </script>

    </body>
</html>
chromium/third_party/blink/web_tests/fast/block/positioning/complex-percentage-height.html
