mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

improved support of 'content' for pseudo elements (multiple components, counters, attr, quotes)

Browse Source
This commit is contained in:
Matthias Christen
2017-12-15 12:40:04 +01:00
parent 54c4002df7
commit 78c3c7fc71
6 changed files with 615 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
tests/node/pseudonodecontent.js Normal file
View File

@ -0,0 +1,111 @@
const PseudoNodeContent = require('../../dist/npm/PseudoNodeContent');
const assert = require('assert');
describe('PseudoNodeContent', function() {
it('should parse string', function() {
assert.deepEqual(PseudoNodeContent.parseContent('"hello"'), [
{type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'hello'}
]);
});
it('should parse string with (,)', function() {
assert.deepEqual(PseudoNodeContent.parseContent('"a,b (c) d"'), [
{type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'a,b (c) d'}
]);
});
it('should parse string with escaped quotes', function() {
assert.deepEqual(PseudoNodeContent.parseContent('"3.14\\""'), [
{type: PseudoNodeContent.TOKEN_TYPE.STRING, value: '3.14"'}
]);
});
it('should parse string with escape', function() {
assert.deepEqual(PseudoNodeContent.parseContent('"a\\) \\\\ b"'), [
{type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'a) \\ b'}
]);
});
it('should parse two strings', function() {
assert.deepEqual(PseudoNodeContent.parseContent('"hello" \'world\''), [
{type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'hello'},
{type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'world'}
]);
});
it('should parse counter', function() {
assert.deepEqual(PseudoNodeContent.parseContent('counter(x)'), [
{type: PseudoNodeContent.TOKEN_TYPE.COUNTER, name: 'x'}
]);
});
it('should parse counters', function() {
assert.deepEqual(PseudoNodeContent.parseContent('counters(x, "-")'), [
{type: PseudoNodeContent.TOKEN_TYPE.COUNTERS, name: 'x', glue: '-'}
]);
});
it('should parse strings and counters', function() {
assert.deepEqual(PseudoNodeContent.parseContent('"["counters(c2, " < ") \']\''), [
{type: PseudoNodeContent.TOKEN_TYPE.STRING, value: '['},
{type: PseudoNodeContent.TOKEN_TYPE.COUNTERS, name: 'c2', glue: ' < '},
{type: PseudoNodeContent.TOKEN_TYPE.STRING, value: ']'}
]);
});
it('should parse counter with format', function() {
assert.deepEqual(PseudoNodeContent.parseContent('counter(x, lower-greek)'), [
{type: PseudoNodeContent.TOKEN_TYPE.COUNTER, name: 'x', format: 'lower-greek'}
]);
});
it('should parse counters with format', function() {
assert.deepEqual(PseudoNodeContent.parseContent('counters(x, "-", upper-roman)'), [
{
type: PseudoNodeContent.TOKEN_TYPE.COUNTERS,
name: 'x',
glue: '-',
format: 'upper-roman'
}
]);
});
it('should parse strings and counters with format', function() {
assert.deepEqual(PseudoNodeContent.parseContent("\"[\"counters(c2, ' < ', disc) ']'"), [
{type: PseudoNodeContent.TOKEN_TYPE.STRING, value: '['},
{type: PseudoNodeContent.TOKEN_TYPE.COUNTERS, name: 'c2', glue: ' < ', format: 'disc'},
{type: PseudoNodeContent.TOKEN_TYPE.STRING, value: ']'}
]);
});
it('should parse attr', function() {
assert.deepEqual(PseudoNodeContent.parseContent('attr(id)'), [
{type: PseudoNodeContent.TOKEN_TYPE.ATTRIBUTE, value: 'id'}
]);
});
it('should parse url', function() {
assert.deepEqual(PseudoNodeContent.parseContent('url(http://www.abc.de/f/g.png)'), [
{type: PseudoNodeContent.TOKEN_TYPE.URL, value: 'http://www.abc.de/f/g.png'}
]);
});
it('should parse open-quote', function() {
assert.deepEqual(PseudoNodeContent.parseContent('open-quote'), [
{type: PseudoNodeContent.TOKEN_TYPE.OPENQUOTE}
]);
});
it('should parse close-quote', function() {
assert.deepEqual(PseudoNodeContent.parseContent('close-quote'), [
{type: PseudoNodeContent.TOKEN_TYPE.CLOSEQUOTE}
]);
});
it('should parse open-quote and string', function() {
assert.deepEqual(PseudoNodeContent.parseContent('open-quote "!"'), [
{type: PseudoNodeContent.TOKEN_TYPE.OPENQUOTE},
{type: PseudoNodeContent.TOKEN_TYPE.STRING, value: '!'}
]);
});
});

104
tests/reftests/pseudo-content.html Normal file
View File

@ -0,0 +1,104 @@
<!doctype html>
<html>
<head>
<script type="text/javascript" src="../test.js"></script>
<style>
body {
quotes: "<{" "}>" "->" "<-" "(" ")" "-:" ":-";
}
.counter1,
.counter2,
.quotes1,
.attr-url {
border: 1px solid deepskyblue;
padding: 5px;
margin-bottom: 10px;
}
.counter1 {
counter-reset: c1 3;
}
.counter1 > div::before {
content: "«\"" counter(c1) "\»";
counter-increment: c1 -1;
}
.counter2 {
counter-reset: c2;
}
.counter2 > div::before {
content: "["counters(c2, " < ", upper-roman) ']';
counter-increment: c2 2;
}
.quotes1::before {
content: open-quote "!" open-quote close-quote open-quote;
}
.quotes1::after {
content: "!" close-quote close-quote;
}
.quotes2 {
quotes: "«" "»" "“" "”";
}
.quotes2::before {
content: open-quote;
}
.quotes2::after {
content: close-quote;
}
.attr-url > div::after {
content: url(../assets/image.jpg) "///" attr(data-text);
}
</style>
</head>
<body>
<div class="counter1">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
<div class="counter2">
<div>A</div>
<div>B</div>
<div>
C
<div class="counter2">
<div>a</div>
<div>b</div>
<div>
c
<div class="counter2">
<div>Aa</div>
<div>Bb</div>
<div>Cc</div>
</div>
</div>
</div>
</div>
<div>D</div>
</div>
<div class="quotes1">
Hello
<div class="quotes2">
Quoted
<div class="quotes2">World</div>
</div>
</div>
<div class="attr-url">
<div data-text="Hello World"></div>
</div>
</body>
</html>