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

function test()
{
    InspectorTest.runTestSuite([
        function init(next)
        {
            WebInspector.showPanel("elements");
            InspectorTest.selectNodeAndWaitForStyles("inspected", next);
        },

        function keyframesRuleSelector(next)
        {
            // Click "Add new rule".
            document.getElementById("add-style-button-test-id").click();
            var section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][2];
            section._selectorElement.textContent = "@-webkit-keyframes shake";
            section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
            InspectorTest.runAfterPendingDispatches(callback);

            function callback()
            {
                InspectorTest.dumpSelectedElementStyles(true, false, true);
                next();
            }
        }
    ]);
}

</script>
</head>

<body onload="runTest()">
<p>
Tests that adding a new rule with invalid selector works as expected.
</p>

<div id="inspected">Text</div>

</body>
</html>