mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-06-04 07:25:53 +00:00
test case for css support
This commit is contained in:
Tuomas Jaakola
@@ -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>
|
||||||
|
`;
|
||||||
@@ -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();
|
||||||
|
});
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: ['module:metro-react-native-babel-preset'],
|
||||||
|
};
|
||||||
+7
-1
@@ -40,7 +40,7 @@
|
|||||||
"format": "prettier README.md './src/**/*.{ts,tsx}' src/index.d.ts --write",
|
"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",
|
"peg": "pegjs -o src/lib/extract/transform.js ./src/lib/extract/transform.peg",
|
||||||
"tsc": "tsc --noEmit",
|
"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",
|
"prepare": "npm run flowgen && npm run bob",
|
||||||
"semantic-release": "semantic-release"
|
"semantic-release": "semantic-release"
|
||||||
},
|
},
|
||||||
@@ -63,6 +63,7 @@
|
|||||||
"@types/react": "^16.9.5",
|
"@types/react": "^16.9.5",
|
||||||
"@types/react-native": "^0.60.19",
|
"@types/react-native": "^0.60.19",
|
||||||
"babel-eslint": "^10.0.3",
|
"babel-eslint": "^10.0.3",
|
||||||
|
"babel-jest": "^24.9.0",
|
||||||
"eslint": "^6.5.1",
|
"eslint": "^6.5.1",
|
||||||
"eslint-plugin-flowtype": "^4.3.0",
|
"eslint-plugin-flowtype": "^4.3.0",
|
||||||
"eslint-plugin-prettier": "^3.1.1",
|
"eslint-plugin-prettier": "^3.1.1",
|
||||||
@@ -70,14 +71,19 @@
|
|||||||
"flow-bin": "^0.109.0",
|
"flow-bin": "^0.109.0",
|
||||||
"flow-typed": "^2.6.1",
|
"flow-typed": "^2.6.1",
|
||||||
"flowgen": "^1.10.0",
|
"flowgen": "^1.10.0",
|
||||||
|
"jest": "^24.9.0",
|
||||||
"pegjs": "^0.10.0",
|
"pegjs": "^0.10.0",
|
||||||
"prettier": "^1.18.2",
|
"prettier": "^1.18.2",
|
||||||
"react": "^16.10.2",
|
"react": "^16.10.2",
|
||||||
"react-native": "^0.61.2",
|
"react-native": "^0.61.2",
|
||||||
|
"react-test-renderer": "^16.10.2",
|
||||||
"semantic-release": "^15.13.24",
|
"semantic-release": "^15.13.24",
|
||||||
"semantic-release-cli": "^5.2.1",
|
"semantic-release-cli": "^5.2.1",
|
||||||
"typescript": "^3.6.3"
|
"typescript": "^3.6.3"
|
||||||
},
|
},
|
||||||
|
"jest": {
|
||||||
|
"preset": "react-native"
|
||||||
|
},
|
||||||
"release": {
|
"release": {
|
||||||
"plugins": [
|
"plugins": [
|
||||||
"@semantic-release/commit-analyzer",
|
"@semantic-release/commit-analyzer",
|
||||||
|
|||||||
Reference in New Issue
Block a user