Bug 283487 – CSS transforms are applied incorrectly when `transform` uses a registered custom property

• Status: NEW
• Component: CSS

[Jordan Pittman]

Created attachment 473309 [details]
A file showcasing when the transform is broken and when it is correct

A CSS transform that uses a registered custom property defined with `syntax: "<transform-function>"` is computed incorrectly. For example `rotateY(30deg)` instead rotates around the X-axis instead of the Y-axis. Neither registered custom properties with `syntax: "*"` nor unregistered custom properties seem to be affected.

I've attached a file but basically in this CSS the transform computed by `.broken` is incorrect:

```css
  .broken {
    --broken: rotateY(30deg);
    transform: var(--broken) rotateX(45deg);
  }

  @property --broken {
    syntax: "<transform-function>";
    inherits: false;
    initial-value: rotateY(0deg);
  }
```

I've tested this in Safari 18.1, Safari Tech Preview 207, and the latest Webkit Nightly build as of this report (`286904@main`)

[Karl Dubost]

Created attachment 473329 [details]
rendering in safari, firefox, chrome

Confirmed.
Rendering the same on Firefox and Chrome.
Different on Safari.

Safari Technology Preview  207           20621.1.4.3
Firefox Nightly            134.0a1       13424.11.17
Google Chrome Canary       133.0.6851.0  6851.0

[Radar WebKit Bug Importer]

<rdar://problem/140659633>