blob: 73dfce23b75c32a4c27ec7973de51b49936c7f2f [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
.foo {}
</style>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test() {
// FIXME: remove this once we know why this test is sometimes flaky.
// See <https://www.webkit.org/b/148321> for more details.
InspectorTest.dumpActivityToSystemConsole = true;
var nodeStyles;
var selectors = ["span.foo", "body > .foo"];
var index = 0;
function modifyRuleSelector(selector) {
if (!nodeStyles.matchedRules.length) {
InspectorTest.log("ERROR: missing matched rules");
InspectorTest.completeTest();
return;
}
var rule = nodeStyles.matchedRules[0];
CSSAgent.setRuleSelector(rule.id, selector, function(error, payload) {
if (error) {
InspectorTest.log("ERROR: " + error);
InspectorTest.completeTest();
return;
}
var newSelector = payload.selectorList.text;
InspectorTest.log("\nSelector before mutation: " + rule.selectorText);
InspectorTest.log("Selector after mutation: " + newSelector);
InspectorTest.assert(newSelector === selector, "FAIL: Selector " + newSelector + " should be updated to " + selector + ".");
nodeStyles.refresh();
});
}
// Every time the nodeStyles refreshes, attempt to change the selector
// of the first rule to the next selector in the list.
function onStylesRefreshed()
{
if (index >= selectors.length) {
InspectorTest.completeTest();
return;
}
modifyRuleSelector(selectors[index]);
++index;
}
WI.domManager.requestDocument(function(documentNode) {
if (!documentNode) {
InspectorTest.log("ERROR: document not found.");
InspectorTest.completeTest();
return;
}
WI.domManager.querySelector(documentNode.id, ".foo", function(contentNodeId) {
if (!contentNodeId) {
InspectorTest.log("ERROR: DOM node not found.");
InspectorTest.completeTest();
return;
}
var domNode = WI.domManager.nodeForId(contentNodeId);
nodeStyles = WI.cssManager.stylesForNode(domNode);
nodeStyles.addEventListener(WI.DOMNodeStyles.Event.Refreshed, onStylesRefreshed, this);
if (!nodeStyles.needsRefresh)
onStylesRefreshed();
});
});
}
</script>
</head>
<body onload="runTest()">
<p>Testing that selectors are able to be modified more than once.</p>
<span class="foo"></span>
</body>
</html>