<html>
<head>
    <script src="resources/property-names.js"></script>
    <script>
        if (window.testRunner)
            testRunner.dumpAsText();

        function log(message)
        {
            var console = document.getElementById("console");
            console.appendChild(document.createTextNode(message + "\n"));
        }

        function dumpComputedStyle(element, properties)
        {
            var style = getComputedStyle(element);

            if (!properties) {
                for (var i = 0; i != style.length; ++i) {
                    var name = style.item(i);
                    if (!propertiesToTest[name])
                        continue;
                    log(name + ": " + style.getPropertyValue(name));
                }
                properties = hiddenComputedStyleProperties;
            }

            for (var i = 0; i != properties.length; ++i) {
                var name = properties[i];
                log(name + ": " + style.getPropertyValue(name));
            }
            log("");
        }

        function test()
        {
            var outerDiv = document.getElementById("outer");
            var middleDiv = document.getElementById("middle");
            var innerDiv = document.getElementById("inner");

            log("Computed style of an element whose parent's 'display' value is 'none':");
            dumpComputedStyle(innerDiv);

            outerDiv.style.color = "blue";
            middleDiv.style.fontSize = "large";
            log("After changing grandparent's 'color' and the parent's 'font-size' inherited properties:");
            dumpComputedStyle(innerDiv, ["border-top-width", "color"]);

            middleDiv.style.display = "block";
            log("After changing the parent's 'display' property to 'block', so that the child gets a renderer:");
            dumpComputedStyle(innerDiv, ["height", "margin-left", "width"]);

            middleDiv.style.display = "";
            log("After changing the parent's 'display' property back to 'none':");
            dumpComputedStyle(innerDiv, ["height", "margin-left", "width"]);
        }
    </script>
    <style>
        div#middle { display: none; width: 700px; }
        div#inner { background: green; border-top: 1em solid; height: 100px; margin-left: auto; width: 50%; }
    </style>
</head>
<body onload="test()">
    <pre id="console"></pre>
    <div id="outer">
        <div id="middle">
            <div id="inner">
            </div>
        </div>
    </div>
</body>
</html>