[html] update services, add folding for embedded css (for #47808)

This commit is contained in:
Martin Aeschlimann
2018-04-16 22:19:54 +02:00
parent e4c975592b
commit 21ef28c36e
7 changed files with 79 additions and 227 deletions

View File

@@ -8,7 +8,7 @@
import 'mocha';
import * as assert from 'assert';
import { TextDocument } from 'vscode-languageserver';
import { getFoldingRegions } from '../modes/htmlFolding';
import { getFoldingRanges } from '../modes/htmlFolding';
import { getLanguageModes } from '../modes/languageModes';
interface ExpectedIndentRange {
@@ -24,7 +24,7 @@ function assertRanges(lines: string[], expected: ExpectedIndentRange[], message?
folders: [{ name: 'foo', uri: 'test://foo' }]
};
let languageModes = getLanguageModes({ css: true, javascript: true }, workspace);
let actual = getFoldingRegions(languageModes, document, nRanges, null)!.ranges;
let actual = getFoldingRanges(languageModes, document, nRanges, null)!.ranges;
let actualRanges = [];
for (let i = 0; i < actual.length; i++) {
@@ -39,75 +39,6 @@ function r(startLine: number, endLine: number, type?: string): ExpectedIndentRan
}
suite('HTML Folding', () => {
test('Fold one level', () => {
let input = [
/*0*/'<html>',
/*1*/'Hello',
/*2*/'</html>'
];
assertRanges(input, [r(0, 1)]);
});
test('Fold two level', () => {
let input = [
/*0*/'<html>',
/*1*/'<head>',
/*2*/'Hello',
/*3*/'</head>',
/*4*/'</html>'
];
assertRanges(input, [r(0, 3), r(1, 2)]);
});
test('Fold siblings', () => {
let input = [
/*0*/'<html>',
/*1*/'<head>',
/*2*/'Head',
/*3*/'</head>',
/*4*/'<body class="f">',
/*5*/'Body',
/*6*/'</body>',
/*7*/'</html>'
];
assertRanges(input, [r(0, 6), r(1, 2), r(4, 5)]);
});
test('Fold self-closing tags', () => {
let input = [
/*0*/'<div>',
/*1*/'<a href="top"/>',
/*2*/'<img src="s">',
/*3*/'<br/>',
/*4*/'<br>',
/*5*/'<img class="c"',
/*6*/' src="top"',
/*7*/'>',
/*8*/'</div>'
];
assertRanges(input, [r(0, 7), r(5, 6)]);
});
test('Fold comment', () => {
let input = [
/*0*/'<!--',
/*1*/' multi line',
/*2*/'-->',
/*3*/'<!-- some stuff',
/*4*/' some more stuff -->',
];
assertRanges(input, [r(0, 2, 'comment'), r(3, 4, 'comment')]);
});
test('Fold regions', () => {
let input = [
/*0*/'<!-- #region -->',
/*1*/'<!-- #region -->',
/*2*/'<!-- #endregion -->',
/*3*/'<!-- #endregion -->',
];
assertRanges(input, [r(0, 3, 'region'), r(1, 2, 'region')]);
});
test('Embedded JavaScript', () => {
let input = [
@@ -177,6 +108,61 @@ suite('HTML Folding', () => {
assertRanges(input, [r(0, 9), r(1, 8), r(2, 7), r(3, 7, 'region'), r(4, 6, 'region')]);
});
test('Embedded CSS', () => {
let input = [
/* 0*/'<html>',
/* 1*/'<head>',
/* 2*/'<style>',
/* 3*/' foo {',
/* 4*/' display: block;',
/* 5*/' color: black;',
/* 6*/' }',
/* 7*/'</style>',
/* 8*/'</head>',
/* 9*/'</html>',
];
assertRanges(input, [r(0, 8), r(1, 7), r(2, 6), r(3, 5)]);
});
test('Embedded CSS - multiple areas', () => {
let input = [
/* 0*/'<html>',
/* 1*/'<head style="color:red">',
/* 2*/'<style>',
/* 3*/' /*',
/* 4*/' foo: true,',
/* 5*/' bar: {}',
/* 6*/' */',
/* 7*/'</style>',
/* 8*/'<style>',
/* 9*/' @keyframes mymove {',
/*10*/' from {top: 0px;}',
/*11*/' }',
/*12*/'</style>',
/*13*/'</head>',
/*14*/'</html>',
];
assertRanges(input, [r(0, 13), r(1, 12), r(2, 6), r(3, 6, 'comment'), r(8, 11), r(9, 10)]);
});
test('Embedded CSS - regions', () => {
let input = [
/* 0*/'<html>',
/* 1*/'<head>',
/* 2*/'<style>',
/* 3*/' /* #region Lalala */',
/* 4*/' /* #region*/',
/* 5*/' x = 9;',
/* 6*/' /* #endregion*/',
/* 7*/' /* #endregion Lalala*/',
/* 8*/'</style>',
/* 9*/'</head>',
/*10*/'</html>',
];
assertRanges(input, [r(0, 9), r(1, 8), r(2, 7), r(3, 7, 'region'), r(4, 6, 'region')]);
});
// test('Embedded JavaScript - multi line comment', () => {
// let input = [
// /* 0*/'<html>',
@@ -192,50 +178,6 @@ suite('HTML Folding', () => {
// assertRanges(input, [r(0, 7), r(1, 6), r(2, 5), r(3, 5, 'comment')]);
// });
test('Fold incomplete', () => {
let input = [
/*0*/'<body>',
/*1*/'<div></div>',
/*2*/'Hello',
/*3*/'</div>',
/*4*/'</body>',
];
assertRanges(input, [r(0, 3)]);
});
test('Fold incomplete 2', () => {
let input = [
/*0*/'<be><div>',
/*1*/'<!-- #endregion -->',
/*2*/'</div>',
];
assertRanges(input, [r(0, 1)]);
});
test('Fold intersecting region', () => {
let input = [
/*0*/'<body>',
/*1*/'<!-- #region -->',
/*2*/'Hello',
/*3*/'<div></div>',
/*4*/'</body>',
/*5*/'<!-- #endregion -->',
];
assertRanges(input, [r(0, 3)]);
});
test('Fold intersecting region 2', () => {
let input = [
/*0*/'<!-- #region -->',
/*1*/'<body>',
/*2*/'Hello',
/*3*/'<!-- #endregion -->',
/*4*/'<div></div>',
/*5*/'</body>',
];
assertRanges(input, [r(0, 3, 'region')]);
});
test('Test limit', () => {
let input = [
/* 0*/'<div>',