Skip to content
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

add tests for and fix #613, test toDOMElement() via mocked elements #621

Merged
merged 2 commits into from
Oct 19, 2023
Merged

add tests for and fix #613, test toDOMElement() via mocked elements #621

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6ee5269
add tests for and fix #613, test toDOMElement() via mocked elements
Connum Oct 19, 2023
95b2e84
Merge branch 'master' into fix/svg-attributes
Connum Oct 19, 2023
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
15 changes: 14 additions & 1 deletion src/path.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -611,7 +611,7 @@ Path.prototype.toSVG = function(options, pathData) {
let svg = '<path d="';
svg += pathData;
svg += '"';
if (this.fill && this.fill !== 'black') {
if (this.fill !== undefined && this.fill !== 'black') {
if (this.fill === null) {
svg += ' fill="none"';
} else {
Expand Down Expand Up @@ -642,6 +642,19 @@ Path.prototype.toDOMElement = function(options, pathData) {

newPath.setAttribute('d', temporaryPath);

if (this.fill !== undefined && this.fill !== 'black') {
if (this.fill === null) {
newPath.setAttribute('fill', 'none');
} else {
newPath.setAttribute('fill', this.fill);
}
}

if (this.stroke) {
newPath.setAttribute('stroke', this.stroke);
newPath.setAttribute('stroke-width', this.strokeWidth);
}

return newPath;
};

Expand Down
116 changes: 88 additions & 28 deletions test/path.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,54 @@ import assert from 'assert';
import { Path } from '../src/opentype';

describe('path.js', function() {
const testPath1 = new Path();
testPath1.moveTo(1, 2);
testPath1.lineTo(3, 4);
testPath1.curveTo(5, 6, 7, 8, 9, 10);
testPath1.quadTo(11, 12, 13, 14, 15, 16);
testPath1.close();

const testPath2 = new Path(); // two squares
testPath2.moveTo(0, 50);
testPath2.lineTo(0, 250);
testPath2.lineTo(50, 250);
testPath2.lineTo(100, 250);
testPath2.lineTo(150, 250);
testPath2.lineTo(200, 250);
testPath2.lineTo(200, 50);
testPath2.lineTo(0, 50);
testPath2.close();
testPath2.moveTo(250, 50);
testPath2.lineTo(250, 250);
testPath2.lineTo(300, 250);
testPath2.lineTo(350, 250);
testPath2.lineTo(400, 250);
testPath2.lineTo(450, 250);
testPath2.lineTo(450, 50);
testPath2.lineTo(250, 50);
testPath2.close();
let emptyPath;
let testPath1;
let testPath2;

global.document = {
createElementNS: function (namespace, tagName) {
return {
tagName,
getAttribute: function (name) {
return this[name] ? this[name].toString() : undefined;
},
setAttribute: function (name, value) {
this[name] = value;
}
};
}
};

beforeEach(function() {
emptyPath = new Path();

testPath1 = new Path();
testPath1.moveTo(1, 2);
testPath1.lineTo(3, 4);
testPath1.curveTo(5, 6, 7, 8, 9, 10);
testPath1.quadTo(11, 12, 13, 14, 15, 16);
testPath1.close();

testPath2 = new Path(); // two squares
testPath2.moveTo(0, 50);
testPath2.lineTo(0, 250);
testPath2.lineTo(50, 250);
testPath2.lineTo(100, 250);
testPath2.lineTo(150, 250);
testPath2.lineTo(200, 250);
testPath2.lineTo(200, 50);
testPath2.lineTo(0, 50);
testPath2.close();
testPath2.moveTo(250, 50);
testPath2.lineTo(250, 250);
testPath2.lineTo(300, 250);
testPath2.lineTo(350, 250);
testPath2.lineTo(400, 250);
testPath2.lineTo(450, 250);
testPath2.lineTo(450, 50);
testPath2.lineTo(250, 50);
testPath2.close();
});

it('should set path commands correctly', function() {
const expectedCommands = [
Expand Down Expand Up @@ -76,9 +98,10 @@ describe('path.js', function() {
'M199 97 L 199 97 L 313 97 L 313 97 Q 396 97 444 61 L 444 61 L 444 61 Q 493 25 493 -36 L 493 -36 L 493 -36' +
'Q 493 -108 428 -151 L 428 -151 L 428 -151 Q 363 -195 255 -195 L 255 -195 L 255 -195 Q 150 -195 90 -156 Z'
);
const expectedResult = '<path d="M199 97L313 97Q396 97 444 61Q493 25 493-36Q493-108 428-151Q363-195 255-195Q150-195 90-156Z"/>';
const expectedPath = 'M199 97L313 97Q396 97 444 61Q493 25 493-36Q493-108 428-151Q363-195 255-195Q150-195 90-156Z';
const expectedResult = '<path d="' + expectedPath + '"/>';
assert.equal(path.toSVG({optimize: true}), expectedResult);
// we can't test toDOMElement() in node context!
assert.equal(path.toDOMElement({optimize: true}).getAttribute('d'), expectedPath);
});

it('should calculate flipY from bounding box if set to true', function() {
Expand All @@ -97,4 +120,41 @@ describe('path.js', function() {
const path = Path.fromSVG(inputPath, { x: 1, y: 2, scale: 2.5 });
assert.equal(path.toPathData(), expectedPath);
});

it('should apply fill and stroke for toSVG()', function() {
assert.equal(emptyPath.toSVG(), '<path d=""/>');
emptyPath.fill = '#ffaa00';
assert.equal(emptyPath.toSVG(), '<path d="" fill="#ffaa00"/>');
emptyPath.stroke = '#0000ff';
assert.equal(emptyPath.toSVG(), '<path d="" fill="#ffaa00" stroke="#0000ff" stroke-width="1"/>');
emptyPath.strokeWidth = 2;
assert.equal(emptyPath.toSVG(), '<path d="" fill="#ffaa00" stroke="#0000ff" stroke-width="2"/>');
emptyPath.fill = null;
assert.equal(emptyPath.toSVG(), '<path d="" fill="none" stroke="#0000ff" stroke-width="2"/>');
emptyPath.fill = 'black';
assert.equal(emptyPath.toSVG(), '<path d="" stroke="#0000ff" stroke-width="2"/>');
});

it('should apply fill and stroke for toDOMElement()', function() {
// in browser context these wouldn't be undefined, but we're only mocking it
assert.equal(emptyPath.toDOMElement().getAttribute('fill'), undefined);
assert.equal(emptyPath.toDOMElement().getAttribute('stroke'), undefined);
assert.equal(emptyPath.toDOMElement().getAttribute('stroke-width'), undefined);

emptyPath.fill = '#ffaa00';
assert.equal(emptyPath.toDOMElement().getAttribute('fill'), '#ffaa00');
emptyPath.stroke = '#0000ff';
assert.equal(emptyPath.toDOMElement().getAttribute('stroke'), '#0000ff');
assert.equal(emptyPath.toDOMElement().getAttribute('stroke-width'), '1');
emptyPath.strokeWidth = 2;
assert.equal(emptyPath.toDOMElement().getAttribute('stroke-width'), '2');
emptyPath.fill = null;
assert.equal(emptyPath.toDOMElement().getAttribute('fill'), 'none');
emptyPath.fill = 'black';
assert.equal(emptyPath.toDOMElement().getAttribute('fill'), undefined);
});

after(() => {
delete global.document;
});
});
Loading