<html>
<head>

<style>
h1 {
    color: #FF2;
    opacity: .5;
    -webkit-transform: rotate(1000000000000000065537deg);
}
</style>

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

function test()
{
    var section;

    InspectorTest.runTestSuite([
        function testInit(next)
        {
            InspectorTest.selectNodeAndWaitForStyles("inspected", expandSection);

            function expandSection()
            {
                section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][2];
                section.expand();
                next();
            }
        },

        function testAlterColor(next)
        {
            var colorTreeElement = section.findTreeElementWithName("color");
            colorTreeElement.startEditing(colorTreeElement.valueElement);

            // Most significant digit increment ('F') should not change the value.
            colorTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("PageUp", false, false, true));
            colorTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Up"));
            colorTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("PageDown"));
            colorTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("PageDown", false, false, true));
            InspectorTest.addResult(colorTreeElement.listItemElement.textContent);
            next();
        },

        function testAlterNumber(next)
        {
            var opacityTreeElement = section.findTreeElementWithName("opacity");
            opacityTreeElement.startEditing(opacityTreeElement.valueElement);
            // 0.5 (initial)
            opacityTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Up", false, true, false)); // Alt-Up
            // 0.6
            opacityTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Up"));
            // 1.6
            opacityTreeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("PageUp"));
            // 11.6
            InspectorTest.addResult(opacityTreeElement.listItemElement.textContent);
            next();
        },

        function testAlterBigNumber(next)
        {
            var treeElement = section.findTreeElementWithName("-webkit-transform");
            treeElement.startEditing(treeElement.valueElement);
            var selection = window.getSelection();
            var range = selection.getRangeAt(0);
            var newRange = document.createRange();
            newRange.setStart(range.startContainer, 10);
            newRange.setEnd(range.startContainer, 10);
            selection.removeAllRanges();
            selection.addRange(newRange);
            treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Up"));
            treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("PageUp"));
            InspectorTest.addResult(treeElement.listItemElement.textContent);
            next();
        }
    ]);
}
</script>
</head>

<body onload="runTest()">
<p>
Tests that numeric and color values are incremented/decremented correctly.
</p>
<h1 id="inspected">Inspect Me</h1>
</body>
</html>