src/third_party/WebKit/LayoutTests/http/tests/inspector/styles/edit-css-with-source-url.html

   1 <html>
   2 <head>
   3 <script src="../inspector-test.js"></script>
   4 <script src="../debugger-test.js"></script>
   5 <script src="../elements-test.js"></script>
   6 <script src="../isolated-filesystem-test.js"></script>
   7 <script>
   8 function loadStylesheet(line0, line1, line2)
   9 {
  10     var styleText = "#inspected {\n    color: red;\n}\n";
  11     var styleElement = document.createElement("style");
  12     styleElement.type = "text/css";
  13     var sourceURL = "http://localhost:8000/inspector/styles/foo.css";
  14     var stylesheetContent = styleText + "\n/*# sourceURL=" + sourceURL + " */";
  15     styleElement.textContent = stylesheetContent;
  16     document.head.appendChild(styleElement);
  17 }
  18
  19 function test()
  20 {
  21     var manager;
  22     var cssModel;
  23     function createObjects()
  24     {
  25         InspectorTest.testFileSystemMapping = new WebInspector.FileSystemMapping();
  26         InspectorTest.testFileSystemMapping._fileSystemMappingSetting = new InspectorTest.MockSetting({});
  27         WebInspector.workspace._fileSystemMapping = InspectorTest.testFileSystemMapping;
  28         manager = InspectorTest.createIsolatedFileSystemManager(WebInspector.workspace, InspectorTest.testFileSystemMapping);
  29     }
  30
  31     InspectorTest.runTestSuite([
  32         function testEditingRulesInElementsPanelDoesNotAddSourceURLToOriginalFile(next)
  33         {
  34             var styleText = "#inspected {\n    color: red;\n}\n";
  35
  36             function loadStylesheet(callback)
  37             {
  38                 InspectorTest.addResult("Loading stylesheet with sourceURL:");
  39                 InspectorTest.evaluateInPage("loadStylesheet()", callback);
  40             }
  41
  42             function dumpUISourceCodeContents()
  43             {
  44                 InspectorTest.addResult("Dumping uiSourceCode content:");
  45                 InspectorTest.addResult(uiSourceCode.workingCopy());
  46             }
  47
  48             var fileSystemPath = "/var/www";
  49             var fileSystemProjectId = WebInspector.FileSystemProjectDelegate.projectId(fileSystemPath);
  50             var files = {"/foo.css": styleText};
  51             createObjects();
  52             InspectorTest.addResult("Adding file system.");
  53             manager.addMockFileSystem(fileSystemPath);
  54             InspectorTest.addResult("Adding file system mapping.");
  55             InspectorTest.testFileSystemMapping.addFileMapping(fileSystemPath, "http://localhost:8000/inspector/styles/", "/");
  56             manager.addFiles(fileSystemPath, files);
  57             var uiSourceCode = WebInspector.workspace.uiSourceCode(fileSystemProjectId, "foo.css");
  58             InspectorTest.showUISourceCode(uiSourceCode, didShowScriptSource);
  59
  60             function didShowScriptSource(sourceFrame)
  61             {
  62                 dumpUISourceCodeContents();
  63                 loadStylesheet(stylesheetLoaded);
  64             }
  65
  66             function stylesheetLoaded()
  67             {
  68                 InspectorTest.addResult("Stylesheet loaded.");
  69                 WebInspector.showPanel("elements");
  70                 InspectorTest.selectNodeAndWaitForStyles("inspected", nodeSelected);
  71             }
  72
  73             function nodeSelected()
  74             {
  75                 InspectorTest.addResult("Dumping matched rules:");
  76                 InspectorTest.dumpSelectedElementStyles(true);
  77                 InspectorTest.addResult("Editing styles from elements panel:");
  78                 treeElement = InspectorTest.getMatchedStylePropertyTreeItem("color");
  79                 treeElement.startEditing();
  80                 treeElement.nameElement.textContent = "color";
  81                 treeElement.nameElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  82
  83                 // Commit editing.
  84                 treeElement.valueElement.textContent = "green";
  85                 treeElement.valueElement.firstChild.select();
  86                 treeElement.valueElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
  87                 uiSourceCode.addEventListener(WebInspector.UISourceCode.Events.WorkingCopyCommitted, stylesEdited, this);
  88             }
  89
  90             function stylesEdited()
  91             {
  92                 InspectorTest.addResult("Styles edited.");
  93                 InspectorTest.addResult("Dumping matched rules:");
  94                 InspectorTest.dumpSelectedElementStyles(true);
  95                 dumpUISourceCodeContents();
  96                 InspectorTest.addResult("All done.");
  97                 next();
  98             }
  99         }
 100     ]);
 101 };
 102 </script>
 103 </head>
 104 <body onload="runTest()">
 105 <div id="inspected"></div>
 106 <p>Tests file system project mappings.</p>
 107 </body>
 108 </html>