1504327 - Support |rotate: {x|y|z} <angle>| for individual transform

Status: RESOLVED FIXED

(Core :: CSS Transitions and Animations, enhancement, P3)

Description

[Boris Chiou [:boris]]

The spec [1] says it is possible to use the `x`, `y`, `z` as the axis for "rotate" property. i.e.

> rotate: none | [ x | y | z | <number>{3} ]? && <angle>

For now, we only can use number as the axis.

Besides, "rotate" is not "GETCS_NEEDS_LAYOUT_FLUSH", so it is possible to serialize it by servo.

[1] https://drafts.csswg.org/css-transforms-2/#propdef-rotate

Comment 1

[Boris Chiou [:boris]]

New updated spec about serializing this: https://drafts.csswg.org/css-transforms-2/#individual-transform-serialization

Comment 2

[Boris Chiou [:boris]]

And we should fix these tests in the bug:
https://searchfox.org/mozilla-central/rev/7c848ac7630df5baf1314b0c03e015683599efb9/testing/web-platform/meta/css/css-transforms/parsing/rotate-parsing-valid.html.ini#2-22

Comment 3

[Boris Chiou [:boris]]

Attachment: Bug 1504327 - Support keywords [x|y|z] on rotate.

Update the parser and the serialization for rotate to support [x|y|z]
keywords.

Comment 4

[Boris Chiou [:boris]]

try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=1e3d8d9afd82e91b50d9bc4cfcc7625fac7f9a4e

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3bc1fa72e7eb
Support keywords [x|y|z] on rotate. r=emilio

Comment 6

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/14051 for changes under testing/web-platform/tests

Comment 7

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/3bc1fa72e7eb

Comment 8

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged

Comment 9

[Chris Mills [:cmills]]

Note to MDN writers:

The individual transform properties are still disabled behind a pref, AFAICT, so I'm not adding a note to the Fx65 rel notes about this.

We do already document the rotate property:
https://developer.mozilla.org/en-US/docs/Web/CSS/rotate

It is pretty much accurate, so this will probably just be a matter of updating the compat data.

Comment 10

[Estelle Weyl]

BCD updated (PR https://github.com/mdn/browser-compat-data/pull/3317)
Syntax updated (PR https://github.com/mdn/data/pull/347)