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="../styles/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     InspectorTest.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetAdded, styleSheetAdded, null);
  73     InspectorTest.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, styleSheetRemoved, null);
  74     var headers = InspectorTest.cssModel.styleSheetHeaders();
  75     InspectorTest.addResult(headers.length + " headers known:");
  76     sortAndDumpData(headers);
  77
  78     InspectorTest.selectNodeAndWaitForStyles("inspected", step0);
  79
  80     function step0(node)
  81     {
  82         inspectedNode = node;
  83         InspectorTest.addResult("=== Adding iframe... ===");
  84         InspectorTest.evaluateInPage("loadIframe()");
  85         waitStyleSheetAdded(1, iframeAdded);
  86
  87         function iframeAdded()
  88         {
  89             InspectorTest.addResult("=== Adding iframe stylesheet... ===");
  90             waitStyleSheetAdded(2, navigateIframe);
  91             InspectorTest.evaluateInPage("addIframeStyleSheets()");
  92         }
  93
  94         function navigateIframe()
  95         {
  96             InspectorTest.addResult("=== Navigating iframe... ===");
  97             waitStyleSheetRemoved(3, frameNavigated);
  98             InspectorTest.evaluateInPage("navigateIframe()");
  99
 100             function frameNavigated()
 101             {
 102                 waitStyleSheetAdded(1, styleSheetsAdded);
 103             }
 104
 105             function styleSheetsAdded()
 106             {
 107                 InspectorTest.addResult("=== Adding iframe stylesheet... ===");
 108                 waitStyleSheetAdded(2, removeIframeStyleSheets);
 109                 InspectorTest.evaluateInPage("addIframeStyleSheets()");
 110             }
 111         }
 112
 113         function removeIframeStyleSheets()
 114         {
 115             InspectorTest.addResult("=== Removing iframe stylesheet... ===");
 116             waitStyleSheetRemoved(2, step1)
 117             InspectorTest.evaluateInPage("removeIframeStyleSheets()");
 118         }
 119     }
 120
 121     function step1()
 122     {
 123         InspectorTest.addResult("=== Adding stylesheet... ===");
 124         waitStyleSheetAdded(4, step2);
 125         InspectorTest.evaluateInPage("addStyleSheet()");
 126     }
 127
 128     function step2()
 129     {
 130         InspectorTest.addResult("=== Removing @import... ===");
 131         waitStyleSheetRemoved(3, step3);
 132         InspectorTest.evaluateInPage("removeImport()");
 133     }
 134
 135     function step3()
 136     {
 137         InspectorTest.addResult("=== Removing stylesheet... ===");
 138         waitStyleSheetRemoved(1, step4);
 139         InspectorTest.evaluateInPage("removeStyleSheet()");
 140     }
 141
 142     function step4()
 143     {
 144         InspectorTest.addResult("=== Adding rule... ===");
 145         waitStyleSheetAdded(1);
 146         InspectorTest.addNewRule("#inspected", successCallback);
 147
 148         function successCallback()
 149         {
 150             InspectorTest.addResult("Rule added");
 151             step5();
 152         }
 153     }
 154
 155     function step5()
 156     {
 157         InspectorTest.addResult("=== Removing iframe... ===");
 158         InspectorTest.evaluateInPage("removeIframe()");
 159         waitStyleSheetRemoved(1, step6);
 160     }
 161
 162     function step6()
 163     {
 164         InspectorTest.completeTest();
 165     }
 166
 167     var addedCallback;
 168     var addedSheetCount;
 169     var addedSheets = [];
 170
 171     function waitStyleSheetAdded(count, next)
 172     {
 173         addedSheetCount = count;
 174         addedCallback = next;
 175     }
 176
 177     function styleSheetAdded(event)
 178     {
 179         var header = event.data;
 180         addedSheets.push(header);
 181         --addedSheetCount;
 182         if (addedSheetCount > 0)
 183             return;
 184         else if (addedSheetCount < 0)
 185             InspectorTest.addResult("Unexpected styleSheetAdded()");
 186
 187         InspectorTest.addResult("Stylesheets added:");
 188         sortAndDumpData(addedSheets);
 189         addedSheets = [];
 190         if (addedCallback) {
 191             var callback = addedCallback;
 192             addedCallback = null;
 193             callback();
 194         }
 195     }
 196
 197     var removedCallback;
 198     var removedSheetCount;
 199     var removedSheets = [];
 200
 201     function waitStyleSheetRemoved(count, next)
 202     {
 203         removedSheetCount = count;
 204         removedCallback = next;
 205     }
 206
 207     function styleSheetRemoved(event)
 208     {
 209         var header = event.data;
 210         removedSheets.push(header);
 211         --removedSheetCount;
 212         if (removedSheetCount > 0)
 213             return;
 214         else if (removedSheetCount < 0)
 215             InspectorTest.addResult("Unexpected styleSheetRemoved()");
 216
 217         InspectorTest.addResult("Stylesheets removed:");
 218         sortAndDumpData(removedSheets);
 219         removedSheets = [];
 220         if (removedCallback) {
 221             var callback = removedCallback;
 222             removedCallback = null;
 223             callback();
 224         }
 225     }
 226
 227     function sortAndDumpData(sheets)
 228     {
 229         function sorter(a, b)
 230         {
 231             return a.sourceURL.localeCompare(b.sourceURL);
 232         }
 233         sheets = sheets.sort(sorter);
 234         for (var i = 0; i < sheets.length; ++i) {
 235             var header = sheets[i];
 236             InspectorTest.addResult("    URL=" + trimURL(header.sourceURL));
 237             InspectorTest.addResult("    origin=" + header.origin);
 238             InspectorTest.addResult("    isInline=" + header.isInline);
 239             InspectorTest.addResult("    hasSourceURL=" + header.hasSourceURL);
 240         }
 241     }
 242
 243     function trimURL(url)
 244     {
 245         if (!url)
 246             return url;
 247         var lastIndex = url.lastIndexOf("inspector/");
 248         if (lastIndex < 0)
 249             return url;
 250         return ".../" + url.substr(lastIndex);
 251     }
 252 }
 253 </script>
 254 </head>
 255
 256 <body onload="runTest()">
 257 <p>
 258 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>.
 259 </p>
 260
 261 <div id="inspected">Text</div>
 262
 263 </body>
 264 </html>