third_party/WebKit/LayoutTests/inspector/elements/styles-1/edit-resource-referred-by-multiple-styletags.html - Issue 2893523002: DevTools: make StyleSourceMapping in charge of managing UISourceCodes

Side by Side Diff: third_party/WebKit/LayoutTests/inspector/elements/styles-1/edit-resource-referred-by-multiple-styletags.html

Issue 2893523002: DevTools: make StyleSourceMapping in charge of managing UISourceCodes (Closed)

Patch Set: update test Created 3 years, 7 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/http/tests/inspector/persistence/persistence-do-not-overwrite-css.html ('k') | third_party/WebKit/LayoutTests/inspector/elements/styles-1/edit-resource-referred-by-multiple-styletags-expected.txt » ('j') | third_party/WebKit/LayoutTests/inspector/elements/styles-1/edit-resource-referred-by-multiple-styletags-expected.txt » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <html>	1 <html>

2 <head>	2 <head>

3 <script src="../../../http/tests/inspector/inspector-test.js"></script>	3 <script src="../../../http/tests/inspector/inspector-test.js"></script>

4 <script src="../../../http/tests/inspector/elements-test.js"></script>	4 <script src="../../../http/tests/inspector/elements-test.js"></script>

5 <script src="../../../http/tests/inspector/debugger-test.js"></script>	5 <script src="../../../http/tests/inspector/debugger-test.js"></script>

6 <script src="../../../http/tests/inspector/live-edit-test.js"></script>	6 <script src="../../../http/tests/inspector/live-edit-test.js"></script>

	7 <script src="../../../http/tests/inspector/bindings/bindings-test.js"></script>

7 <script>	8 <script>

8	9

9 function prepareTest()	10 function prepareTest()

10 {	11 {

11 var text = document.querySelector(".stylesheet-text").textContent;

12 for (var i = 0; i < 3; ++i) {

13 var style = document.createElement("style");

14 style.textContent = text;

15 document.head.appendChild(style);

16 }

17 runTest();	12 runTest();

18 }	13 }

19	14

20 function test()	15 async function test()

21 {	16 {

22 InspectorTest.showScriptSource("stylesheet.css", onEditorOpened);	17 await InspectorTest.attachShadowDOM('shadow1', '#template'),

	18 await InspectorTest.attachFrame('frame', './resources/frame.html');

	19 var uiSourceCode = await InspectorTest.waitForUISourceCode('stylesheet.css') ;

	20 var headers = InspectorTest.cssModel.styleSheetHeaders().filter(header => he ader.resourceURL().endsWith('stylesheet.css'));

	21 InspectorTest.addResult('Headers count: ' + headers.length);

23	22

24 function onEditorOpened(sourceFrame)	23 InspectorTest.markStep('Make edits with Sources Panel');

25 {	24 var sourceFrame = await new Promise(x => InspectorTest.showScriptSource("sty lesheet.css", x));

26 InspectorTest.addSniffer(SDK.CSSModel.prototype, "_fireStyleSheetChanged ", didEditStyleSheet);	25 InspectorTest.replaceInSource(sourceFrame, 'red', 'EDITED');

27 InspectorTest.replaceInSource(sourceFrame, "100px", "2em");	26 await waitForStyleFile();

	27 await checkHeadersContent();

	28

	29

	30 InspectorTest.markStep('Make edits via css model');

	31 InspectorTest.cssModel.setStyleSheetText(headers[0].id, '* { --foo: "bar" }' );

	32 await waitForStyleFile();

	33 await checkHeadersContent();

	34 InspectorTest.completeTest();

	35

	36

	37 async function checkHeadersContent(expected) {

	38 var contents = await Promise.all(headers.map(header => header.requestCon tent()));

	39 contents.push(uiSourceCode.workingCopy());

	40 var dedup = new Set(contents);

	41 if (dedup.size !== 1) {

	42 InspectorTest.addResult('ERROR: contents are out of sync!');

	43 InspectorTest.completeTest();

	44 return;

	45 }

	46 InspectorTest.addResult('Both headers and uiSourceCode content:');

	47 InspectorTest.addResult(dedup.firstValue());

28 }	48 }

29	49

30 function didEditStyleSheet()	50 function waitForStyleFile() {

31 {	51 var fulfill;

32 InspectorTest.selectNodeAndWaitForStyles("inspected", didSelectNode);	52 var promise = new Promise(x => fulfill = x);

33 }	53 InspectorTest.addSniffer(Bindings.StyleFile.prototype, '_styleFileSynced ForTest', fulfill);

34	54 return promise;

35 function didSelectNode()

36 {

37 InspectorTest.dumpSelectedElementStyles(true, false);

38 InspectorTest.completeTest();

39 }	55 }

40 }	56 }

41 </script>	57 </script>

42 </head>	58 </head>

43 <body onload="prepareTest()">	59 <body onload="prepareTest()">

44 <p>	60 <p>

45 Tests that editing sourcecode which is referred by multiple stylesheets (via sou rceURL comment) updates all stylesheets.	61 Tests that editing sourcecode which is referred by multiple stylesheets (via sou rceURL comment) updates all stylesheets.

46 </p>	62 </p>

47	63

48 <div id="inspected">Inspected node</div>	64 <div id="inspected">Inspected node</div>

49	65

50 <div class="stylesheet-text" hidden>	66 <style>div{color:red;}

51 #inspected {

52 font-size: 100px;

53 }

54 /# sourceURL=stylesheet.css /	67 /# sourceURL=stylesheet.css /

55 </div>	68 </style>

	69

	70 <template id='template'>

	71 <style>div{color:red;}

	72 /# sourceURL=stylesheet.css /

	73 </style>

	74 <p>Hi! I'm ShadowDOM v1!</p>

	75 </template>

56	76

57 </body>	77 </body>

58 </html>	78 </html>

OLD	NEW