src/third_party/WebKit/LayoutTests/inspector/elements/styles/dynamic-style-tag.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 <style>
   6 /* comment */.inline-style-added-by-parser {
   7    color: red;
   8 }
   9 </style>
  10 <style>
  11 .inline-style-added-by-parser-with-source-url {
  12    color: green;
  13 }
  14 /*# sourceURL=inlineStyleAddedByParser.css*/
  15 </style>
  16 <script>
  17 document.write("<style>\n.inline-style-added-by-parser-in-document-write {\n   color: blue;\n}\n</style>");
  18 document.write("<style>\n.inline-style-added-by-document-write-with-source-url {\n   color: yellow;\n}\n/*# sourceURL=inlineStyleAddedByDocumentWrite.css*/\n</style>");
  19 addStyleElement(".inline-style-created-by-script {\n   color: orange;\n}");
  20 addStyleElement(".inline-style-created-by-script-with-source-url {\n   color: grey;\n}\n/*# sourceURL=inlineStyleCreatedByScript.css*/");
  21
  22 function addStyleElement(styleContent)
  23 {
  24     var styleElement = document.createElement("style");
  25     styleElement.textContent = styleContent;
  26     document.head.appendChild(styleElement);
  27 }
  28
  29 var test = function()
  30 {
  31     WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, styleSheetAdded);
  32     InspectorTest.reloadPage(step1);
  33
  34     function pathToFileName(path)
  35     {
  36         return path.substring(path.lastIndexOf("/") + 1);
  37     }
  38
  39     function step1()
  40     {
  41         InspectorTest.selectNodeAndWaitForStyles("inspected", step2);
  42     }
  43
  44     function step2()
  45     {
  46         InspectorTest.dumpSelectedElementStyles(true, false, true);
  47         InspectorTest.completeTest();
  48     }
  49
  50     function dumpStyleSheetHeader(header, text)
  51     {
  52         InspectorTest.addResult("Stylesheet added:");
  53         InspectorTest.addResult("  - isInline: " + header.isInline);
  54         InspectorTest.addResult("  - sourceURL: " + pathToFileName(header.sourceURL));
  55         InspectorTest.addResult("  - hasSourceURL: " + header.hasSourceURL);
  56         InspectorTest.addResult("  - contents: " + text);
  57     }
  58
  59     function styleSheetAdded(event)
  60     {
  61         var header = event.data;
  62         CSSAgent.getStyleSheetText(header.id, contentLoaded.bind(this));
  63
  64         function contentLoaded(error, text)
  65         {
  66             dumpStyleSheetHeader(header, text);
  67         }
  68     }
  69 }
  70 </script>
  71 </head>
  72 <body onload="runTest()">
  73 <p>Tests that different types of inline styles are correctly disambiguated and their sourceURL is correct.
  74 <div id="inspected" style="color:red" class="inline-style-added-by-parser inline-style-added-by-parser-with-source-url inline-style-added-by-parser-in-document-write inline-style-added-by-document-write-with-source-url inline-style-created-by-script inline-style-created-by-script-with-source-url"></div>
  75 </body>
  76 </html>
  77
  78