zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-05-23 11:16:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

test case for css support

Browse Source
This commit is contained in:
Tuomas Jaakola
2019-10-21 10:57:20 +03:00
parent c899670c44
commit 8ebd84f792
4 changed files with 370 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__tests__/__snapshots__/css.test.tsx.snap
+311
View File
@@ -0,0 +1,311 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`supports CSS in style element 1`] = `
<RNSVGSvgView
align="xMidYMid"
bbHeight="100%"
bbWidth="100%"
focusable={false}
height="100%"
meetOrSlice={0}
minX={0}
minY={0}
style={
Array [
Object {
"backgroundColor": "transparent",
"borderWidth": 0,
},
undefined,
Object {
"opacity": 1,
},
Object {
"flex": 0,
"height": "100%",
"width": "100%",
},
]
}
vbHeight={500}
vbWidth={1000}
version={1.1}
width="100%"
xml="<?xml version=\\"1.0\\" standalone=\\"no\\"?>
<!DOCTYPE svg PUBLIC \\"-//W3C//DTD SVG 1.1//EN\\"
\\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\\">
<svg xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\"
width=\\"100%\\" height=\\"100%\\" viewBox=\\"0 0 1000 500\\">
<defs>
<style type=\\"text/css\\">
/* tag selector */
rect {
stroke: blue;
fill: yellow
}
/* class selector */
.redbox { fill: red; }
/* multiple selectors */
g .class-1, g .class-2 {
stroke-width: 16
}
/* two classes */
.class-2.transparent {
fill-opacity: 0.3;
}
/* Commented out
rect {
fill: black;
}
*/
</style>
</defs>
<g>
<rect class=\\"redbox class-1\\" x=\\"100\\" y=\\"0\\" width=\\"1000\\" height=\\"200\\" />
</g>
<g>
<rect class=\\"redbox class-2 transparent\\" x=\\"100\\" y=\\"350\\" width=\\"750\\" height=\\"200\\" />
</g>
</svg>"
xmlns="http://www.w3.org/2000/svg"
>
<RNSVGGroup
fill={
Array [
0,
4278190080,
]
}
fillOpacity={1}
fillRule={1}
font={Object {}}
matrix={
Array [
1,
0,
0,
1,
0,
0,
]
}
opacity={1}
originX={0}
originY={0}
propList={Array []}
rotation={0}
scaleX={1}
scaleY={1}
skewX={0}
skewY={0}
stroke={null}
strokeDasharray={null}
strokeDashoffset={null}
strokeLinecap={0}
strokeLinejoin={0}
strokeMiterlimit={4}
strokeOpacity={1}
strokeWidth={1}
vectorEffect={0}
x={0}
y={0}
>
<RNSVGDefs />
<RNSVGGroup
fill={
Array [
0,
4278190080,
]
}
fillOpacity={1}
fillRule={1}
font={Object {}}
matrix={
Array [
1,
0,
0,
1,
0,
0,
]
}
opacity={1}
originX={0}
originY={0}
propList={Array []}
rotation={0}
scaleX={1}
scaleY={1}
skewX={0}
skewY={0}
stroke={null}
strokeDasharray={null}
strokeDashoffset={null}
strokeLinecap={0}
strokeLinejoin={0}
strokeMiterlimit={4}
strokeOpacity={1}
strokeWidth={1}
vectorEffect={0}
x={0}
y={0}
>
<RNSVGRect
fill={
Array [
0,
4294901760,
]
}
fillOpacity={1}
fillRule={1}
height={200}
matrix={
Array [
1,
0,
0,
1,
0,
0,
]
}
opacity={1}
originX={0}
originY={0}
propList={
Array [
"fill",
"stroke",
"strokeWidth",
]
}
rotation={0}
scaleX={1}
scaleY={1}
skewX={0}
skewY={0}
stroke={
Array [
0,
4278190335,
]
}
strokeDasharray={null}
strokeDashoffset={null}
strokeLinecap={0}
strokeLinejoin={0}
strokeMiterlimit={4}
strokeOpacity={1}
strokeWidth="16"
vectorEffect={0}
width={1000}
x={100}
y={0}
/>
</RNSVGGroup>
<RNSVGGroup
fill={
Array [
0,
4278190080,
]
}
fillOpacity={1}
fillRule={1}
font={Object {}}
matrix={
Array [
1,
0,
0,
1,
0,
0,
]
}
opacity={1}
originX={0}
originY={0}
propList={Array []}
rotation={0}
scaleX={1}
scaleY={1}
skewX={0}
skewY={0}
stroke={null}
strokeDasharray={null}
strokeDashoffset={null}
strokeLinecap={0}
strokeLinejoin={0}
strokeMiterlimit={4}
strokeOpacity={1}
strokeWidth={1}
vectorEffect={0}
x={0}
y={0}
>
<RNSVGRect
fill={
Array [
0,
4294901760,
]
}
fillOpacity={0.3}
fillRule={1}
height={200}
matrix={
Array [
1,
0,
0,
1,
0,
0,
]
}
opacity={1}
originX={0}
originY={0}
propList={
Array [
"fill",
"fillOpacity",
"stroke",
"strokeWidth",
]
}
rotation={0}
scaleX={1}
scaleY={1}
skewX={0}
skewY={0}
stroke={
Array [
0,
4278190335,
]
}
strokeDasharray={null}
strokeDashoffset={null}
strokeLinecap={0}
strokeLinejoin={0}
strokeMiterlimit={4}
strokeOpacity={1}
strokeWidth="16"
vectorEffect={0}
width={750}
x={100}
y={350}
/>
</RNSVGGroup>
</RNSVGGroup>
</RNSVGSvgView>
`;
__tests__/css.test.tsx
+49
View File
@@ -0,0 +1,49 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { SvgCss, SvgCssUri, inlineStyles } from '../src/css';
test('supports CSS in style element', () => {
const xml = `<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100%" height="100%" viewBox="0 0 1000 500">
<defs>
<style type="text/css">
/* tag selector */
rect {
stroke: blue;
fill: yellow
}
/* class selector */
.redbox { fill: red; }
/* multiple selectors */
g .class-1, g .class-2 {
stroke-width: 16
}
/* two classes */
.class-2.transparent {
fill-opacity: 0.3;
}
/* Commented out
rect {
fill: black;
}
*/
</style>
</defs>
<g>
<rect class="redbox class-1" x="100" y="0" width="1000" height="200" />
</g>
<g>
<rect class="redbox class-2 transparent" x="100" y="350" width="750" height="200" />
</g>
</svg>`;
const tree = renderer.create(<SvgCss xml={xml} />).toJSON();
expect(tree).toMatchSnapshot();
});
babel.config.js
+3
View File
@@ -0,0 +1,3 @@
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
package.json
+7 -1
View File
@@ -40,7 +40,7 @@
"format": "prettier README.md './src/**/*.{ts,tsx}' src/index.d.ts --write",
"peg": "pegjs -o src/lib/extract/transform.js ./src/lib/extract/transform.peg",
"tsc": "tsc --noEmit",
"test": "npm run lint && npm run tsc && npm run flow",
"test": "npm run lint && npm run tsc && npm run flow && jest",
"prepare": "npm run flowgen && npm run bob",
"semantic-release": "semantic-release"
},
@@ -63,6 +63,7 @@
"@types/react": "^16.9.5",
"@types/react-native": "^0.60.19",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"eslint-plugin-flowtype": "^4.3.0",
"eslint-plugin-prettier": "^3.1.1",
@@ -70,14 +71,19 @@
"flow-bin": "^0.109.0",
"flow-typed": "^2.6.1",
"flowgen": "^1.10.0",
"jest": "^24.9.0",
"pegjs": "^0.10.0",
"prettier": "^1.18.2",
"react": "^16.10.2",
"react-native": "^0.61.2",
"react-test-renderer": "^16.10.2",
"semantic-release": "^15.13.24",
"semantic-release-cli": "^5.2.1",
"typescript": "^3.6.3"
},
"jest": {
"preset": "react-native"
},
"release": {
"plugins": [
"@semantic-release/commit-analyzer",