third_party/WebKit/LayoutTests/inspector-protocol/css/css-coverage-poll.html - Issue 2759703003: DevTools: add support for polling for coverage data in CSS agent

Side by Side Diff: third_party/WebKit/LayoutTests/inspector-protocol/css/css-coverage-poll.html

Issue 2759703003: DevTools: add support for polling for coverage data in CSS agent (Closed)

Patch Set: moved ranges sorting so it also works for CSS ranges Created 3 years, 9 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:

« no previous file with comments | « third_party/WebKit/LayoutTests/TestExpectations ('k') | third_party/WebKit/LayoutTests/inspector-protocol/css/css-coverage-poll-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <html>

	2 <head>

	3 <script type="text/javascript" src="../../http/tests/inspector-protocol/inspecto r-protocol-test.js"></script>

	4 <script type="text/javascript" src="../../http/tests/inspector-protocol/css-prot ocol-test.js"></script>

	5 <script type="text/javascript" src="../../http/tests/inspector-protocol/dom-prot ocol-test.js"></script>

	6 <script type="text/javascript">

	7

	8 function loadStylesheet(url)

	9 {

	10 var link = document.createElement("link");

	11 link.rel = "stylesheet";

	12 link.href = url;

	13 var promise = new Promise(fulfill => {

	14 link.addEventListener("load", requestAnimationFrame.bind(window, fulfill ));

	15 });

	16 document.head.appendChild(link);

	17 return promise;

	18 }

	19

	20 function useMoreCSS(className) {

	21 var div = document.createElement("div");

	22 div.classList.add(className);

	23 document.body.appendChild(div);

	24 div.offsetHeight; // Force layout & style recalc

	25 return Promise.resolve();

	26 }

	27

	28 async function test()

	29 {

	30 var stylesheetIdToURL = new Map();

	31 InspectorTest.eventHandler["CSS.styleSheetAdded"] = styleSheetAdded;

	32

	33 InspectorTest.sendCommandPromise("DOM.enable", {});

	34 await InspectorTest.sendCommandPromise("CSS.enable", {});

	35 await InspectorTest.sendCommandPromise("CSS.startRuleUsageTracking", {});

	36

	37 await doActionAndDump("");

	38 await doActionAndDump("loadStylesheet('resources/coverage2.css')");

	39 await doActionAndDump("useMoreCSS('usedSomewhatLater')");

	40 await InspectorTest.evaluateInPageAsync("useMoreCSS('usedAtTheVeryEnd')");

	41

	42 var response = await InspectorTest.sendCommandPromise("CSS.stopRuleUsageTrac king", {});

	43

	44 if (response.result)

	45 dumpCoverageData(response.result.ruleUsage);

	46

	47 InspectorTest.completeTest();

	48

	49 function styleSheetAdded(event)

	50 {

	51 var header = event.params.header;

	52 var url = /(([^/]\/){2}[^/]$)/.exec(header.sourceURL)[1];

	53 stylesheetIdToURL.set(header.styleSheetId, url);

	54 }

	55

	56 function dumpCoverageData(rules)

	57 {

	58 InspectorTest.log(`Coverage delta (${rules.length} entries)`);

	59 rules.sort((a, b) =>

	60 (stylesheetIdToURL.get(a.styleSheetId) \|\| '').localeCompare(styleshe etIdToURL.get(b.styleSheetId)) \|\| a.startOffset - b.startOffset

	61 );

	62 var lastURL;

	63 var output = '';

	64 for (var rule of rules) {

	65 var url = stylesheetIdToURL.get(rule.styleSheetId) \|\| '<unknown>';

	66 if (lastURL !== url)

	67 output += ` ${output ? '\n' : ''}${url}:`;

	68 lastURL = url;

	69 var used = rule.used ? '+' : '-';

	70 output += ` ${used}${rule.startOffset}-${rule.endOffset}`;

	71 }

	72 InspectorTest.log(output);

	73 }

	74

	75 async function doActionAndDump(expression)

	76 {

	77 InspectorTest.log(`${expression} =>`);

	78 if (expression)

	79 await InspectorTest.evaluateInPageAsync(expression);

	80 var response = await InspectorTest.sendCommandPromise("CSS.takeCoverageD elta", {});

	81 if (!response.result) {

	82 InspectorTest.log(`ERROR: ${response.error}`);

	83 InspectorTest.completeTest();

	84 return;

	85 }

	86 dumpCoverageData(response.result.coverage);

	87 }

	88 }

	89

	90 </script>

	91 <link rel="stylesheet" href="resources/coverage.css">

	92 </head>

	93 <body onload="runTest();">

	94 <h1 class="class">Class Selector</h1>

	95 <p id="id" class="usedStraightAway">ID Selector</p>

	96 <div></div>

	97

	98 </body>

	99 </html>

OLD	NEW