Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(23)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/inspector-protocol/css/cssom-matching-rules.html

Issue 1211813002: DevTools: allow injecting CSS rules without breaking styles sidebar. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: review comments addressed. Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « LayoutTests/http/tests/inspector-protocol/resources/protocol-test.html ('k') | LayoutTests/inspector-protocol/css/cssom-matching-rules-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/inspector-protocol/css/cssom-matching-rules.html
diff --git a/LayoutTests/inspector-protocol/css/cssom-matching-rules.html b/LayoutTests/inspector-protocol/css/cssom-matching-rules.html
new file mode 100644
index 0000000000000000000000000000000000000000..ce3a07a9a3731720dc985c721a2c0d81b682d22d
--- /dev/null
+++ b/LayoutTests/inspector-protocol/css/cssom-matching-rules.html
@@ -0,0 +1,176 @@
+<html>
+<head>
+
+<style>
+#modifyRule {
+ box-sizing: border-box;
+}
+
+#modifyRule {
+ height: 100%;
+}
+
+#modifyRule {
+ width: 100%;
+}
+</style>
+
+<style>
+#insertRule {
+ box-sizing: border-box;
+}
+
+#insertRule {
+ width: 100%;
+}
+</style>
+
+<style>
+#removeRule {
+ box-sizing: border-box;
+}
+
+#removeRule {
+ width: 100%;
+}
+</style>
+
+<script type="text/javascript" src="../../http/tests/inspector-protocol/inspector-protocol-test.js"></script>
+<script type="text/javascript" src="../../http/tests/inspector-protocol/css-protocol-test.js"></script>
+<script type="text/javascript" src="../../http/tests/inspector-protocol/dom-protocol-test.js"></script>
+<script type="text/javascript">
+
+function test()
+{
+ var documentNodeId;
+
+ InspectorTest.requestDocumentNodeId(onDocumentNodeId);
+
+ function onDocumentNodeId(nodeId)
+ {
+ documentNodeId = nodeId;
+ InspectorTest.sendCommandOrDie("CSS.enable", {}, function() {
+ InspectorTest.runTestSuite(testSuite);
+ });
+ }
+
+ var testSuite = [
+ function testModifyRule(next)
+ {
+ InspectorTest.log("--------------");
+ InspectorTest.log("Original rule:");
+ InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyRule", step1, true);
+
+ function step1()
+ {
+ InspectorTest.evaluateInPage("document.styleSheets[0].rules[0].style.setProperty('color', 'red')");
+ InspectorTest.log("--------------");
+ InspectorTest.log("Modified rule 1:");
+ InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyRule", step2, true);
+ }
+
+ function step2()
+ {
+ InspectorTest.evaluateInPage("document.styleSheets[0].rules[2].style.setProperty('color', 'blue')");
+ InspectorTest.log("---------------");
+ InspectorTest.log("Modified rule 3:");
+ InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyRule", step3, true);
+ }
+
+ function step3()
+ {
+ InspectorTest.evaluateInPage("document.styleSheets[0].rules[1].style.setProperty('color', 'green')");
+ InspectorTest.log("---------------");
+ InspectorTest.log("Modified rule 2:");
+ InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyRule", step4, true);
+ }
+
+ function step4()
+ {
+ InspectorTest.evaluateInPage("document.styleSheets[0].rules[1].style.removeProperty('color')");
+ InspectorTest.log("---------------");
+ InspectorTest.log("Restored rule 2:");
+ InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyRule", step5, true);
+ }
+
+ function step5()
+ {
+ InspectorTest.evaluateInPage("document.styleSheets[0].rules[0].style.removeProperty('color')");
+ InspectorTest.evaluateInPage("document.styleSheets[0].rules[2].style.removeProperty('color')");
+ InspectorTest.log("-----------------");
+ InspectorTest.log("Restored rule 1,3:");
+ InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyRule", next, true);
+ }
+ },
+
+ function testInsertFirstRule(next)
+ {
+ testInsertRule(0, next)
+ },
+
+ function testInsertMiddleRule(next)
+ {
+ testInsertRule(1, next)
+ },
+
+ function testInsertLastRule(next)
+ {
+ testInsertRule(2, next)
+ },
+
+ function testRemoveRule(next)
+ {
+ InspectorTest.log("Original rule:");
+ InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#removeRule", step1, true);
+
+ function step1()
+ {
+ InspectorTest.evaluateInPage("document.styleSheets[2].removeRule(0)");
+ InspectorTest.log("-------------------");
+ InspectorTest.log("After remove rule 1:");
+ InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#removeRule", step2, true);
+ }
+
+ function step2()
+ {
+ InspectorTest.evaluateInPage("document.styleSheets[2].removeRule(0)");
+ InspectorTest.log("-------------------");
+ InspectorTest.log("After remove rule 2:");
+ InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#removeRule", next, true);
+ }
+ }
+
+ ];
+
+ function testInsertRule(index, next)
+ {
+ InspectorTest.log("Original rule:");
+ InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#insertRule", step1, true);
+
+ function step1()
+ {
+ InspectorTest.evaluateInPage("document.styleSheets[1].insertRule('#insertRule { color: red }', " + index + ")");
+ InspectorTest.log("--------------");
+ InspectorTest.log("After inserted rule:");
+ InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#insertRule", step2, true);
+ }
+
+ function step2()
+ {
+ InspectorTest.evaluateInPage("document.styleSheets[1].removeRule(" + index + ")");
+ InspectorTest.log("--------------");
+ InspectorTest.log("Restored rule:");
+ InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#insertRule", next, true);
+ }
+ }
+}
+
+</script>
+</head>
+<body onload="runTest();">
+<p>The test verifies CSS.getMatchedStylesForNode when used concurrently with the CSSOM modifications.</p>
+<article id="modifyRule"></article>
+<article id="insertRule"></article>
+<article id="removeRule"></article>
+</body>
+</html>
« no previous file with comments | « LayoutTests/http/tests/inspector-protocol/resources/protocol-test.html ('k') | LayoutTests/inspector-protocol/css/cssom-matching-rules-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698