| 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 InspectorTest.addSnifferPromise(Bindings.StyleFile.prototype, '_styleF
ileSyncedForTest'); |
| 28 } | 27 await checkHeadersContent(); |
| 29 | 28 |
| 30 function didEditStyleSheet() | |
| 31 { | |
| 32 InspectorTest.selectNodeAndWaitForStyles("inspected", didSelectNode); | |
| 33 } | |
| 34 | 29 |
| 35 function didSelectNode() | 30 InspectorTest.markStep('Make edits via css model'); |
| 36 { | 31 InspectorTest.cssModel.setStyleSheetText(headers[0].id, '* { --foo: "bar" }'
); |
| 37 InspectorTest.dumpSelectedElementStyles(true, false); | 32 await InspectorTest.addSnifferPromise(Bindings.StyleFile.prototype, '_styleF
ileSyncedForTest'); |
| 38 InspectorTest.completeTest(); | 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()); |
| 39 } | 48 } |
| 40 } | 49 } |
| 41 </script> | 50 </script> |
| 42 </head> | 51 </head> |
| 43 <body onload="prepareTest()"> | 52 <body onload="prepareTest()"> |
| 44 <p> | 53 <p> |
| 45 Tests that editing sourcecode which is referred by multiple stylesheets (via sou
rceURL comment) updates all stylesheets. | 54 Tests that editing sourcecode which is referred by multiple stylesheets (via sou
rceURL comment) updates all stylesheets. |
| 46 </p> | 55 </p> |
| 47 | 56 |
| 48 <div id="inspected">Inspected node</div> | 57 <div id="inspected">Inspected node</div> |
| 49 | 58 |
| 50 <div class="stylesheet-text" hidden> | 59 <style>div{color:red;} |
| 51 #inspected { | |
| 52 font-size: 100px; | |
| 53 } | |
| 54 /*# sourceURL=stylesheet.css */ | 60 /*# sourceURL=stylesheet.css */ |
| 55 </div> | 61 </style> |
| 62 |
| 63 <template id='template'> |
| 64 <style>div{color:red;} |
| 65 /*# sourceURL=stylesheet.css */ |
| 66 </style> |
| 67 <p>Hi! I'm ShadowDOM v1!</p> |
| 68 </template> |
| 56 | 69 |
| 57 </body> | 70 </body> |
| 58 </html> | 71 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2893523002:
DevTools: make StyleSourceMapping in charge of managing UISourceCodes (Closed)
