Skip to content

Commit

Permalink
test case for css support
Browse files Browse the repository at this point in the history
  • Loading branch information
@iqqmuT
iqqmuT committed Oct 21, 2019
1 parent c899670 commit 8ebd84f
Show file tree
Hide file tree
Showing 4 changed files with 370 additions and 1 deletion.
311 changes: 311 additions & 0 deletions __tests__/__snapshots__/css.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -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>
`;
49 changes: 49 additions & 0 deletions __tests__/css.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -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();
});
3 changes: 3 additions & 0 deletions babel.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
};
Loading

0 comments on commit 8ebd84f

Please sign in to comment.