src/third_party/WebKit/LayoutTests/http/tests/inspector/elements/styles/stylesheet-tracking.html

   1 <html>
   2 <head>
   3 <script src="../../inspector-test.js"></script>
   4 <script src="../../elements-test.js"></script>
   5 <link rel="stylesheet" href="resources/stylesheet-tracking.css" />
   6
   7 <style>
   8 html {
   9     font-size: 12px;
  10 }
  11 </style>
  12
  13 <script>
  14
  15 function addStyleSheet()
  16 {
  17     var styleElement = document.createElement("style");
  18     styleElement.id = "style";
  19     styleElement.type = "text/css";
  20     styleElement.textContent = "@import url(\"resources/stylesheet-tracking-import.css\");\na { color: green; }"
  21     document.head.appendChild(styleElement);
  22 }
  23
  24 function removeImport()
  25 {
  26     document.getElementById("style").sheet.deleteRule(0);
  27 }
  28
  29 function removeStyleSheet()
  30 {
  31     document.head.removeChild(document.getElementById("style"));
  32 }
  33
  34 function loadIframe()
  35 {
  36     var iframe = document.createElement("iframe");
  37     iframe.setAttribute("seamless", "seamless");
  38     iframe.src = "resources/stylesheet-tracking-iframe.html";
  39     document.body.appendChild(iframe);
  40 }
  41
  42 function iframe()
  43 {
  44     return document.getElementsByTagName("iframe")[0];
  45 }
  46
  47 function addIframeStyleSheets()
  48 {
  49     iframe().contentWindow.postMessage("addStyleSheets", "*");
  50 }
  51
  52 function navigateIframe()
  53 {
  54     iframe().src = iframe().src;
  55 }
  56
  57 function removeIframeStyleSheets()
  58 {
  59     iframe().contentWindow.postMessage("removeStyleSheets", "*");
  60 }
  61
  62 function removeIframe()
  63 {
  64     var element = iframe();
  65     element.parentElement.removeChild(element);
  66 }
  67
  68 function test()
  69 {
  70     var inspectedNode;
  71
  72     WebInspector.showPanel("elements");
  73     WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, styleSheetAdded, null);
  74     WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, styleSheetRemoved, null);
  75     var headers = WebInspector.cssModel.styleSheetHeaders();
  76     InspectorTest.addResult(headers.length + " headers known:");
  77     sortAndDumpData(headers);
  78
  79     InspectorTest.selectNodeAndWaitForStyles("inspected", step0);
  80
  81     function step0(node)
  82     {
  83         inspectedNode = node;
  84         InspectorTest.addResult("=== Adding iframe... ===");
  85         InspectorTest.evaluateInPage("loadIframe()");
  86         waitStyleSheetAdded(1, iframeAdded);
  87
  88         function iframeAdded()
  89         {
  90             InspectorTest.addResult("=== Adding iframe stylesheet... ===");
  91             waitStyleSheetAdded(2, navigateIframe);
  92             InspectorTest.evaluateInPage("addIframeStyleSheets()");
  93         }
  94
  95         function navigateIframe()
  96         {
  97             InspectorTest.addResult("=== Navigating iframe... ===");
  98             waitStyleSheetRemoved(3, frameNavigated);
  99             InspectorTest.evaluateInPage("navigateIframe()");
 100
 101             function frameNavigated()
 102             {
 103                 waitStyleSheetAdded(1, styleSheetsAdded);
 104             }
 105
 106             function styleSheetsAdded()
 107             {
 108                 InspectorTest.addResult("=== Adding iframe stylesheet... ===");
 109                 waitStyleSheetAdded(2, removeIframeStyleSheets);
 110                 InspectorTest.evaluateInPage("addIframeStyleSheets()");
 111             }
 112         }
 113
 114         function removeIframeStyleSheets()
 115         {
 116             InspectorTest.addResult("=== Removing iframe stylesheet... ===");
 117             waitStyleSheetRemoved(2, step1)
 118             InspectorTest.evaluateInPage("removeIframeStyleSheets()");
 119         }
 120     }
 121
 122     function step1()
 123     {
 124         InspectorTest.addResult("=== Adding stylesheet... ===");
 125         waitStyleSheetAdded(4, step2);
 126         InspectorTest.evaluateInPage("addStyleSheet()");
 127     }
 128
 129     function step2()
 130     {
 131         InspectorTest.addResult("=== Removing @import... ===");
 132         waitStyleSheetRemoved(3, step3);
 133         InspectorTest.evaluateInPage("removeImport()");
 134     }
 135
 136     function step3()
 137     {
 138         InspectorTest.addResult("=== Removing stylesheet... ===");
 139         waitStyleSheetRemoved(1, step4);
 140         InspectorTest.evaluateInPage("removeStyleSheet()");
 141     }
 142
 143     function step4()
 144     {
 145         InspectorTest.addResult("=== Adding rule... ===");
 146         waitStyleSheetAdded(1);
 147         WebInspector.cssModel.addRule(inspectedNode.id, "#inspected", successCallback, failureCallback);
 148
 149         function successCallback()
 150         {
 151             InspectorTest.addResult("Rule added");
 152             step5();
 153         }
 154         function failureCallback()
 155         {
 156             InspectorTest.addResult("Failed to add rule.");
 157             InspectorTest.completeTest();
 158         }
 159     }
 160
 161     function step5()
 162     {
 163         InspectorTest.addResult("=== Removing iframe... ===");
 164         InspectorTest.evaluateInPage("removeIframe()");
 165         waitStyleSheetRemoved(1, step6);
 166     }
 167
 168     function step6()
 169     {
 170         InspectorTest.completeTest();
 171     }
 172
 173     var addedCallback;
 174     var addedSheetCount;
 175     var addedSheets = [];
 176
 177     function waitStyleSheetAdded(count, next)
 178     {
 179         addedSheetCount = count;
 180         addedCallback = next;
 181     }
 182
 183     function styleSheetAdded(event)
 184     {
 185         var header = event.data;
 186         addedSheets.push(header);
 187         --addedSheetCount;
 188         if (addedSheetCount > 0)
 189             return;
 190         else if (addedSheetCount < 0)
 191             InspectorTest.addResult("Unexpected styleSheetAdded()");
 192
 193         InspectorTest.addResult("Stylesheets added:");
 194         sortAndDumpData(addedSheets);
 195         addedSheets = [];
 196         if (addedCallback) {
 197             var callback = addedCallback;
 198             addedCallback = null;
 199             callback();
 200         }
 201     }
 202
 203     var removedCallback;
 204     var removedSheetCount;
 205     var removedSheets = [];
 206
 207     function waitStyleSheetRemoved(count, next)
 208     {
 209         removedSheetCount = count;
 210         removedCallback = next;
 211     }
 212
 213     function styleSheetRemoved(event)
 214     {
 215         var header = event.data;
 216         removedSheets.push(header);
 217         --removedSheetCount;
 218         if (removedSheetCount > 0)
 219             return;
 220         else if (removedSheetCount < 0)
 221             InspectorTest.addResult("Unexpected styleSheetRemoved()");
 222
 223         InspectorTest.addResult("Stylesheets removed:");
 224         sortAndDumpData(removedSheets);
 225         removedSheets = [];
 226         if (removedCallback) {
 227             var callback = removedCallback;
 228             removedCallback = null;
 229             callback();
 230         }
 231     }
 232
 233     function sortAndDumpData(sheets)
 234     {
 235         function sorter(a, b)
 236         {
 237             return a.sourceURL.localeCompare(b.sourceURL);
 238         }
 239         sheets = sheets.sort(sorter);
 240         for (var i = 0; i < sheets.length; ++i) {
 241             var header = sheets[i];
 242             InspectorTest.addResult("    URL=" + trimURL(header.sourceURL));
 243             InspectorTest.addResult("    origin=" + header.origin);
 244             InspectorTest.addResult("    isInline=" + header.isInline);
 245             InspectorTest.addResult("    hasSourceURL=" + header.hasSourceURL);
 246         }
 247     }
 248
 249     function trimURL(url)
 250     {
 251         if (!url)
 252             return url;
 253         var lastIndex = url.lastIndexOf("inspector/");
 254         if (lastIndex < 0)
 255             return url;
 256         return ".../" + url.substr(lastIndex);
 257     }
 258 }
 259 </script>
 260 </head>
 261
 262 <body onload="runTest()">
 263 <p>
 264 Tests that the styleSheetAdded and styleSheetRemoved events are reported into the frontend. <a href="https://bugs.webkit.org/show_bug.cgi?id=105828">Bug 105828</a>.
 265 </p>
 266
 267 <div id="inspected">Text</div>
 268
 269 </body>
 270 </html>