diff --git a/compat/src/util.js b/compat/src/util.js index 8ff90baba..522040e10 100644 --- a/compat/src/util.js +++ b/compat/src/util.js @@ -13,4 +13,4 @@ export function shallowDiffers(a, b) { } export const IS_NON_DIMENSIONAL = - /^(-|f[lo].*[^se]$|g.{5,}[^ps]$|z|o[pr]|(W.{5})?[lL]i.*(t|mp)$|an|(bo|s).{4}Im|sca|m.{6}[ds]|ta|c.*[st]$|wido|ini)/; + /^(-|f[lo].*[^se]$|g.{5,}[^ps]$|z|o[pr]|(W.{5})?[lL]i.*(t|mp)$|an|(bo|s).{4}Im|sca|m.{6}[ds]|ta|c.*[st]$|wido|ini|asp|fill|st)/; diff --git a/compat/test/browser/render.test.jsx b/compat/test/browser/render.test.jsx index 6ec56419a..93b75390b 100644 --- a/compat/test/browser/render.test.jsx +++ b/compat/test/browser/render.test.jsx @@ -913,4 +913,28 @@ describe('compat render', () => { expect(
).to.have.nested.property('props.style', style); }); + + it('should not append "px" to unitless SVG paint and aspect-ratio values', () => { + // None of these accepts a , so appending "px" makes the value + // invalid and the declaration is dropped entirely. React lists all of + // them in `isUnitlessNumber` for the same reason. + const style = { + aspectRatio: 2, + fillOpacity: 0.5, + stopOpacity: 0.5, + strokeOpacity: 0.5, + strokeMiterlimit: 3, + strokeWidth: 2 + }; + render(
, scratch); + + const rendered = scratch.firstChild.style; + for (const key in style) { + expect(rendered[key], `${key} should not be dropped`).to.not.equal(''); + expect( + rendered[key].endsWith('px'), + `${key} should not have "px" appended, got "${rendered[key]}"` + ).to.equal(false); + } + }); });