src/third_party/WebKit/LayoutTests/inspector/elements/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.cssModel.addRule(node.id, "#inspected", successCallback, failureCallback);
  18
  19         function successCallback()
  20         {
  21             InspectorTest.waitForStyles("inspected", stylesReceived, true);
  22         }
  23
  24         function stylesReceived()
  25         {
  26             // UISourceCode.prototype.addRevision() must finish before step2 is called.
  27             InspectorTest.showScriptSource("inspector-stylesheet", step2);
  28         }
  29
  30         function failureCallback()
  31         {
  32             InspectorTest.addResult("Failed to add rule.");
  33             InspectorTest.completeTest();
  34         }
  35     }
  36
  37     function step2(sourceFrame)
  38     {
  39         var uiSourceCode = sourceFrame._uiSourceCode;
  40         InspectorTest.addResult("Inspector stylesheet URL: " + uiSourceCode.displayName());
  41         uiSourceCode.requestContent(printContent());
  42
  43         InspectorTest.addResult("\nSetting new content");
  44         uiSourceCode.setWorkingCopy("#inspected { background-color: green; }");
  45         uiSourceCode.commitWorkingCopy(step3.bind(this, uiSourceCode));
  46     }
  47
  48     function step3(uiSourceCode)
  49     {
  50         uiSourceCode.requestContent(printContent(selectNode));
  51         function selectNode()
  52         {
  53             InspectorTest.selectNodeAndWaitForStyles("inspected", dumpStyles);
  54         }
  55
  56         function dumpStyles()
  57         {
  58             InspectorTest.dumpSelectedElementStyles(true, false, true);
  59             InspectorTest.completeTest();
  60         }
  61     }
  62
  63     function printContent(next)
  64     {
  65         function result(content)
  66         {
  67             InspectorTest.addResult("Inspector stylesheet content:");
  68             InspectorTest.addResult(content);
  69             if (next)
  70                 next();
  71         }
  72         return result;
  73     }
  74 }
  75 </script>
  76 </head>
  77
  78 <body onload="runTest()">
  79 <p>
  80 Tests that adding a new rule creates inspector stylesheet resource and allows its live editing.
  81 </p>
  82
  83 <div id="inspected">Text</div>
  84
  85 </body>
  86 </html>