| OLD | NEW |
|---|
| 1 <html> | 1 <html> |
| 2 <head> | 2 <head> |
| 3 | 3 |
| 4 <link rel="stylesheet" href="resources/test-mapping-good.css"> | 4 <link rel="stylesheet" href="resources/test-mapping-good.css"> |
| 5 | 5 |
| 6 <script src="../../http/tests/inspector/inspector-test.js"></script> | 6 <script src="../../http/tests/inspector/inspector-test.js"></script> |
| 7 <script src="../../http/tests/inspector/debugger-test.js"></script> | 7 <script src="../../http/tests/inspector/debugger-test.js"></script> |
| 8 <script src="./sass-test.js"></script> | 8 <script src="./sass-test.js"></script> |
| 9 <script> | 9 <script> |
| 10 | 10 |
| 11 function test() | 11 function test() |
| 12 { | 12 { |
| 13 var header = InspectorTest.cssModel.styleSheetHeaders().find(header => !!hea
der.sourceMapURL) | |
| 14 InspectorTest.loadSourceMap(header, onSourceMapLoaded); | |
| 15 InspectorTest.waitForScriptSource("test-mapping-good.css", onCSSLoaded); | |
| 16 InspectorTest.waitForScriptSource("test-mapping-good.scss", onSCSSLoaded); | |
| 17 | |
| 18 var cssAST; | |
| 19 var sassModels = new Map(); | |
| 20 var sourceMap; | |
| 21 var mapping; | 13 var mapping; |
| 22 | 14 |
| 23 function onCSSLoaded(uiSourceCode) | 15 var header = InspectorTest.cssModel.styleSheetHeaders().find(header => !!hea
der.sourceMapURL); |
| 16 InspectorTest.loadASTMapping(header, onMappingLoaded); |
| 17 |
| 18 function onMappingLoaded(map) |
| 24 { | 19 { |
| 25 uiSourceCode.requestContent() | 20 mapping = map; |
| 26 .then(text => InspectorTest.parseCSS(uiSourceCode.url(), text)) | |
| 27 .then(ast => cssAST = ast) | |
| 28 .then(maybeCreateMapping); | |
| 29 } | |
| 30 | |
| 31 function onSCSSLoaded(uiSourceCode) | |
| 32 { | |
| 33 uiSourceCode.requestContent() | |
| 34 .then(text => InspectorTest.parseSCSS(uiSourceCode.url(), text)) | |
| 35 .then(ast => sassModels.set(ast.document.url, ast)) | |
| 36 .then(maybeCreateMapping); | |
| 37 } | |
| 38 | |
| 39 function onSourceMapLoaded(sm) | |
| 40 { | |
| 41 sourceMap = sm; | |
| 42 maybeCreateMapping(); | |
| 43 } | |
| 44 | |
| 45 function maybeCreateMapping() | |
| 46 { | |
| 47 if (!cssAST || !sassModels.size || !sourceMap) | |
| 48 return; | |
| 49 mapping = WebInspector.SASSLiveSourceMap.CSSToSASSMapping.fromSourceMap(
sourceMap, cssAST, sassModels); | |
| 50 if (!mapping.isValid()) { | 21 if (!mapping.isValid()) { |
| 51 InspectorTest.addResult("ERROR: mapping is not valid."); | 22 InspectorTest.addResult("ERROR: mapping is not valid."); |
| 52 InspectorTest.completeTest(); | 23 InspectorTest.completeTest(); |
| 53 return; | 24 return; |
| 54 } | 25 } |
| 55 InspectorTest.validateMapping(mapping, cssAST, sassModels); | 26 InspectorTest.validateMapping(mapping); |
| 56 InspectorTest.runTestSuite(testSuite); | 27 InspectorTest.runTestSuite(testSuite); |
| 57 } | 28 } |
| 58 | 29 |
| 59 var testSuite = [ | 30 var testSuite = [ |
| 60 function testCSSRebase(next) | 31 function testCSSRebase(next) |
| 61 { | 32 { |
| 62 var cssClone = cssAST.clone(); | 33 var cssClone = mapping.cssAST().clone(); |
| 63 cssClone.rules[0].properties[1].remove(); | 34 cssClone.rules[0].properties[1].remove(); |
| 64 var cssDiff = WebInspector.SASSSupport.diffModels(cssAST, cssClone); | 35 var cssDiff = WebInspector.SASSSupport.diffModels(mapping.cssAST(),
cssClone); |
| 65 var newMapping = mapping.rebaseForCSSDiff(cssDiff); | 36 var newMapping = mapping.rebaseForCSSDiff(cssDiff); |
| 66 if (!newMapping.isValid()) { | 37 if (!newMapping.isValid()) { |
| 67 InspectorTest.addResult("ERROR: mapping is not valid."); | 38 InspectorTest.addResult("ERROR: mapping is not valid."); |
| 68 InspectorTest.completeTest(); | 39 InspectorTest.completeTest(); |
| 69 return; | 40 return; |
| 70 } | 41 } |
| 71 InspectorTest.validateMapping(newMapping, cssClone, sassModels); | 42 InspectorTest.validateMapping(newMapping); |
| 72 next(); | 43 next(); |
| 73 }, | 44 }, |
| 74 | 45 |
| 75 function testSCSSRebase(next) | 46 function testSCSSRebase(next) |
| 76 { | 47 { |
| 77 var sassAST = sassModels.valuesArray()[0]; | 48 var sassAST = mapping.sassModels().valuesArray()[0]; |
| 78 var sassClone = sassAST.clone(); | 49 var sassClone = sassAST.clone(); |
| 79 sassClone.rules[1].properties[2].remove(); | 50 sassClone.rules[1].properties[2].remove(); |
| 80 sassClone.rules[1].properties[1].remove(); | 51 sassClone.rules[1].properties[1].remove(); |
| 81 var sassDiff = WebInspector.SASSSupport.diffModels(sassAST, sassClon
e); | 52 var sassDiff = WebInspector.SASSSupport.diffModels(sassAST, sassClon
e); |
| 82 var newMapping = mapping.rebaseForSASSDiff(sassDiff); | 53 var newMapping = mapping.rebaseForSASSDiff(sassDiff); |
| 83 if (!newMapping.isValid()) { | 54 if (!newMapping.isValid()) { |
| 84 InspectorTest.addResult("ERROR: mapping is not valid."); | 55 InspectorTest.addResult("ERROR: mapping is not valid."); |
| 85 InspectorTest.completeTest(); | 56 InspectorTest.completeTest(); |
| 86 return; | 57 return; |
| 87 } | 58 } |
| 88 var sassModelsClone = new Map(); | 59 InspectorTest.validateMapping(newMapping); |
| 89 sassModelsClone.set(sassClone.document.url, sassClone); | |
| 90 InspectorTest.validateMapping(newMapping, cssAST, sassModelsClone); | |
| 91 next(); | 60 next(); |
| 92 }, | 61 }, |
| 93 ]; | 62 ]; |
| 94 } | 63 } |
| 95 | 64 |
| 96 </script> | 65 </script> |
| 97 | 66 |
| 98 </head> | 67 </head> |
| 99 | 68 |
| 100 <body onload="runTest()"> | 69 <body onload="runTest()"> |
| 101 <p>Verify CSSToSASSMapping rebaselines.</p> | 70 <p>Verify CSSToSASSMapping rebaselines.</p> |
| 102 </body> | 71 </body> |
| 103 </html> | 72 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1641893002:
DevTools: [SASS] introduce workspace/cssModel adapter for SASS processor. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master