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

   1 <html>
   2 <head>
   3
   4 <style>
   5 #test {
   6     color: red;
   7 }
   8
   9 #test {
  10     color: green;
  11 }
  12
  13 #test {
  14     color: blue;
  15 }
  16
  17 #test {
  18     width: 10%;
  19 }
  20
  21 #test {
  22     width: 20%;
  23 }
  24
  25 #test {
  26     width: 30%;
  27 }
  28
  29 #test {
  30     width: 40%;
  31 }
  32
  33 #test {
  34     width: 50%;
  35 }
  36
  37 #test {
  38     width: 60%;
  39 }
  40 </style>
  41
  42 <script type="text/javascript" src="../../http/tests/inspector-protocol/inspector-protocol-test.js"></script>
  43 <script type="text/javascript" src="../../http/tests/inspector-protocol/css-protocol-test.js"></script>
  44 <script type="text/javascript" src="../../http/tests/inspector-protocol/dom-protocol-test.js"></script>
  45 <script type="text/javascript">
  46
  47 function test()
  48 {
  49     var documentNodeId;
  50
  51     InspectorTest.requestDocumentNodeId(onDocumentNodeId);
  52
  53     function onDocumentNodeId(nodeId)
  54     {
  55         documentNodeId = nodeId;
  56         InspectorTest.sendCommandOrDie("CSS.enable", {}, function() {
  57             InspectorTest.runTestSuite(testSuite);
  58         });
  59     }
  60
  61     var testSuite = [
  62         function testModifyRule(next)
  63         {
  64             InspectorTest.log("--------------");
  65             InspectorTest.log("Original rule:");
  66             InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#test", step1, true);
  67
  68             function step1()
  69             {
  70                 InspectorTest.log("Mutating 3rd:");
  71                 InspectorTest.log("---------------");
  72                 InspectorTest.evaluateInPage("document.styleSheets[0].rules[3].style.setProperty('color', 'red')");
  73                 InspectorTest.evaluateInPage("document.styleSheets[0].rules[3].style.removeProperty('width')");
  74                 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#test", step2, true);
  75             }
  76
  77             function step2()
  78             {
  79                 InspectorTest.log("Mutating 4th:");
  80                 InspectorTest.log("--------------");
  81                 InspectorTest.evaluateInPage("document.styleSheets[0].rules[4].style.setProperty('color', 'green')");
  82                 InspectorTest.evaluateInPage("document.styleSheets[0].rules[4].style.removeProperty('width')");
  83                 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#test", step3, true);
  84             }
  85
  86             function step3()
  87             {
  88                 InspectorTest.log("Mutating 5th:");
  89                 InspectorTest.log("--------------");
  90                 InspectorTest.evaluateInPage("document.styleSheets[0].rules[5].style.setProperty('color', 'blue')");
  91                 InspectorTest.evaluateInPage("document.styleSheets[0].rules[5].style.removeProperty('width')");
  92                 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#test", step4, true);
  93             }
  94
  95             function step4()
  96             {
  97                 InspectorTest.log("Delete first 3:");
  98                 InspectorTest.log("---------------");
  99                 InspectorTest.evaluateInPage("for (var i = 0; i < 3; ++i) document.styleSheets[0].removeRule(0);");
 100                 InspectorTest.loadAndDumpMatchingRules(documentNodeId, "#test", next, true);
 101             }
 102         },
 103     ];
 104 }
 105
 106 </script>
 107 </head>
 108 <body onload="runTest();">
 109 <p>The test verifies CSS.getMatchedStylesForNode when used concurrently with multiple CSSOM modifications.</p>
 110 <article id="test"></article>
 111 </body>
 112 </html>