src/third_party/WebKit/LayoutTests/inspector/elements/styles/style-formatter.html

   1 <html>
   2 <head>
   3 <script src="../../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../../http/tests/inspector/debugger-test.js"></script>
   5 <link rel="stylesheet" href="resources/style-formatter-obfuscated.css">
   6
   7 <script>
   8
   9 var test = function()
  10 {
  11     var worker = Runtime.startWorker("script_formatter_worker");
  12     WebInspector.inspectorView.showPanel("sources");
  13
  14     InspectorTest.runTestSuite([
  15         function testScriptFormatterWorker(next)
  16         {
  17             worker.onmessage = InspectorTest.safeWrap(function(event)
  18             {
  19                 InspectorTest.assertEquals("a {\\n    /* pre-comment */\\n    color /* after name */ : /* before value */ red /* post-comment */\\n}\\n".replace(/\n/g, "\\n"), event.data.content.replace(/\n/g, "\\n"));
  20                 next();
  21             });
  22
  23             worker.onerror = function(event)
  24             {
  25                 InspectorTest.addResult("Error in worker: " + event.data);
  26                 next();
  27             };
  28
  29             worker.postMessage({ method: "format", params: { mimeType: "text/css", content: "a { /* pre-comment */ color /* after name */ : /* before value */ red /* post-comment */ }" } });
  30         },
  31
  32         function testSourceMapping(next)
  33         {
  34             var formatter = new WebInspector.ScriptFormatter();
  35
  36             InspectorTest.showScriptSource("style-formatter-obfuscated.css", didShowScriptSource);
  37             function didShowScriptSource(sourceFrame)
  38             {
  39                 formatter.formatContent("text/css", sourceFrame._textEditor.text(), didFormatContent);
  40             }
  41
  42             function didFormatContent(content, mapping)
  43             {
  44                 var source = WebInspector.inspectorView.panel("sources").visibleView._textEditor.text();
  45                 var formattedSource = content;
  46
  47                 function testMapping(string)
  48                 {
  49                     var originalPosition = source.indexOf(string);
  50                     InspectorTest.assertTrue(originalPosition !== -1, "Not found '" + string + "'");
  51                     var originalLocation = WebInspector.Formatter.positionToLocation(source.lineEndings(), originalPosition);
  52                     var formattedLocation = mapping.originalToFormatted(originalLocation[0], originalLocation[1]);
  53                     var formattedPosition = WebInspector.Formatter.locationToPosition(formattedSource.lineEndings(), formattedLocation[0], formattedLocation[1]);
  54                     var expectedFormattedPosition = formattedSource.indexOf(string);
  55                     InspectorTest.assertEquals(expectedFormattedPosition, formattedPosition, "wrong mapping for <" + string + ">");
  56                 }
  57
  58                 testMapping("@media");
  59                 testMapping("screen");
  60
  61                 testMapping("html");
  62                 testMapping("color");
  63                 testMapping("green");
  64                 testMapping("foo-property");
  65                 testMapping("bar-value");
  66
  67                 testMapping("body");
  68                 testMapping("background");
  69                 testMapping("black");
  70
  71                 next();
  72             }
  73         },
  74
  75         function testFormatInlinedStyles(next)
  76         {
  77             worker.onmessage = InspectorTest.safeWrap(function(event)
  78             {
  79                 InspectorTest.addResult(event.data.content);
  80                 next();
  81             });
  82
  83             worker.onerror = function(event)
  84             {
  85                 InspectorTest.addResult("Error in worker: " + event.data);
  86                 next();
  87             };
  88
  89             var content = "<html><body><style>@-webkit-keyframes{from{left: 0} to{left:100px;}}</style><style>badbraces { }} @media screen{a{color:red;text-decoration: none}}</style></body></html>";
  90             worker.postMessage({ method: "format", params: { mimeType: "text/html", content: content, indentString: "**" } });
  91         }
  92     ]);
  93 }
  94
  95 </script>
  96
  97 </head>
  98
  99 <body onload="runTest()">
 100 <p>Tests the script formatting functionality.
 101 </p>
 102
 103 </body>
 104 </html>