<html>
<head>

<style>
#border-box {
    box-sizing: border-box;
    width: 55px;
    height: 55px;
    margin: 1px;
    padding: 7px;
    border: 3px solid black;
}

#content-box {
    box-sizing: content-box;
    width: 55px;
    height: 55px;
    margin: 1px;
    padding: 7px;
    border: 3px solid black;
}
</style>

<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/elements-test.js"></script>
<script>

function dumpDimensions()
{
    var element;

    element = document.getElementById("content-box");
    document.getElementById("output-content").textContent = "content-box rendered dimensions: " + element.offsetWidth + " x " + element.offsetHeight;
    element = document.getElementById("border-box");
    document.getElementById("output-border").textContent = "border-box rendered dimensions: " + element.offsetWidth + " x " + element.offsetHeight;
}

function test()
{
    var contentWidthElement;
    var contentHeightElement;

    function getChildTextByClassName(element, className)
    {
        var children = element.children;
        for (var i = 0; i < children.length; ++i) {
            if (children[i].classList && children[i].classList.contains(className))
                return children[i].textContent;
        }
        return null;
    }

    function dumpMetrics(sectionElement)
    {
        var marginElement = sectionElement.getElementsByClassName("margin")[0];
        var borderElement = sectionElement.getElementsByClassName("border")[0];
        var paddingElement = sectionElement.getElementsByClassName("padding")[0];
        var contentDimensions = sectionElement.getElementsByClassName("content")[0].getElementsByTagName("span");
        InspectorTest.addResult("margin: " + getChildTextByClassName(marginElement, "top") + " " + getChildTextByClassName(marginElement, "right") + " " + getChildTextByClassName(marginElement, "bottom") + " " + getChildTextByClassName(marginElement, "left"));
        InspectorTest.addResult("border: " + getChildTextByClassName(borderElement, "top") + " " + getChildTextByClassName(borderElement, "right") + " " + getChildTextByClassName(borderElement, "bottom") + " " + getChildTextByClassName(borderElement, "left"));
        InspectorTest.addResult("padding: " + getChildTextByClassName(paddingElement, "top") + " " + getChildTextByClassName(paddingElement, "right") + " " + getChildTextByClassName(paddingElement, "bottom") + " " + getChildTextByClassName(paddingElement, "left"));
        InspectorTest.addResult("content: " + contentDimensions[0].textContent + " x " + contentDimensions[1].textContent);
    }

    function createDoubleClickEvent()
    {
        var event = document.createEvent("MouseEvent");
        event.initMouseEvent("dblclick", true, true, null, 2, 0, 0, 0, 0, false, false, false, false, 0, null);
        return event;
    }

    InspectorTest.runTestSuite([
        function testBorderBoxInit1(next)
        {
            InspectorTest.selectNodeAndWaitForStyles("border-box", next);
        },

        function testBorderBoxInit2(next)
        {
            section = WebInspector.panels.elements.sidebarPanes.metrics;
            section.expand();
            InspectorTest.runAfterPendingDispatches(next);
        },

        function testInitialBorderBoxMetrics(next)
        {
            var spanElements = section.element.getElementsByClassName("content")[0].getElementsByTagName("span");
            contentWidthElement = spanElements[0];
            contentHeightElement = spanElements[1];
            InspectorTest.addResult("=== Initial border-box ===");
            dumpMetrics(section.element);
            contentWidthElement.dispatchEvent(createDoubleClickEvent());
            contentWidthElement.textContent = "60";
            contentWidthElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
            InspectorTest.runAfterPendingDispatches(next);
        },

        function testModifiedBorderBoxMetrics(next)
        {
            InspectorTest.addResult("=== Modified border-box ===");
            dumpMetrics(section.element);
            next();
        },

        function testContentBoxInit1(next)
        {
            InspectorTest.selectNodeWithId("content-box", next);
        },

        function testContentBoxInit2(next)
        {
            section = WebInspector.panels.elements.sidebarPanes.metrics;
            section.expand();
            InspectorTest.runAfterPendingDispatches(next);
        },

        function testInitialContentBoxMetrics(next)
        {
            var spanElements = section.element.getElementsByClassName("content")[0].getElementsByTagName("span");
            contentWidthElement = spanElements[0];
            contentHeightElement = spanElements[1];
            InspectorTest.addResult("=== Initial content-box ===");
            dumpMetrics(section.element);
            contentWidthElement.dispatchEvent(createDoubleClickEvent());
            contentWidthElement.textContent = "60";
            contentWidthElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
            InspectorTest.runAfterPendingDispatches(next);
            next();
        },

        function testModifiedContentBoxMetrics(next)
        {
            function callback()
            {
                next();
            }

            InspectorTest.addResult("=== Modified content-box ===");
            dumpMetrics(section.element);
            InspectorTest.evaluateInPage("dumpDimensions()", callback);
        }
    ]);
}
</script>
</head>

<body onload="runTest()">
<p>
Tests that content-box and border-box content area dimensions are handled property by the Metrics pane.
</p>
<div id="content-box">content-box</div>
<div id="border-box">border-box</div>
<div id="output-content">zzz</div>
<div id="output-border">zzz</div>
</body>
</html>