| <!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; |
| } |
| |
| documentNode.querySelector(".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> |
