| 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>
|
|
|