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.

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

extends the CAMEL_PROPS regex to accept svg attribut clipPathUnits #2251

Merged
2 changes: 1 addition & 1 deletion compat/src/render.js
Expand Up @@ -6,7 +6,7 @@ import {
} from 'preact';
import { applyEventNormalization } from './events';

const CAMEL_PROPS = /^(?:accent|alignment|arabic|baseline|cap|clip|color|fill|flood|font|glyph|horiz|marker|overline|paint|stop|strikethrough|stroke|text|underline|unicode|units|v|vector|vert|word|writing|x)[A-Z]/;
const CAMEL_PROPS = /^(?:accent|alignment|arabic|baseline|cap|color|fill|flood|font|glyph|horiz|marker|overline|paint|stop|strikethrough|stroke|text|underline|unicode|units|v|vector|vert|word|writing|x)[A-Z]/;

// Some libraries like `react-virtualized` explicitly check for this.
Component.prototype.isReactComponent = {};
Expand Down
16 changes: 16 additions & 0 deletions compat/test/browser/svg.test.js
Expand Up @@ -66,4 +66,20 @@ describe('svg', () => {
)
);
});

it('should render SVG to DOM without name (clipPathUnits) attribute manipulation', () => {
React.render(
<svg>
<clipPath id="hexagon" clipPathUnits="objectBoundingBox">
<polygon points="0.5 0, 1 0.25, 1 0.75, 0.5 1, 0 0.75, 0 0.25" />
</clipPath>
</svg>,
scratch
);
expect(serializeHtml(scratch)).to.eql(
sortAttributes(
'<svg><clipPath id="hexagon" clipPathUnits="objectBoundingBox"><polygon points="0.5 0, 1 0.25, 1 0.75, 0.5 1, 0 0.75, 0 0.25" /></clipPath></svg>'
)
);
});
});