LayoutTests/inspector/styles/edit-inspector-stylesheet.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../http/tests/inspector/elements-test.js"></script>
   5 <script src="../../http/tests/inspector/debugger-test.js"></script>
   6 <script>
   7
   8 function test()
   9 {
  10     var inspectorResource;
  11
  12     WebInspector.showPanel("elements");
  13     InspectorTest.selectNodeAndWaitForStyles("inspected", step1);
  14
  15     function step1(node)
  16     {
  17         WebInspector.panels.scripts._uiSourceCodeProvider.addEventListener(WebInspector.UISourceCodeProvider.Events.UISourceCodeAdded, sourceCodeAdded);
  18         WebInspector.cssModel.addRule(node.id, "#inspected", successCallback, failureCallback);
  19
  20         function successCallback() { }
  21         function failureCallback()
  22         {
  23             InspectorTest.addResult("Failed to add rule.");
  24             InspectorTest.completeTest();
  25         }
  26
  27         function sourceCodeAdded(event)
  28         {
  29             if (event.data.parsedURL.scheme === "inspector")
  30                 InspectorTest.showScriptSource("inspector-stylesheet", step2.bind(this, event.data));
  31         }
  32     }
  33
  34     function step2(styleSource, sourceFrame)
  35     {
  36         InspectorTest.addResult("Inspector stylesheet URL: " + styleSource.parsedURL.displayName);
  37         styleSource.requestContent(printContent());
  38
  39         InspectorTest.addResult("\nSetting new content");
  40         styleSource.setWorkingCopy("#inspected { background-color: green; }");
  41         styleSource.commitWorkingCopy(step3.bind(this, styleSource));
  42     }
  43
  44     function step3(styleSource)
  45     {
  46         styleSource.requestContent(printContent(selectNode));
  47         function selectNode()
  48         {
  49             InspectorTest.selectNodeAndWaitForStyles("inspected", dumpStyles);
  50         }
  51
  52         function dumpStyles()
  53         {
  54             InspectorTest.dumpSelectedElementStyles(true, false, true);
  55             InspectorTest.completeTest();
  56         }
  57     }
  58
  59     function printContent(next)
  60     {
  61         function result(content)
  62         {
  63             InspectorTest.addResult("Inspector stylesheet content:");
  64             InspectorTest.addResult(content);
  65             if (next)
  66                 next();
  67         }
  68         return result;
  69     }
  70 }
  71 </script>
  72 </head>
  73
  74 <body onload="runTest()">
  75 <p>
  76 Tests that adding a new rule creates inspector stylesheet resource and allows its live editing.
  77 </p>
  78
  79 <div id="inspected">Text</div>
  80
  81 </body>
  82 </html>