1682741 - DOMMatrix rotateSelf does not preserve local scale

Status: RESOLVED INVALID

(Core :: DOM: CSS Object Model, defect)

Description

[manstie]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:83.0) Gecko/20100101 Firefox/83.0

Steps to reproduce:

URLs (if applicable) : https://jsfiddle.net/heqo7vrt/1/

Other browsers tested:
Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
Chrome: FAIL
Edge: FAIL

What steps will reproduce the problem?
(1) Create a DOMMatrix
(2) call rotateSelf by -45 degrees
(3) call scaleSelf with non-uniform parameters (2, 1)
(4) call rotateSelf by 45 degrees

Actual results:

a rotation after a non-uniform scale causes subsequent rotations to act not as expected (shear + not scaled to desired size)

Expected results:

The DOMMatrix represents a transformation as if it were not rotated;
rotateSelf(-45) + scaleSelf(2, 1) + rotateSelf(45) === scaleSelf(2, 1)

See https://stackoverflow.com/questions/64168159/transformation-matrix-rotation-not-preserving-local-axis-scaling for a more in-depth write-up

Comment 1

[manstie]

Equivalent chromium bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=1159298

Comment 2

[Peter Magyari (Desktop QA)]

Although this isn't a Firefox specific issue, I'm going to set a component in order to get an opinion on this from the development team.

Thank you for reporting!

Comment 3

[Boris Chiou [:boris]]

I'm not sure this is an issue. Perhaps need to check the final transform matrix for DOMMatix.

For CSS transform, for example

transform: rotate(-45deg) scale(2,1) rotate(45deg);

It rotates 45deg first, and then scale(2,1). The scaling is based on the x axis and y axis of its containing block, instead of itself. And then rotate -45deg.

Comment 4

[Boris Chiou [:boris]]

(In reply to Boris Chiou [:boris] from comment #3)

I'm not sure this is an issue. Perhaps need to check the final transform matrix for DOMMatix.

For CSS transform, for example

transform: rotate(-45deg) scale(2,1) rotate(45deg);

It rotates 45deg first, and then scale(2,1). The scaling is based on the x axis and y axis of its containing block, instead of itself. And then rotate -45deg.

So it seems the transform looks reasonable if DOMMatrix produces the same transform matrix as the CSS transform.

Comment 5

[Boris Chiou [:boris]]

Mark this invalid because I think this is reasonable. Please feel free to reopen this if you think it doesn't make sense (i.e. scaling is based on its containing block, i.e. it's parent div in your case.)