Skip to content

Build svg text #1783

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jun 13, 2017
Merged

Build svg text #1783

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cbbb2d6
buildSVGText: convert pseudo-html directly to elements instead of to …
alexcjohnson Jun 12, 2017
e905b5d
remove *all* text conversion testers
alexcjohnson Jun 13, 2017
cb8c331
test close/reopen multiple unclosed tags at breaks
alexcjohnson Jun 13, 2017
5ceec1d
precalculate a few more regexps in svg_text_utils
alexcjohnson Jun 13, 2017
3113795
regexp match -> test where we only care about truthiness
alexcjohnson Jun 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 35 additions & 11 deletions test/jasmine/tests/svg_text_utils_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,24 +265,24 @@ describe('svg+text utils', function() {
it('supports superscript by itself', function() {
var node = mockTextSVGElement('<sup>123</sup>');
expect(node.html()).toBe(
'​<tspan style="font-size:70%" dy="-0.6em">123</tspan>' +
'<tspan dy="0.42em">​</tspan>');
'\u200b<tspan style="font-size:70%" dy="-0.6em">123</tspan>' +
'<tspan dy="0.42em">\u200b</tspan>');
});

it('supports subscript by itself', function() {
var node = mockTextSVGElement('<sub>123</sub>');
expect(node.html()).toBe(
'​<tspan style="font-size:70%" dy="0.3em">123</tspan>' +
'<tspan dy="-0.21em">​</tspan>');
'\u200b<tspan style="font-size:70%" dy="0.3em">123</tspan>' +
'<tspan dy="-0.21em">\u200b</tspan>');
});

it('supports superscript and subscript together with normal text', function() {
var node = mockTextSVGElement('SO<sub>4</sub><sup>2-</sup>');
expect(node.html()).toBe(
'SO​<tspan style="font-size:70%" dy="0.3em">4</tspan>' +
'<tspan dy="-0.21em">​</tspan>​' +
'SO\u200b<tspan style="font-size:70%" dy="0.3em">4</tspan>' +
'<tspan dy="-0.21em">\u200b</tspan>\u200b' +
'<tspan style="font-size:70%" dy="-0.6em">2-</tspan>' +
'<tspan dy="0.42em">​</tspan>');
'<tspan dy="0.42em">\u200b</tspan>');
});

it('allows one <b> to span <br>s', function() {
Expand All @@ -300,12 +300,36 @@ describe('svg+text utils', function() {
it('allows one <sub> to span <br>s', function() {
var node = mockTextSVGElement('SO<sub>4<br>44</sub>');
expect(node.html()).toBe(
'<tspan class="line" dy="0em">SO​' +
'<tspan class="line" dy="0em">SO\u200b' +
'<tspan style="font-size:70%" dy="0.3em">4</tspan>' +
'<tspan dy="-0.21em">​</tspan></tspan>' +
'<tspan class="line" dy="1.3em">​' +
'<tspan dy="-0.21em">\u200b</tspan></tspan>' +
'<tspan class="line" dy="1.3em">\u200b' +
'<tspan style="font-size:70%" dy="0.3em">44</tspan>' +
'<tspan dy="-0.21em">​</tspan></tspan>');
'<tspan dy="-0.21em">\u200b</tspan></tspan>');
});

it('allows nested tags to break at <br>, eventually closed or not', function() {
var textCases = [
'<b><i><sup>many<br>lines<br>modified',
'<b><i><sup>many<br>lines<br>modified</sup></i></b>',
'<b><i><sup>many</sup><br><sup>lines</sup></i><br><i><sup>modified',
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This behavior is supported by regular HTML - and can be really useful to decouple styling from line breaks.

We tried weakly to support this previously but only allowed closing and reopening a single tag. The new version made it easy to handle arbitrary nesting.

];

textCases.forEach(function(textCase) {
var node = mockTextSVGElement(textCase);
function opener(dy) {
return '<tspan class="line" dy="' + dy + 'em">' +
'<tspan style="font-weight:bold">' +
'<tspan style="font-style:italic">' +
'\u200b<tspan style="font-size:70%" dy="-0.6em">';
}
var closer = '</tspan><tspan dy="0.42em">\u200b</tspan>' +
'</tspan></tspan></tspan>';
expect(node.html()).toBe(
opener(0) + 'many' + closer +
opener(1.3) + 'lines' + closer +
opener(2.6) + 'modified' + closer, textCase);
});
});
});
});