Index: third_party/WebKit/LayoutTests/inspector/sass/test-ast-diff-1.html |
diff --git a/third_party/WebKit/LayoutTests/inspector/sass/test-ast-diff-1.html b/third_party/WebKit/LayoutTests/inspector/sass/test-ast-diff-1.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..c549033aece5f4f8652b3cfa5b74d9e00cd116cb |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/inspector/sass/test-ast-diff-1.html |
@@ -0,0 +1,121 @@ |
+<html> |
+<head> |
+<script src="../../http/tests/inspector/inspector-test.js"></script> |
+<script src="../../http/tests/inspector/elements-test.js"></script> |
+<script src="./sass-test.js"></script> |
+<style> |
+pre { |
+ font-family: monospace; |
+} |
+</style> |
+<script> |
+ |
+function test() |
+{ |
+ var parseCSS = InspectorTest.parseCSS.bind(InspectorTest, ""); |
+ var loadCSS = InspectorTest.evaluateInPagePromise.bind(InspectorTest); |
+ var ast1, ast2; |
+ |
+ loadCSS("getCSS('.initial')") |
+ .then(result => parseCSS(result.value)) |
+ .then(ast => ast1 = ast) |
+ .then(() => loadCSS("getCSS('.changed')")) |
+ .then(result => parseCSS(result.value)) |
+ .then(ast => ast2 = ast) |
+ .then(onParsed) |
+ .catch(error => console.error(error)) |
+ .then(InspectorTest.completeTest); |
+ |
+ function onParsed() |
+ { |
+ var diff = WebInspector.SASSSupport.diffModels(ast1, ast2); |
+ InspectorTest.dumpASTDiff(diff); |
+ } |
+ |
+} |
+ |
+function getCSS(className) |
+{ |
+ return document.querySelector(className).textContent; |
+} |
+ |
+</script> |
+</head> |
+ |
+<body onload="runTest()"> |
+<p> |
+Verifies CSS AST property diff. |
+</p> |
+<pre class="initial"> |
+.change-property-name { |
+ color: red; |
+} |
+ |
+.change-property-value::before { |
+ margin: 10px 10px; |
+} |
+ |
+.change-inside-disabled-property { |
+ /* width: 100px; */ |
+} |
+ |
+.toggle-property { |
+ border: 1px solid black; |
+} |
+ |
+.add-property { |
+ font-family: "Arial"; |
+} |
+ |
+.remove-property { |
+ display: inline-flex; |
+ position: static; |
+} |
+ |
+.complex-composite-change { |
+ position: absolute; |
+ left: 0; |
+ right: 0; |
+ top: 0; |
+ bottom: 0; |
+ display: flex; |
+ /* align-items: center; */ |
+} |
+</pre> |
+<pre class="changed"> |
+.change-property-name { |
+ background: red; |
+} |
+ |
+.change-property-value::before { |
+ margin: 10px 0 0 10px; |
+} |
+ |
+.change-inside-disabled-property { |
+ /* height: 10px; */ |
+} |
+ |
+.toggle-property { |
+ /* border: 1px solid black; */ |
+} |
+ |
+.add-property { |
+ font-family: "Arial"; |
+ font-size: 16px; |
+} |
+ |
+.remove-property { |
+ display: inline-flex; |
+} |
+ |
+.complex-composite-change { |
+ /* position: absolute; */ |
+ left: 10px; |
+ margin: 0; |
+ padding: 22px; |
+ display: flex; |
+ align-items: center; |
+} |
+</pre> |
+</body> |
+</html> |