| OLD | NEW |
|---|
| (Empty) | |
| 1 <html> |
| 2 <head> |
| 3 <script src="../../http/tests/inspector/inspector-test.js"></script> |
| 4 <script src="../../http/tests/inspector/elements-test.js"></script> |
| 5 <script src="./sass-test.js"></script> |
| 6 <style> |
| 7 pre { |
| 8 font-family: monospace; |
| 9 } |
| 10 </style> |
| 11 <script> |
| 12 |
| 13 function test() |
| 14 { |
| 15 var parseCSS = InspectorTest.parseCSS.bind(InspectorTest, ""); |
| 16 var loadCSS = InspectorTest.evaluateInPagePromise.bind(InspectorTest); |
| 17 var ast1, ast2; |
| 18 |
| 19 loadCSS("getCSS('.initial')") |
| 20 .then(result => parseCSS(result.value)) |
| 21 .then(ast => ast1 = ast) |
| 22 .then(() => loadCSS("getCSS('.changed')")) |
| 23 .then(result => parseCSS(result.value)) |
| 24 .then(ast => ast2 = ast) |
| 25 .then(onParsed) |
| 26 .catch(error => console.error(error)) |
| 27 .then(InspectorTest.completeTest); |
| 28 |
| 29 function onParsed() |
| 30 { |
| 31 var diff = WebInspector.SASSSupport.diffModels(ast1, ast2); |
| 32 InspectorTest.dumpASTDiff(diff); |
| 33 } |
| 34 |
| 35 } |
| 36 |
| 37 function getCSS(className) |
| 38 { |
| 39 return document.querySelector(className).textContent; |
| 40 } |
| 41 |
| 42 </script> |
| 43 </head> |
| 44 |
| 45 <body onload="runTest()"> |
| 46 <p> |
| 47 Verifies CSS AST property diff. |
| 48 </p> |
| 49 <pre class="initial"> |
| 50 .change-property-name { |
| 51 color: red; |
| 52 } |
| 53 |
| 54 .change-property-value::before { |
| 55 margin: 10px 10px; |
| 56 } |
| 57 |
| 58 .change-inside-disabled-property { |
| 59 /* width: 100px; */ |
| 60 } |
| 61 |
| 62 .toggle-property { |
| 63 border: 1px solid black; |
| 64 } |
| 65 |
| 66 .add-property { |
| 67 font-family: "Arial"; |
| 68 } |
| 69 |
| 70 .remove-property { |
| 71 display: inline-flex; |
| 72 position: static; |
| 73 } |
| 74 |
| 75 .complex-composite-change { |
| 76 position: absolute; |
| 77 left: 0; |
| 78 right: 0; |
| 79 top: 0; |
| 80 bottom: 0; |
| 81 display: flex; |
| 82 /* align-items: center; */ |
| 83 } |
| 84 </pre> |
| 85 <pre class="changed"> |
| 86 .change-property-name { |
| 87 background: red; |
| 88 } |
| 89 |
| 90 .change-property-value::before { |
| 91 margin: 10px 0 0 10px; |
| 92 } |
| 93 |
| 94 .change-inside-disabled-property { |
| 95 /* height: 10px; */ |
| 96 } |
| 97 |
| 98 .toggle-property { |
| 99 /* border: 1px solid black; */ |
| 100 } |
| 101 |
| 102 .add-property { |
| 103 font-family: "Arial"; |
| 104 font-size: 16px; |
| 105 } |
| 106 |
| 107 .remove-property { |
| 108 display: inline-flex; |
| 109 } |
| 110 |
| 111 .complex-composite-change { |
| 112 /* position: absolute; */ |
| 113 left: 10px; |
| 114 margin: 0; |
| 115 padding: 22px; |
| 116 display: flex; |
| 117 align-items: center; |
| 118 } |
| 119 </pre> |
| 120 </body> |
| 121 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1504923008:
DevTools: [SASS] implement AST differ. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@sass-module-2