LayoutTests/inspector/styles/stylesheet-tracking.html - Issue 14320027: DevTools: Track CSSStyleSheetHeaders in the front-end real time

Side by Side Diff: LayoutTests/inspector/styles/stylesheet-tracking.html

Issue 14320027: DevTools: Track CSSStyleSheetHeaders in the front-end real time (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Created 7 years, 8 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

OLD	NEW
(Empty)
	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 <script src="../../http/tests/inspector/debugger-test.js"></script>

	6 <link rel="stylesheet" href="resources/stylesheet-tracking.css" />

	7

	8 <style>

	9 html {

	10 font-size: 12px;

	11 }

	12 </style>

	13

	14 <script>

	15

	16 function addStyleSheet()

	17 {

	18 var styleElement = document.createElement("style");

	19 styleElement.id = "style";

	20 styleElement.type = "text/css";

	21 styleElement.textContent = "@import url(\"resources/styles-new-API.css\");\n a { color: green; }"

	22 document.head.appendChild(styleElement);

	23 }

	24

	25 function removeImport()

	26 {

	27 document.getElementById("style").sheet.deleteRule(0);

	28 }

	29

	30 function removeStyleSheet()

	31 {

	32 document.head.removeChild(document.getElementById("style"));

	33 }

	34

	35 function test()

	36 {

	37 var inspectorResource;

	38

	39 WebInspector.showPanel("elements");

	40 WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.Sty leSheetAdded, styleSheetAdded, null);

	41 WebInspector.cssModel.addEventListener(WebInspector.CSSStyleModel.Events.Sty leSheetRemoved, styleSheetRemoved, null);

	42 var headers = WebInspector.cssModel.styleSheetHeaders();

	43 InspectorTest.addResult(headers.length + " headers known:");

	44 for (var i = 0; i < headers.length; ++i)

	45 InspectorTest.addResult(i + ":\n" + headerData(headers[i]));

	46

	47 InspectorTest.selectNodeAndWaitForStyles("inspected", step1);

	48

	49 var inspectedNode;

	50 function step1(node)

	51 {

	52 inspectedNode = node;

	53 InspectorTest.addResult("=== Adding stylesheet... ===");

	54 waitStyleSheetAdded(4, step2);

	55 InspectorTest.evaluateInPage("addStyleSheet()");

	56 }

	57

	58 function step2()

	59 {

	60 InspectorTest.addResult("=== Removing @import... ===");

	61 waitStyleSheetRemoved(3, step3);

	62 InspectorTest.evaluateInPage("removeImport()");

	63 }

	64

	65 function step3()

	66 {

	67 InspectorTest.addResult("=== Removing stylesheet... ===");

	68 waitStyleSheetRemoved(1, step4);

	69 InspectorTest.evaluateInPage("removeStyleSheet()");

	70 }

	71

	72 function step4()

	73 {

	74 InspectorTest.addResult("=== Adding rule... ===");

	75 WebInspector.cssModel.addRule(inspectedNode.id, "#inspected", successCal lback, failureCallback);

	76

	77 function successCallback()

	78 {

	79 InspectorTest.addResult("Rule added");

	80 InspectorTest.completeTest();

	81 }

	82 function failureCallback()

	83 {

	84 InspectorTest.addResult("Failed to add rule.");

	85 InspectorTest.completeTest();

	86 }

	87 }

	88

	89 var addedCallback;

	90 var addedSheetCount;

	91 var addedSheets = [];

	92

	93 function waitStyleSheetAdded(count, next)

	94 {

	95 addedSheetCount = count;

	96 addedCallback = next;

	97 }

	98

	99 function styleSheetAdded(event)

	100 {

	101 var header = event.data;

	102 addedSheets.push(header);

	103 --addedSheetCount;

	104 if (addedSheetCount > 0)

	105 return;

	106 InspectorTest.addResult("Stylesheets added:");

	107 sortAndDumpData(addedSheets);

	108 addedSheets = [];

	109 if (addedCallback) {

	110 var callback = addedCallback;

	111 addedCallback = null;

	112 callback();

	113 }

	114 }

	115

	116 var removedCallback;

	117 var removedSheetCount;

	118 var removedSheets = [];

	119

	120 function waitStyleSheetRemoved(count, next)

	121 {

	122 removedSheetCount = count;

	123 removedCallback = next;

	124 }

	125

	126 function styleSheetRemoved(event)

	127 {

	128 var header = event.data;

	129 removedSheets.push(header);

	130 --removedSheetCount;

	131 if (removedSheetCount > 0)

	132 return;

	133 InspectorTest.addResult("Stylesheets removed:");

	134 sortAndDumpData(removedSheets);

	135 removedSheets = [];

	136 if (removedCallback) {

	137 var callback = removedCallback;

	138 removedCallback = null;

	139 callback();

	140 }

	141 }

	142

	143 function sortAndDumpData(sheets)

	144 {

	145 function sorter(a, b)

	146 {

	147 return a.sourceURL.localeCompare(b.sourceURL);

	148 }

	149 sheets = sheets.sort(sorter);

	150 for (var i = 0; i < sheets.length; ++i)

	151 InspectorTest.addResult(headerData(sheets[i]));

	152 }

	153

	154 function headerData(header)

	155 {

	156 return " URL=" + trimURL(header.sourceURL) + "\n origin=" + header .origin;

	157 }

	158

	159 function trimURL(url)

	160 {

	161 if (!url)

	162 return url;

	163 var lastIndex = url.lastIndexOf("inspector/");

	164 if (lastIndex < 0)

	165 return url;

	166 return ".../" + url.substr(lastIndex);

	167 }

	168 }

	169 </script>

	170 </head>

	171

	172 <body onload="runTest()">

	173 <p>

	174 Tests that the styleSheetAdded and styleSheetRemoved events are reported into th e frontend. <a href="https://bugs.webkit.org/show_bug.cgi?id=105828">Bug 105828< /a>.

	175 </p>

	176

	177 <div id="inspected">Text</div>

	178

	179 </body>

	180 </html>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/inspector/styles/stylesheet-tracking-expected.txt » ('j') | Source/devtools/front_end/CSSStyleModel.js » ('J')