Add support for SVG `transformOrigin` prop (#26130)
Co-authored-by: eps1lon <silbermann.sebastian@gmail.com>
Aravind D committed
Feb 9, 2023 at 18:17 UTC
28fcae062bff2b611cd935911f8666b0627b9551
4 files changed
+64
-1
fixtures/attribute-behavior/AttributeTableSnapshot.md
+51
-1
@@ -1,4 +1,4 @@
1
-## `about` (on `<div>` inside `<div>`)
1
+## `about` (on `<div>` inside `<div>`)
2
| Test Case | Flags | Result |
3
| --- | --- | --- |
4
| `about=(string)`| (changed)| `"a string"` |
@@ -11373,6 +11373,56 @@
11373
| `transform=(null)`| (initial)| `[]` |
11374
| `transform=(undefined)`| (initial)| `[]` |
11375
11376
+## `transform-origin` (on `<svg>` inside `<div>`)
11377
+| Test Case | Flags | Result |
11378
+| --- | --- | --- |
11379
+| `transform-origin=(string)`| (changed, warning)| `"a string"` |
11380
+| `transform-origin=(empty string)`| (changed, warning)| `<empty string>` |
11381
+| `transform-origin=(array with string)`| (changed, warning)| `"string"` |
11382
+| `transform-origin=(empty array)`| (changed, warning)| `<empty string>` |
11383
+| `transform-origin=(object)`| (changed, warning)| `"result of toString()"` |
11384
+| `transform-origin=(numeric string)`| (changed, warning)| `"42"` |
11385
+| `transform-origin=(-1)`| (changed, warning)| `"-1"` |
11386
+| `transform-origin=(0)`| (changed, warning)| `"0"` |
11387
+| `transform-origin=(integer)`| (changed, warning)| `"1"` |
11388
+| `transform-origin=(NaN)`| (changed, warning)| `"NaN"` |
11389
+| `transform-origin=(float)`| (changed, warning)| `"99.99"` |
11390
+| `transform-origin=(true)`| (initial, warning)| `<null>` |
11391
+| `transform-origin=(false)`| (initial, warning)| `<null>` |
11392
+| `transform-origin=(string 'true')`| (changed, warning)| `"true"` |
11393
+| `transform-origin=(string 'false')`| (changed, warning)| `"false"` |
11394
+| `transform-origin=(string 'on')`| (changed, warning)| `"on"` |
11395
+| `transform-origin=(string 'off')`| (changed, warning)| `"off"` |
11396
+| `transform-origin=(symbol)`| (initial, warning)| `<null>` |
11397
+| `transform-origin=(function)`| (initial, warning)| `<null>` |
11398
+| `transform-origin=(null)`| (initial, warning)| `<null>` |
11399
+| `transform-origin=(undefined)`| (initial, warning)| `<null>` |
11400
+
11401
+## `transformOrigin` (on `<svg>` inside `<div>`)
11402
+| Test Case | Flags | Result |
11403
+| --- | --- | --- |
11404
+| `transformOrigin=(string)`| (changed)| `"a string"` |
11405
+| `transformOrigin=(empty string)`| (changed)| `<empty string>` |
11406
+| `transformOrigin=(array with string)`| (changed)| `"string"` |
11407
+| `transformOrigin=(empty array)`| (changed)| `<empty string>` |
11408
+| `transformOrigin=(object)`| (changed)| `"result of toString()"` |
11409
+| `transformOrigin=(numeric string)`| (changed)| `"42"` |
11410
+| `transformOrigin=(-1)`| (changed)| `"-1"` |
11411
+| `transformOrigin=(0)`| (changed)| `"0"` |
11412
+| `transformOrigin=(integer)`| (changed)| `"1"` |
11413
+| `transformOrigin=(NaN)`| (changed, warning)| `"NaN"` |
11414
+| `transformOrigin=(float)`| (changed)| `"99.99"` |
11415
+| `transformOrigin=(true)`| (initial, warning)| `<null>` |
11416
+| `transformOrigin=(false)`| (initial, warning)| `<null>` |
11417
+| `transformOrigin=(string 'true')`| (changed)| `"true"` |
11418
+| `transformOrigin=(string 'false')`| (changed)| `"false"` |
11419
+| `transformOrigin=(string 'on')`| (changed)| `"on"` |
11420
+| `transformOrigin=(string 'off')`| (changed)| `"off"` |
11421
+| `transformOrigin=(symbol)`| (initial, warning)| `<null>` |
11422
+| `transformOrigin=(function)`| (initial, warning)| `<null>` |
11423
+| `transformOrigin=(null)`| (initial)| `<null>` |
11424
+| `transformOrigin=(undefined)`| (initial)| `<null>` |
11425
+
11426
## `type` (on `<button>` inside `<div>`)
11427
| Test Case | Flags | Result |
11428
| --- | --- | --- |
fixtures/attribute-behavior/src/attributes.js
+10
@@ -1981,6 +1981,16 @@ const attributes = [
1981
overrideStringValue:
1982
'translate(-10,-20) scale(2) rotate(45) translate(5,10)',
1983
},
1984
+ {
1985
+ name: 'transform-origin',
1986
+ tagName: 'svg',
1987
+ read: getSVGAttribute('transform-origin'),
1988
+ },
1989
+ {
1990
+ name: 'transformOrigin',
1991
+ tagName: 'svg',
1992
+ read: getSVGAttribute('transform-origin'),
1993
+ },
1994
{name: 'type', tagName: 'button', overrideStringValue: 'reset'},
1995
{
1996
name: 'type',
packages/react-dom-bindings/src/shared/DOMProperty.js
+1
@@ -521,6 +521,7 @@ const capitalize = (token: string) => token[1].toUpperCase();
521
'text-anchor',
522
'text-decoration',
523
'text-rendering',
524
+ 'transform-origin',
525
'underline-position',
526
'underline-thickness',
527
'unicode-bidi',
packages/react-dom-bindings/src/shared/possibleStandardNames.js
+2
@@ -421,6 +421,8 @@ const possibleStandardNames = {
421
'text-rendering': 'textRendering',
422
to: 'to',
423
transform: 'transform',
424
+ transformorigin: 'transformOrigin',
425
+ 'transform-origin': 'transformOrigin',
426
typeof: 'typeof',
427
u1: 'u1',
428
u2: 'u2',