blob: 661f3527f4cb28e84f584e8bba58f266471ac71d [file] [log] [blame]
<html>
<head>
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/elements-test.js"></script>
<script>
function test()
{
WebInspector.showPanel("elements");
InspectorTest.selectNodeAndWaitForStyles("inspected", step1);
InspectorTest.addSniffer(WebInspector.UISourceCode.prototype, "addRevision", revisionAdded);
var treeElement;
var hasResourceChanged;
function step1()
{
// 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 = "foo, " + section._selectorElement.textContent + ", bar";
section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
InspectorTest.runAfterPendingDispatches(step2);
}
function step2()
{
var section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][2];
var newProperty = section.addNewBlankProperty();
newProperty.startEditing();
newProperty.nameElement.textContent = "color";
newProperty.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
newProperty.valueElement.textContent = "maroon";
newProperty.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
InspectorTest.selectNodeAndWaitForStyles("other", step3);
}
function step3()
{
// Click "Add new rule".
document.getElementById("add-style-button-test-id").click();
InspectorTest.selectNodeAndWaitForStyles("inspected", step4);
}
function step4()
{
InspectorTest.addResult("After adding new rule (inspected):");
InspectorTest.dumpSelectedElementStyles(true, false, true, true);
InspectorTest.selectNodeAndWaitForStyles("other", step5);
}
function step5()
{
InspectorTest.addResult("After adding new rule (other):");
InspectorTest.dumpSelectedElementStyles(true, false, true);
InspectorTest.completeTest();
}
function revisionAdded(revision)
{
InspectorTest.addResult("Revision added: " + this.displayName());
}
}
</script>
</head>
<body onload="runTest()">
<p>
Tests that adding a new rule works after switching nodes.
</p>
<div id="inspected" style="font-size: 12px">Text</div>
<div id="other" style="color:red"></div>
</body>
</html>