third_party/WebKit/LayoutTests/inspector-protocol/css/cssom-matching-rules.html

   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/inspector-protocol-test.js"></script>
  39 <script type="text/javascript" src="../../http/tests/inspector-protocol/css-protocol-test.js"></script>
  40 <script type="text/javascript" src="../../http/tests/inspector-protocol/dom-protocol-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].style.setProperty('color', 'red')");
  67                 InspectorTest.log("--------------");
  68                 InspectorTest.log("Modified rule 1:");
  69                 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyRule", step2, true);
  70             }
  71
  72             function step2()
  73             {
  74                 InspectorTest.evaluateInPage("document.styleSheets[0].rules[2].style.setProperty('color', 'blue')");
  75                 InspectorTest.log("---------------");
  76                 InspectorTest.log("Modified rule 3:");
  77                 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyRule", step3, true);
  78             }
  79
  80             function step3()
  81             {
  82                 InspectorTest.evaluateInPage("document.styleSheets[0].rules[1].style.setProperty('color', 'green')");
  83                 InspectorTest.log("---------------");
  84                 InspectorTest.log("Modified rule 2:");
  85                 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyRule", step4, true);
  86             }
  87
  88             function step4()
  89             {
  90                 InspectorTest.evaluateInPage("document.styleSheets[0].rules[1].style.removeProperty('color')");
  91                 InspectorTest.log("---------------");
  92                 InspectorTest.log("Restored rule 2:");
  93                 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyRule", step5, true);
  94             }
  95
  96             function step5()
  97             {
  98                 InspectorTest.evaluateInPage("document.styleSheets[0].rules[0].style.removeProperty('color')");
  99                 InspectorTest.evaluateInPage("document.styleSheets[0].rules[2].style.removeProperty('color')");
 100                 InspectorTest.log("-----------------");
 101                 InspectorTest.log("Restored rule 1,3:");
 102                 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#modifyRule", 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, "#removeRule", 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, "#removeRule", next, true);
 140             }
 141         }
 142
 143     ];
 144
 145     function testInsertRule(index, next)
 146     {
 147         InspectorTest.log("Original rule:");
 148         InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#insertRule", step1, true);
 149
 150         function step1()
 151         {
 152             InspectorTest.evaluateInPage("document.styleSheets[1].insertRule('#insertRule { 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>