| OLD | NEW |
|---|
| (Empty) | |
| 1 <html> |
| 2 <head> |
| 3 |
| 4 <style> |
| 5 #modifyRule { |
| 6 box-sizing: border-box; |
| 7 } |
| 8 |
| 9 #modifyRule { |
| 10 height: 100%; |
| 11 } |
| 12 |
| 13 #modifyRule { |
| 14 width: 100%; |
| 15 } |
| 16 </style> |
| 17 |
| 18 <style> |
| 19 #insertRule { |
| 20 box-sizing: border-box; |
| 21 } |
| 22 |
| 23 #insertRule { |
| 24 width: 100%; |
| 25 } |
| 26 </style> |
| 27 |
| 28 <style> |
| 29 #removeRule { |
| 30 box-sizing: border-box; |
| 31 } |
| 32 |
| 33 #removeRule { |
| 34 width: 100%; |
| 35 } |
| 36 </style> |
| 37 |
| 38 <script type="text/javascript" src="../../http/tests/inspector-protocol/inspecto
r-protocol-test.js"></script> |
| 39 <script type="text/javascript" src="../../http/tests/inspector-protocol/css-prot
ocol-test.js"></script> |
| 40 <script type="text/javascript" src="../../http/tests/inspector-protocol/dom-prot
ocol-test.js"></script> |
| 41 <script type="text/javascript"> |
| 42 |
| 43 function test() |
| 44 { |
| 45 var documentNodeId; |
| 46 |
| 47 InspectorTest.requestDocumentNodeId(onDocumentNodeId); |
| 48 |
| 49 function onDocumentNodeId(nodeId) |
| 50 { |
| 51 documentNodeId = nodeId; |
| 52 InspectorTest.sendCommandOrDie("CSS.enable", {}, function() { |
| 53 InspectorTest.runTestSuite(testSuite); |
| 54 }); |
| 55 } |
| 56 |
| 57 var testSuite = [ |
| 58 function testModifyRule(next) |
| 59 { |
| 60 InspectorTest.log("--------------"); |
| 61 InspectorTest.log("Original rule:"); |
| 62 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyRule"
, step1, true); |
| 63 |
| 64 function step1() |
| 65 { |
| 66 InspectorTest.evaluateInPage("document.styleSheets[0].rules[0].s
tyle.setProperty('color', 'red')"); |
| 67 InspectorTest.log("--------------"); |
| 68 InspectorTest.log("Modified rule 1:"); |
| 69 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyR
ule", step2, true); |
| 70 } |
| 71 |
| 72 function step2() |
| 73 { |
| 74 InspectorTest.evaluateInPage("document.styleSheets[0].rules[2].s
tyle.setProperty('color', 'blue')"); |
| 75 InspectorTest.log("---------------"); |
| 76 InspectorTest.log("Modified rule 3:"); |
| 77 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyR
ule", step3, true); |
| 78 } |
| 79 |
| 80 function step3() |
| 81 { |
| 82 InspectorTest.evaluateInPage("document.styleSheets[0].rules[1].s
tyle.setProperty('color', 'green')"); |
| 83 InspectorTest.log("---------------"); |
| 84 InspectorTest.log("Modified rule 2:"); |
| 85 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyR
ule", step4, true); |
| 86 } |
| 87 |
| 88 function step4() |
| 89 { |
| 90 InspectorTest.evaluateInPage("document.styleSheets[0].rules[1].s
tyle.removeProperty('color')"); |
| 91 InspectorTest.log("---------------"); |
| 92 InspectorTest.log("Restored rule 2:"); |
| 93 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyR
ule", step5, true); |
| 94 } |
| 95 |
| 96 function step5() |
| 97 { |
| 98 InspectorTest.evaluateInPage("document.styleSheets[0].rules[0].s
tyle.removeProperty('color')"); |
| 99 InspectorTest.evaluateInPage("document.styleSheets[0].rules[2].s
tyle.removeProperty('color')"); |
| 100 InspectorTest.log("-----------------"); |
| 101 InspectorTest.log("Restored rule 1,3:"); |
| 102 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyR
ule", next, true); |
| 103 } |
| 104 }, |
| 105 |
| 106 function testInsertFirstRule(next) |
| 107 { |
| 108 testInsertRule(0, next) |
| 109 }, |
| 110 |
| 111 function testInsertMiddleRule(next) |
| 112 { |
| 113 testInsertRule(1, next) |
| 114 }, |
| 115 |
| 116 function testInsertLastRule(next) |
| 117 { |
| 118 testInsertRule(2, next) |
| 119 }, |
| 120 |
| 121 function testRemoveRule(next) |
| 122 { |
| 123 InspectorTest.log("Original rule:"); |
| 124 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#removeRule"
, step1, true); |
| 125 |
| 126 function step1() |
| 127 { |
| 128 InspectorTest.evaluateInPage("document.styleSheets[2].removeRule
(0)"); |
| 129 InspectorTest.log("-------------------"); |
| 130 InspectorTest.log("After remove rule 1:"); |
| 131 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#removeR
ule", step2, true); |
| 132 } |
| 133 |
| 134 function step2() |
| 135 { |
| 136 InspectorTest.evaluateInPage("document.styleSheets[2].removeRule
(0)"); |
| 137 InspectorTest.log("-------------------"); |
| 138 InspectorTest.log("After remove rule 2:"); |
| 139 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#removeR
ule", next, true); |
| 140 } |
| 141 } |
| 142 |
| 143 ]; |
| 144 |
| 145 function testInsertRule(index, next) |
| 146 { |
| 147 InspectorTest.log("Original rule:"); |
| 148 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#insertRule", st
ep1, true); |
| 149 |
| 150 function step1() |
| 151 { |
| 152 InspectorTest.evaluateInPage("document.styleSheets[1].insertRule('#i
nsertRule { color: red }', " + index + ")"); |
| 153 InspectorTest.log("--------------"); |
| 154 InspectorTest.log("After inserted rule:"); |
| 155 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#insertRule"
, step2, true); |
| 156 } |
| 157 |
| 158 function step2() |
| 159 { |
| 160 InspectorTest.evaluateInPage("document.styleSheets[1].removeRule(" +
index + ")"); |
| 161 InspectorTest.log("--------------"); |
| 162 InspectorTest.log("Restored rule:"); |
| 163 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#insertRule"
, next, true); |
| 164 } |
| 165 } |
| 166 } |
| 167 |
| 168 </script> |
| 169 </head> |
| 170 <body onload="runTest();"> |
| 171 <p>The test verifies CSS.getMatchedStylesForNode when used concurrently with the
CSSOM modifications.</p> |
| 172 <article id="modifyRule"></article> |
| 173 <article id="insertRule"></article> |
| 174 <article id="removeRule"></article> |
| 175 </body> |
| 176 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1211813002:
DevTools: allow injecting CSS rules without breaking styles sidebar. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk