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() { |
dgozman
2017/06/13 19:09:38
nit: you can use addSnifferPromise
lushnikov
2017/06/13 19:25:21
Done.
| |
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 |