fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
817 lines (685 loc) • 30.9 kB
text/typescript
import { describe, it, expect } from 'vitest';
import type { Gradient } from '../gradient';
import { loadSVGFromString, getFabricDocument, Path } from '../../fabric';
import { Rect } from '../shapes/Rect';
import { cos, sin } from '../util';
import { parseAttributes } from './parseAttributes';
import { parseStyleAttribute } from './parseStyleAttribute';
import { parseFontDeclaration } from './parseFontDeclaration';
import { parsePointsAttribute } from './parsePointsAttribute';
import { parseTransformAttribute } from './parseTransformAttribute';
import { getCSSRules } from './getCSSRules';
function makeElement() {
const element = getFabricDocument().createElementNS(
'http://www.w3.org/2000/svg',
'path',
);
const attributes = {
cx: 101,
x: 102,
cy: 103,
y: 104,
r: 105,
opacity: 0.45,
'fill-rule': 'foo',
'stroke-width': 4,
};
for (const [key, value] of Object.entries(attributes)) {
element.setAttribute(key, String(value));
}
return element;
}
describe('fabric.Parser', () => {
it('parseAttributes', () => {
expect(parseAttributes).toBeDefined();
const element = makeElement();
const attributeNames =
'cx cy x y r opacity fill-rule stroke-width transform fill fill-rule'.split(
' ',
);
const parsedAttributes = parseAttributes(element, attributeNames);
expect(parsedAttributes).toEqual({
left: 102,
top: 104,
radius: 105,
opacity: 0.45,
fillRule: 'foo',
strokeWidth: 4,
});
});
it('parseAttributesNoneValues', () => {
const namespace = 'http://www.w3.org/2000/svg';
const element = getFabricDocument().createElementNS(namespace, 'path');
element.setAttributeNS(namespace, 'fill', 'none');
element.setAttributeNS(namespace, 'stroke', 'none');
expect(parseAttributes(element, 'fill stroke'.split(' '))).toEqual({
fill: '',
stroke: '',
});
});
it('parseAttributesFillRule', () => {
const namespace = 'http://www.w3.org/2000/svg';
const element = getFabricDocument().createElementNS(namespace, 'path');
element.setAttributeNS(namespace, 'fill-rule', 'evenodd');
expect(parseAttributes(element, ['fill-rule'])).toEqual({
fillRule: 'evenodd',
});
});
it('parseAttributesFillRuleWithoutTransformation', () => {
const namespace = 'http://www.w3.org/2000/svg';
const element = getFabricDocument().createElementNS(namespace, 'path');
element.setAttributeNS(namespace, 'fill-rule', 'inherit');
expect(parseAttributes(element, ['fill-rule'])).toEqual({
fillRule: 'inherit',
});
});
it('parseAttributesTransform', () => {
const namespace = 'http://www.w3.org/2000/svg';
const element = getFabricDocument().createElementNS(namespace, 'path');
element.setAttributeNS(namespace, 'transform', 'translate(5, 10)');
expect(parseAttributes(element, ['transform'])).toEqual({
transformMatrix: [1, 0, 0, 1, 5, 10],
});
});
it('parseAttributesWithParent', () => {
const namespace = 'http://www.w3.org/2000/svg';
const element = getFabricDocument().createElementNS(namespace, 'path');
const parent = getFabricDocument().createElementNS(namespace, 'g');
const grandParent = getFabricDocument().createElementNS(namespace, 'g');
parent.appendChild(element);
grandParent.appendChild(parent);
element.setAttributeNS(namespace, 'x', '100');
parent.setAttributeNS(namespace, 'y', '200');
grandParent.setAttributeNS(namespace, 'fill', 'red');
expect(parseAttributes(element, 'x y fill'.split(' '))).toEqual({
fill: 'red',
left: 100,
top: 200,
});
});
it('parseAttributesWithGrandParentSvg', () => {
const namespace = 'http://www.w3.org/2000/svg';
const element = getFabricDocument().createElementNS(namespace, 'path');
const parent = getFabricDocument().createElementNS(namespace, 'g');
const grandParent = getFabricDocument().createElementNS(namespace, 'svg');
parent.appendChild(element);
grandParent.appendChild(parent);
element.setAttributeNS(namespace, 'x', '100');
parent.setAttributeNS(namespace, 'y', '200');
grandParent.setAttributeNS(namespace, 'width', '600');
grandParent.setAttributeNS(namespace, 'height', '600');
expect(parseAttributes(element, 'x y width height'.split(' '))).toEqual({
left: 100,
top: 200,
width: 600,
height: 600,
});
});
it('parseAttributeFontValueStartWithFontSize', () => {
const element = getFabricDocument().createElementNS(
'http://www.w3.org/2000/svg',
'path',
);
element.setAttribute('style', 'font: 15px arial, sans-serif;');
const styleObj = parseAttributes(element, ['font']);
const expectedObject = {
font: '15px arial, sans-serif',
fontSize: 15,
fontFamily: 'arial, sans-serif',
};
expect(styleObj).toEqual(expectedObject);
});
it('parseStyleAttribute', () => {
const element = getFabricDocument().createElementNS(
'http://www.w3.org/2000/svg',
'path',
);
element.setAttribute(
'style',
'left:10px;top:22.3em;width:103.45pt;height:20%;',
);
const styleObj = parseStyleAttribute(element);
// TODO: looks like this still fails with % values
const expectedObject = {
left: '10px',
top: '22.3em',
width: '103.45pt',
height: '20%',
};
expect(styleObj).toEqual(expectedObject);
});
it('parseStyleAttribute with one pair', () => {
const element = getFabricDocument().createElementNS(
'http://www.w3.org/2000/svg',
'path',
);
element.setAttribute('style', 'left:10px');
const expectedObject = {
left: '10px',
};
expect(parseStyleAttribute(element)).toEqual(expectedObject);
});
it('parseStyleAttribute with trailing spaces', () => {
const element = getFabricDocument().createElementNS(
'http://www.w3.org/2000/svg',
'path',
);
element.setAttribute('style', 'left:10px; top:5px; ');
const expectedObject = {
left: '10px',
top: '5px',
};
expect(parseStyleAttribute(element)).toEqual(expectedObject);
});
it('parseStyleAttribute with value normalization', () => {
const element = getFabricDocument().createElementNS(
'http://www.w3.org/2000/svg',
'path',
);
element.setAttribute('style', 'fill:none; stroke-dasharray: 2 0.4;');
const expectedObject = {
fill: 'none',
'stroke-dasharray': '2 0.4',
};
expect(parseStyleAttribute(element)).toEqual(expectedObject);
});
it('parseStyleAttribute with short font declaration', () => {
const element = getFabricDocument().createElementNS(
'http://www.w3.org/2000/svg',
'path',
);
element.setAttribute(
'style',
'font: italic 12px Arial,Helvetica,sans-serif',
);
const styleObj = parseStyleAttribute(element);
if (styleObj.font) {
parseFontDeclaration(styleObj.font, styleObj);
}
const expectedObject = {
font: 'italic 12px Arial,Helvetica,sans-serif',
fontSize: 12,
fontStyle: 'italic',
fontFamily: 'Arial,Helvetica,sans-serif',
};
expect(styleObj).toEqual(expectedObject);
//testing different unit
element.setAttribute(
'style',
'font: italic 1.5em Arial,Helvetica,sans-serif',
);
const styleObj2 = parseStyleAttribute(element);
if (styleObj2.font) {
parseFontDeclaration(styleObj2.font, styleObj2);
}
const expectedObject2 = {
font: 'italic 1.5em Arial,Helvetica,sans-serif',
fontSize: 24,
fontStyle: 'italic',
fontFamily: 'Arial,Helvetica,sans-serif',
};
expect(styleObj2).toEqual(expectedObject2);
});
it('parseAttributes (style to have higher priority than attribute)', () => {
const namespace = 'http://www.w3.org/2000/svg';
const element = getFabricDocument().createElementNS(namespace, 'path');
element.setAttribute('style', 'fill:red');
element.setAttributeNS(namespace, 'fill', 'green');
const expectedObject = {
fill: 'red',
};
expect(parseAttributes(element, Path.ATTRIBUTE_NAMES)).toEqual(
expectedObject,
);
});
it('parseAttributes stroke-opacity and fill-opacity', () => {
const namespace = 'http://www.w3.org/2000/svg';
const element = getFabricDocument().createElementNS(namespace, 'path');
element.setAttributeNS(
namespace,
'style',
'fill:rgb(100,200,50);fill-opacity:0.2;',
);
element.setAttributeNS(namespace, 'stroke', 'green');
element.setAttributeNS(namespace, 'stroke-opacity', '0.5');
element.setAttributeNS(namespace, 'fill', 'green');
const expectedObject = {
fill: 'rgba(100,200,50,0.2)',
stroke: 'rgba(0,128,0,0.5)',
fillOpacity: 0.2,
strokeOpacity: 0.5,
};
expect(parseAttributes(element, Path.ATTRIBUTE_NAMES)).toEqual(
expectedObject,
);
});
it('parse 0 attribute', () => {
const namespace = 'http://www.w3.org/2000/svg';
const element = getFabricDocument().createElementNS(namespace, 'path');
element.setAttributeNS(namespace, 'opacity', String(0));
const expectedObject = {
opacity: 0,
};
expect(parseAttributes(element, Path.ATTRIBUTE_NAMES)).toEqual(
expectedObject,
);
});
it('parsePointsAttribute', () => {
const namespace = 'http://www.w3.org/2000/svg';
const element = getFabricDocument().createElementNS(namespace, 'polygon');
element.setAttributeNS(
namespace,
'points',
'10, 12 20 ,22, -0.52,0.001 2.3e2,2.3E-2, 10,-1 ',
);
const actualPoints = parsePointsAttribute(element.getAttribute('points'));
expect(actualPoints[0].x).toBe(10);
expect(actualPoints[0].y).toBe(12);
expect(actualPoints[1].x).toBe(20);
expect(actualPoints[1].y).toBe(22);
expect(actualPoints[2].x).toBe(-0.52);
expect(actualPoints[2].y).toBe(0.001);
expect(actualPoints[3].x).toBe(2.3e2);
expect(actualPoints[3].y).toBe(2.3e-2);
expect(actualPoints[4].x).toBe(10);
expect(actualPoints[4].y).toBe(-1);
});
it('parseTransformAttribute', () => {
let parsedValue;
const namespace = 'http://www.w3.org/2000/svg';
const element = getFabricDocument().createElementNS(namespace, 'path');
//'translate(-10,-20) scale(2) rotate(45) translate(5,10)'
element.setAttributeNS(namespace, 'transform', 'translate(5,10)');
parsedValue = parseTransformAttribute(element.getAttribute('transform')!);
expect(parsedValue).toEqual([1, 0, 0, 1, 5, 10]);
element.setAttributeNS(namespace, 'transform', 'translate(-10,-20)');
parsedValue = parseTransformAttribute(element.getAttribute('transform')!);
expect(parsedValue).toEqual([1, 0, 0, 1, -10, -20]);
const ANGLE_DEG = 90;
const ANGLE = (ANGLE_DEG * Math.PI) / 180;
element.setAttributeNS(namespace, 'transform', 'rotate(' + ANGLE_DEG + ')');
parsedValue = parseTransformAttribute(element.getAttribute('transform')!);
expect(parsedValue).toEqual([
cos(ANGLE),
sin(ANGLE),
-sin(ANGLE),
cos(ANGLE),
0,
0,
]);
element.setAttributeNS(namespace, 'transform', 'scale(3.5)');
parsedValue = parseTransformAttribute(element.getAttribute('transform')!);
expect(parsedValue).toEqual([3.5, 0, 0, 3.5, 0, 0]);
element.setAttributeNS(namespace, 'transform', 'scale(2 13)');
parsedValue = parseTransformAttribute(element.getAttribute('transform')!);
expect(parsedValue).toEqual([2, 0, 0, 13, 0, 0]);
element.setAttributeNS(namespace, 'transform', 'skewX(2)');
parsedValue = parseTransformAttribute(element.getAttribute('transform')!);
expect(parsedValue).toEqual([1, 0, 0.03492076949174773, 1, 0, 0]);
element.setAttributeNS(namespace, 'transform', 'skewY(234.111)');
parsedValue = parseTransformAttribute(element.getAttribute('transform')!);
expect(parsedValue).toEqual([1, 1.3820043381762832, 0, 1, 0, 0]);
element.setAttributeNS(
namespace,
'transform',
'matrix(1,2,3.3,-4,5E1,6e-1)',
);
parsedValue = parseTransformAttribute(element.getAttribute('transform')!);
expect(parsedValue).toEqual([1, 2, 3.3, -4, 50, 0.6]);
element.setAttributeNS(
namespace,
'transform',
'translate(21,31) translate(11,22)',
);
parsedValue = parseTransformAttribute(element.getAttribute('transform')!);
expect(parsedValue).toEqual([1, 0, 0, 1, 32, 53]);
element.setAttributeNS(
namespace,
'transform',
'scale(2 13) translate(5,15) skewX(11.22)',
);
parsedValue = parseTransformAttribute(element.getAttribute('transform')!);
expect(parsedValue).toEqual([2, 0, 0.3967362169237356, 13, 10, 195]);
});
it('parseNestedTransformAttribute', () => {
const namespace = 'http://www.w3.org/2000/svg';
const element = getFabricDocument().createElementNS(namespace, 'path');
const parent = getFabricDocument().createElementNS(namespace, 'g');
parent.appendChild(element);
parent.setAttributeNS(namespace, 'transform', 'translate(50)');
element.setAttributeNS(namespace, 'transform', 'translate(10 10)');
const parsedAttributes = parseAttributes(element, ['transform']);
expect(parsedAttributes.transformMatrix).toEqual([1, 0, 0, 1, 60, 10]);
});
it('parseSVGFromString id polyfill', async () => {
const string =
'<?xml version="1.0" standalone="no"?><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
'<defs><rect id="myrect" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></defs>' +
'<use xlink:href="#myrect" x="50" y="50" ></use>' +
'</svg>';
expect(loadSVGFromString).toBeDefined();
const { objects } = await loadSVGFromString(string);
const rect = objects[0];
expect(rect!.constructor).toHaveProperty('type', 'Rect');
});
it('parseSVGFromString with gradient and fill url with quotes', async () => {
const string =
'<?xml version="1.0" encoding="utf-8"?>' +
'<svg viewBox="0 0 1400 980" xmlns="http://www.w3.org/2000/svg" width="1400px" height="980px" version="1.1" >' +
'<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="702.4817" y1="66.4817" x2="825.5183" y2="189.5183">' +
'<stop offset="0" style="stop-color:#FBB03B"/>' +
'<stop offset="0.2209" style="stop-color:#FBAC3A"/>' +
'<stop offset="0.4348" style="stop-color:#F9A037"/>' +
'<stop offset="0.6458" style="stop-color:#F78D32"/>' +
'<stop offset="0.8538" style="stop-color:#F4722A"/>' +
'<stop offset="1" style="stop-color:#F15A24"/>' +
'</linearGradient>' +
'<path d="M 851 128 A 87 87 0 0 1 764 215 A 87 87 0 0 1 677 128 A 87 87 0 0 1 764 41 A 87 87 0 0 1 851 128 Z" class="st13" style="fill: url(\'#SVGID_11_\');"/>' +
'<path d="M 851 128 A 87 87 0 0 1 764 215 A 87 87 0 0 1 677 128 A 87 87 0 0 1 764 41 A 87 87 0 0 1 851 128 Z" class="st13" style="fill: url(#SVGID_11_);"/>' +
'<path d="M 851 128 A 87 87 0 0 1 764 215 A 87 87 0 0 1 677 128 A 87 87 0 0 1 764 41 A 87 87 0 0 1 851 128 Z" class="st13" style=\'fill: url("#SVGID_11_");\'/>' +
'</svg>';
const { objects } = await loadSVGFromString(string);
expect(objects[0]!.fill).toHaveProperty('type', 'linear');
expect(objects[1]!.fill).toHaveProperty('type', 'linear');
expect(objects[2]!.fill).toHaveProperty('type', 'linear');
});
it('parseSVGFromString with xlink:href', async () => {
const string =
'<?xml version="1.0" standalone="no"?><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
'<defs><rect id="myrect" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></defs>' +
'<use xlink:href="#myrect" x="50" y="50" ></use>' +
'</svg>';
expect(loadSVGFromString).toBeDefined();
const { objects } = await loadSVGFromString(string);
const rect = objects[0];
expect(rect!.constructor).toHaveProperty('type', 'Rect');
});
it('parseSVGFromString with href', async () => {
const string =
'<?xml version="1.0" standalone="no"?><svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
'<defs><rect id="myrect" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></defs>' +
'<use href="#myrect" x="50" y="50" ></use>' +
'</svg>';
expect(loadSVGFromString).toBeDefined();
const { objects } = await loadSVGFromString(string);
const rect = objects[0]!;
expect(rect.constructor).toHaveProperty('type', 'Rect');
});
it('parseSVGFromString nested opacity', async () => {
const string =
'<?xml version="1.0" encoding="UTF-8"?>' +
'<svg version="1.2" baseProfile="tiny" xml:id="svg-root" width="300" height="400" ' +
'viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg" ' +
'xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xe="http://www.w3.org/2001/xml-events">' +
'<defs>' +
'<style>' +
'.cls-3{opacity:0.5;}' +
'.cls-4{opacity:0.5;}' +
'</style>' +
'</defs>' +
'<g fill="red" stroke="#000000" fill-opacity="0.5">' +
'<circle cx="50" cy="50" r="50" fill-opacity="1" fill="rgba(255,0,0,0.3)" />' +
'<circle cx="150" cy="50" r="50" fill="rgba(0,255,0,0.5)" />' +
'<circle cx="50" cy="150" r="50" />' +
'<circle cx="150" cy="150" r="50" fill-opacity="0.5" fill="rgb(0,0,255)" />' +
'<circle cx="250" cy="50" r="50" fill-opacity="0.5" fill="rgba(0,0,255,0.5)" />' +
'<circle cx="250" cy="150" r="50" fill-opacity="1" fill="rgb(0,0,255)" />' +
'</g>' +
'<g class="cls-3" transform="translate(0,200)">' +
'<circle cx="50" cy="50" r="50" class="cls-4" fill="red" />' +
'<circle cx="150" cy="50" r="50" fill="red" />' +
'</g>' +
'</svg>';
const { objects } = await loadSVGFromString(string);
expect(objects[0]).toHaveProperty('fill', 'rgba(255,0,0,0.3)');
expect(objects[0]).toHaveProperty('fillOpacity', 1);
expect(objects[1]).toHaveProperty('fill', 'rgba(0,255,0,0.25)');
expect(objects[1]).toHaveProperty('fillOpacity', 0.5);
expect(objects[2]).toHaveProperty('fill', 'rgba(255,0,0,0.5)');
expect(objects[2]).toHaveProperty('fillOpacity', 0.5);
expect(objects[3]).toHaveProperty('fill', 'rgba(0,0,255,0.5)');
expect(objects[3]).toHaveProperty('fillOpacity', 0.5);
expect(objects[4]).toHaveProperty('fill', 'rgba(0,0,255,0.25)');
expect(objects[4]).toHaveProperty('fillOpacity', 0.5);
expect(objects[5]).toHaveProperty('fill', 'rgba(0,0,255,1)');
expect(objects[5]).toHaveProperty('fillOpacity', 1);
expect(objects[6]).toHaveProperty('opacity', 0.25);
expect(objects[7]).toHaveProperty('opacity', 0.5);
});
it('parseSVGFromString path fill-opacity with gradient', async () => {
const string =
'<?xml version="1.0" encoding="UTF-8"?>' +
'<svg version="1.2" baseProfile="tiny" xml:id="svg-root" width="300" height="400" ' +
'viewBox="0 0 300 400" xmlns="http://www.w3.org/2000/svg" ' +
'xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xe="http://www.w3.org/2001/xml-events">' +
'<linearGradient id="red-to-red">' +
'<stop offset="0%" stop-color="#00ff00" stop-opacity="0.5"/>' +
'<stop offset="100%" stop-color="#ff0000"/>' +
'</linearGradient>' +
'<path d="M 0 0 l 100 0 l 0 100 l -100 0 z" fill="url(#red-to-red)" fill-opacity="0.5"/>' +
'</svg>';
const { objects } = await loadSVGFromString(string);
expect((objects[0]!.fill as Gradient<unknown>).colorStops[0].color).toBe(
'rgba(255,0,0,0.5)',
);
expect((objects[0]!.fill as Gradient<unknown>).colorStops[1].color).toBe(
'rgba(0,255,0,0.25)',
);
});
it('parseSVGFromString with svg:namespace', async () => {
const string =
'<?xml version="1.0" standalone="no"?><svg width="100%" height="100%" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
'<svg:defs><svg:rect id="myrect" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></svg:defs>' +
'<svg:use xlink:href="#myrect" x="50" y="50" ></svg:use>' +
'</svg>';
expect(loadSVGFromString).toBeDefined();
const { objects } = await loadSVGFromString(string);
const rect = objects[0]!;
expect(rect.constructor).toHaveProperty('type', 'Rect');
});
it('opacity attribute', async () => {
const tagNames = [
'Rect',
'Path',
'Circle',
'Ellipse',
'Polygon',
'Polyline',
'Text',
] as const;
const namespace = 'http://www.w3.org/2000/svg';
const tests = tagNames.map(async (tagName) => {
const el = getFabricDocument().createElementNS(
namespace,
tagName.toLowerCase(),
);
const opacityValue = Math.random().toFixed(2);
el.setAttributeNS(namespace, 'opacity', opacityValue);
const module = await import('../../fabric');
const fabricClass = module[tagName];
// @ts-expect-error -- TODO: not all elements fromElement accept SVGElement as a type, but should it? currently it accepts only HTMLElement
const obj = await fabricClass.fromElement(el, {});
expect(obj.opacity).toBe(parseFloat(opacityValue));
});
await Promise.all(tests);
});
it('fill-opacity attribute with fill attribute', async () => {
const namespace = 'http://www.w3.org/2000/svg';
const el = getFabricDocument().createElementNS(namespace, 'rect');
const opacityValue = Math.random().toFixed(2);
el.setAttributeNS(namespace, 'fill-opacity', opacityValue);
el.setAttributeNS(namespace, 'fill', '#FF0000');
const obj = await Rect.fromElement(el);
expect(obj.fill).toBe(`rgba(255,0,0,${parseFloat(opacityValue)})`);
});
it('fill-opacity attribute without fill attribute', async () => {
const namespace = 'http://www.w3.org/2000/svg';
const el = getFabricDocument().createElementNS(namespace, 'rect');
const opacityValue = Math.random().toFixed(2);
el.setAttributeNS(namespace, 'fill-opacity', opacityValue);
const obj = await Rect.fromElement(el);
expect(obj.fill).toBe(`rgba(0,0,0,${parseFloat(opacityValue)})`);
});
it('fill-opacity attribute with fill none', async () => {
const namespace = 'http://www.w3.org/2000/svg';
const el = getFabricDocument().createElementNS(namespace, 'rect');
const opacityValue = Math.random().toFixed(2);
el.setAttributeNS(namespace, 'fill-opacity', opacityValue);
el.setAttributeNS(namespace, 'fill', 'none');
const obj = await Rect.fromElement(el);
expect(obj.fill).toBe('');
});
it('stroke-opacity attribute with stroke attribute', async () => {
const namespace = 'http://www.w3.org/2000/svg';
const el = getFabricDocument().createElementNS(namespace, 'rect');
const opacityValue = Math.random().toFixed(2);
el.setAttributeNS(namespace, 'stroke-opacity', opacityValue);
el.setAttributeNS(namespace, 'stroke', '#FF0000');
const obj = await Rect.fromElement(el);
expect(obj.stroke).toBe(`rgba(255,0,0,${parseFloat(opacityValue)})`);
});
it('stroke-opacity attribute without stroke attribute', async () => {
const namespace = 'http://www.w3.org/2000/svg';
const el = getFabricDocument().createElementNS(namespace, 'rect');
const opacityValue = Math.random().toFixed(2);
el.setAttributeNS(namespace, 'stroke-opacity', opacityValue);
const obj = await Rect.fromElement(el);
expect(obj.stroke).toBeNull();
});
it('stroke-opacity attribute with stroke none', async () => {
const namespace = 'http://www.w3.org/2000/svg';
const el = getFabricDocument().createElementNS(namespace, 'rect');
const opacityValue = Math.random().toFixed(2);
el.setAttributeNS(namespace, 'stroke-opacity', opacityValue);
el.setAttributeNS(namespace, 'stroke', 'none');
const obj = await Rect.fromElement(el);
expect(obj.stroke).toBe('');
});
it('getCssRule', () => {
const rules: Record<PropertyKey, any> = {};
// NOTE: We need to use a new fresh document here because vitest in browser mode already adds some stylesheets which pollutes the test
const doc = globalThis.document.implementation.createHTMLDocument('');
const svgUid = 'uniqueId';
const styleElement = doc.createElement('style');
styleElement.textContent =
'g polygon.cls, rect {fill:#FF0000; stroke:#000000;stroke-width:0.25px;}\
polygon.cls {fill:none;stroke:#0000FF;}';
doc.body.appendChild(styleElement);
const expectedObject = {
'g polygon.cls': {
fill: '#FF0000',
stroke: '#000000',
'stroke-width': '0.25px',
},
rect: {
fill: '#FF0000',
stroke: '#000000',
'stroke-width': '0.25px',
},
'polygon.cls': {
fill: 'none',
stroke: '#0000FF',
},
};
rules[svgUid] = getCSSRules(doc);
expect(rules[svgUid]).toEqual(expectedObject);
const namespace = 'http://www.w3.org/2000/svg';
const elPolygon = getFabricDocument().createElementNS(namespace, 'polygon');
elPolygon.setAttributeNS(namespace, 'points', '10,12 20,22');
elPolygon.setAttributeNS(namespace, 'class', 'cls');
elPolygon.setAttributeNS(namespace, 'svgUid', svgUid);
const style = parseAttributes(elPolygon, ['fill', 'stroke']);
expect(style).toEqual({});
styleElement.textContent = '\t\n';
const reparse = getCSSRules(doc);
expect(reparse).toEqual({});
});
it('getCssRule with same selectors', () => {
expect(getCSSRules).toBeDefined();
const rules: Record<PropertyKey, unknown> = {};
// NOTE: We need to use a new fresh document here because vitest in browser mode already adds some stylesheets which pollutes the test
const doc = globalThis.document.implementation.createHTMLDocument('');
const svgUid = 'uniqueId';
const styleElement = doc.createElement('style');
styleElement.textContent =
'.cls1,.cls2 { fill: #FF0000;} .cls1 { stroke: #00FF00;} .cls3,.cls1 { stroke-width: 3;}';
doc.body.appendChild(styleElement);
const expectedObject = {
'.cls1': {
fill: '#FF0000',
stroke: '#00FF00',
'stroke-width': '3',
},
'.cls2': {
fill: '#FF0000',
},
'.cls3': {
'stroke-width': '3',
},
};
rules[svgUid] = getCSSRules(doc);
expect(rules[svgUid]).toEqual(expectedObject);
});
it('parseSVGFromString with nested clippath', async () => {
const string =
'<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
'<clipPath id="b">' +
'<rect id="c" transform="matrix(-1 -4.4884e-11 4.4884e-11 -1 128 55.312)" x="44" y="4" width="40" height="47.31"/>' +
'</clipPath>' +
'<g clip-path="url(#b)">' +
'<clipPath id="i">' +
'<polygon id="j" points="50.87 3.55 45.67 12.48 44.86 23.39 47.16 24.88 48.47 21.35 69.12 11.86 78.16 18.16 80.86 24.69 83.14 22.03 82.25 3.55"/>' +
'</clipPath>' +
'<g clip-path="url(#i)">' +
'<path d="m59.09 7.55c-5.22 1.85-5.74-1.42-5.74-1.42-2.83 1.41-0.97 4.45-0.97 4.45s-2.87-0.21-4.1 2.27c-1.29 2.6-0.15 4.59-0.15 4.59s-2.76 1.75-1.68 4.95c0.72 2.12 2.87 2.97 2.87 2.97-0.26 4.57 1.18 6.79 1.18 6.79s1.79-7.85 1.62-9.05c0 0 3.3-0.66 7.05-2.8 2.53-1.45 4.26-3.15 7.11-3.79 4.33-0.98 5.3 2.16 5.3 2.16s4.01-0.77 5.22 4.8c0.5 2.29 0.71 6.12 0.98 8.45-0.02-0.2 1.49-2.72 1.75-5.28 0.1-0.95 1.54-3.26 1.97-4.99 0.94-3.75-0.29-6.7-0.88-7.58-1.07-1.61-3.61-3.83-5.52-3.51 0.1-2.04-1.51-3.94-3.45-4.59-5.29-1.8-11 1.02-12.56 1.58z" fill="none" stroke="#402720" stroke-miterlimit="10" stroke-width="2"/>' +
'</g>' +
'</g>' +
'</svg>';
const { objects } = await loadSVGFromString(string);
expect(objects[0]!.clipPath!.constructor).toHaveProperty('type', 'Polygon');
expect(objects[0]!.clipPath!.clipPath!.constructor).toHaveProperty(
'type',
'Rect',
);
});
it('parseSVGFromString with missing clippath', async () => {
const string =
'<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
'<g clip-path="url(#i)">' +
'<path d="m59.09 7.55c-5.22 1.85-5.74-1.42-5.74-1.42-2.83 1.41-0.97 4.45-0.97 4.45s-2.87-0.21-4.1 2.27c-1.29 2.6-0.15 4.59-0.15 4.59s-2.76 1.75-1.68 4.95c0.72 2.12 2.87 2.97 2.87 2.97-0.26 4.57 1.18 6.79 1.18 6.79s1.79-7.85 1.62-9.05c0 0 3.3-0.66 7.05-2.8 2.53-1.45 4.26-3.15 7.11-3.79 4.33-0.98 5.3 2.16 5.3 2.16s4.01-0.77 5.22 4.8c0.5 2.29 0.71 6.12 0.98 8.45-0.02-0.2 1.49-2.72 1.75-5.28 0.1-0.95 1.54-3.26 1.97-4.99 0.94-3.75-0.29-6.7-0.88-7.58-1.07-1.61-3.61-3.83-5.52-3.51 0.1-2.04-1.51-3.94-3.45-4.59-5.29-1.8-11 1.02-12.56 1.58z" fill="none" stroke="#402720" stroke-miterlimit="10" stroke-width="2"/>' +
'</g>' +
'</svg>';
const { objects } = await loadSVGFromString(string);
expect(objects[0]!.clipPath).toBeUndefined();
});
it('parseSVGFromString with empty <style/>', async () => {
const string =
'<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
' <style/>' +
' <rect width="10" height="10" />' +
'</svg>';
const { objects } = await loadSVGFromString(string);
expect(objects[0]!.constructor).toHaveProperty('type', 'Rect');
});
it('parseSVGFromString with empty <use/>', async () => {
const string =
'<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
'<use/>' +
'<rect width="10" height="10" />' +
'</svg>';
const { objects } = await loadSVGFromString(string);
expect(objects[0]!.constructor).toHaveProperty('type', 'Rect');
});
it('parseSVGFromString with <use/> having base64 image href', async () => {
const string =
'<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
'<defs>' +
'<image id="image" x="0" y="0" width="4346.7" height="4346.7" xlink:href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>' +
'</defs>' +
'<use xlink:href="#image"/>' +
'<rect width="10" height="10" />' +
'</svg>';
const { objects } = await loadSVGFromString(string);
expect(objects[0]!.constructor).toHaveProperty('type', 'Image');
});
});