blob: 85bcc13bf78c11f68e28821fe995daa7117ab9a7 [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 addStyle()
{
var style = document.createElement("style");
document.documentElement.appendChild(style);
style.sheet.insertRule("foo {display: none;}", 0);
}
function test()
{
WebInspector.showPanel("elements");
InspectorTest.evaluateInPage("addStyle()", step0);
function step0()
{
InspectorTest.selectNodeAndWaitForStyles("inspected", step1);
}
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 = "inspected";
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.waitForStyles("inspected", step3);
}
function step3()
{
InspectorTest.addResult("After adding new rule:");
InspectorTest.dumpSelectedElementStyles(true, false, true);
InspectorTest.completeTest();
}
}
</script>
</head>
<body onload="runTest()">
<p>
Tests that adding a new rule works when there is a STYLE element after BODY. TIMEOUT SHOULD NOT OCCUR! <a href="https://bugs.webkit.org/show_bug.cgi?id=111299">Bug 111299</a>
</p>
<div id="inspected" style="font-size: 12px">Text</div>
</body>
</html>