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