Merge pull request #5233 from dylanpulver/fix-unitless-svg-aspect-ratio

Stop appending "px" to unitless SVG paint and aspect-ratio values

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)/;

compat/test/browser/render.test.jsx

@@ -913,4 +913,28 @@ describe('compat render', () => {
 
 		expect(<div style={style} />).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 <length>, 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(<div style={style} />, 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);
+		}
+	});
 });