blob: 6f3fe42f48ab944a62c16574d17fb6e475da17e4 [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);
var treeElement;
function step1()
{
addNewRuleAndSelectNode("other", step2);
}
function step2()
{
addNewRuleAndSelectNode("inspected", step3);
}
function step3()
{
InspectorTest.addResult("After adding new rule:");
InspectorTest.dumpSelectedElementStyles(true, false, true);
printStyleSheetAndCall(step4);
}
function step4()
{
WebInspector.domAgent.undo();
InspectorTest.selectNodeAndWaitForStyles("other", step5);
}
function step5()
{
InspectorTest.addResult("After undo:");
InspectorTest.dumpSelectedElementStyles(true, false, true);
printStyleSheetAndCall(step6);
}
function step6()
{
WebInspector.domAgent.redo();
InspectorTest.selectNodeAndWaitForStyles("inspected", step7);
}
function step7()
{
InspectorTest.addResult("After redo:");
InspectorTest.dumpSelectedElementStyles(true, false, true);
printStyleSheetAndCall(step8);
}
function step8()
{
InspectorTest.completeTest();
}
function addNewRuleAndSelectNode(nodeId, 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 = "div.foo";
section._selectorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
InspectorTest.selectNodeAndWaitForStyles(nodeId, next);
}
function printStyleSheetAndCall(next)
{
var section = WebInspector.panels.elements.sidebarPanes.styles.sections[0][2];
var id = section.styleRule.style.id.styleSheetId;
CSSAgent.getStyleSheetText(id, callback);
function callback(result, styleSheetText)
{
InspectorTest.addResult("===== Style sheet text: =====");
InspectorTest.addResult(styleSheetText);
InspectorTest.addResult("=============================");
next();
}
}
}
</script>
</head>
<body onload="runTest()">
<p>
Tests that adding a new rule can be undone.
</p>
<div class="foo" id="inspected" style="font-size: 12px">Text</div>
<div class="foo" id="other" style="color:red"></div>
</body>
</html>