Skip to content

[css-transforms] inconsistency of computed value serialization (transform should be a resolved value special case property so getComputedStyle() returns matrix()) #4869

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
george-steel opened this issue Mar 12, 2020 · 6 comments

Comments

@george-steel
Copy link
Contributor

For the transform property, the spec says that

Computed value: as specified, but with lengths made absolute
Value: none | <transform-list>
<transform-list> = <transform-function>+

and provides a procedure for serializing transform individual transform functions. This seems to imply that the computed value should be serialized as a list of functions. Furthermore, there are procedures such as interpolation which expect computed values to be lists of functions.

Later in the spec there is a section

Serialization of the computed value of <transform-list>

which gives a procedure specifying conversion to a matrix, an operation which does not round-trip (round-tripping is necessary for css transitions) and relies on the box size (not allowed for computed values). Although this makes sense for serializing the resolved value (which is returned by getComputedStyle()) specifying this happens to the computed value looks like a confusing typo to me.

This may be a historical oversight from before the difference between computed and resolved value (sometimes historically referred to as computed value serialization) was fully clarified. We should correct this.

@george-steel
Copy link
Contributor Author

@birtles @stephenmcgruer

@george-steel
Copy link
Contributor Author

Also, if there is no layout box, should we perform the conversion with a (0,0) box size (what firefox does) or should we simple return the computed value as the resolved value (what all other properties do except for line-height). Chrome currently simply gives up and returns none here.

@george-steel
Copy link
Contributor Author

@emilio

chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Mar 13, 2020
Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get(). toStrung() which is
supported by chrome. These also have suplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume the interperetation of computed value discussed in
w3c/csswg-drafts#4869
which seems to be followed by both firefox and chrome.

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
@emilio
Copy link
Collaborator

emilio commented Mar 15, 2020

This may be a historical oversight from before the difference between computed and resolved value (sometimes historically referred to as computed value serialization) was fully clarified. We should correct this.

Yeah, I think transform to matrix() serialization should be a resolved value operation.

which does not round-trip

Can you elaborate? I think it should roundtrip... When doesn't it?

See also #3305 where some related differences this came up.

chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Mar 16, 2020
Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume the interperetation of computed value discussed in
w3c/csswg-drafts#4869
which seems to be followed by both firefox and chrome.

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Mar 16, 2020
Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume the interperetation of computed value discussed in
w3c/csswg-drafts#4869
which seems to be followed by both firefox and chrome.

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Mar 16, 2020
Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms,
see https://drafts.csswg.org/css-transforms/#transform-property).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume the interperetation of computed value discussed in
w3c/csswg-drafts#4869
which seems to be followed by both firefox and chrome.

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Mar 17, 2020
Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms,
see https://drafts.csswg.org/css-transforms/#transform-property).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume the interperetation of computed value discussed in
w3c/csswg-drafts#4869
which seems to be followed by both firefox and chrome.

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Mar 17, 2020
Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms,
see https://drafts.csswg.org/css-transforms/#transform-property).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume that "computed value serialization", when referring to
a box-size dependent procedure, is used ion its historical context as
a deprecated term for what is now "resolved value" (as returned by
getComputedStyle()), and the serialization of the true computed value
follows the property infobox.  This interperetation is currently used
by both Firefox and Chromium.

A spec issue to update the language around resolved value is at
w3c/csswg-drafts#4869

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Mar 17, 2020
Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms,
see https://drafts.csswg.org/css-transforms/#transform-property).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume that "computed value serialization", when referring to
a box-size dependent procedure, is used ion its historical context as
a deprecated term for what is now "resolved value" (as returned by
getComputedStyle()), and the serialization of the true computed value
follows the property infobox.  This interperetation is currently used
by both Firefox and Chromium.

A spec issue to update the language around resolved value is at
w3c/csswg-drafts#4869

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Mar 18, 2020
Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms,
see https://drafts.csswg.org/css-transforms/#transform-property).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume that "computed value serialization", when referring to
a box-size dependent procedure, is used ion its historical context as
a deprecated term for what is now "resolved value" (as returned by
getComputedStyle()), and the serialization of the true computed value
follows the property infobox.  This interperetation is currently used
by both Firefox and Chromium.

A spec issue to update the language around resolved value is at
w3c/csswg-drafts#4869

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2103520
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: George Steel <gtsteel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751418}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Mar 18, 2020
Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms,
see https://drafts.csswg.org/css-transforms/#transform-property).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume that "computed value serialization", when referring to
a box-size dependent procedure, is used ion its historical context as
a deprecated term for what is now "resolved value" (as returned by
getComputedStyle()), and the serialization of the true computed value
follows the property infobox.  This interperetation is currently used
by both Firefox and Chromium.

A spec issue to update the language around resolved value is at
w3c/csswg-drafts#4869

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2103520
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: George Steel <gtsteel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751418}
blueboxd pushed a commit to blueboxd/chromium-legacy that referenced this issue Mar 18, 2020
Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms,
see https://drafts.csswg.org/css-transforms/#transform-property).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume that "computed value serialization", when referring to
a box-size dependent procedure, is used ion its historical context as
a deprecated term for what is now "resolved value" (as returned by
getComputedStyle()), and the serialization of the true computed value
follows the property infobox.  This interperetation is currently used
by both Firefox and Chromium.

A spec issue to update the language around resolved value is at
w3c/csswg-drafts#4869

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2103520
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: George Steel <gtsteel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751418}
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Mar 21, 2020
…nsform interpolations, a=testonly

Automatic update from web-platform-tests
Add tests for true computed value of transform interpolations

Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms,
see https://drafts.csswg.org/css-transforms/#transform-property).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume that "computed value serialization", when referring to
a box-size dependent procedure, is used ion its historical context as
a deprecated term for what is now "resolved value" (as returned by
getComputedStyle()), and the serialization of the true computed value
follows the property infobox.  This interperetation is currently used
by both Firefox and Chromium.

A spec issue to update the language around resolved value is at
w3c/csswg-drafts#4869

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2103520
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: George Steel <gtsteel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751418}

--

wpt-commits: 201154711dd0e06c817880c7c9396a0d7188a8f5
wpt-pr: 22252
xeonchen pushed a commit to xeonchen/gecko that referenced this issue Mar 21, 2020
…nsform interpolations, a=testonly

Automatic update from web-platform-tests
Add tests for true computed value of transform interpolations

Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms,
see https://drafts.csswg.org/css-transforms/#transform-property).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume that "computed value serialization", when referring to
a box-size dependent procedure, is used ion its historical context as
a deprecated term for what is now "resolved value" (as returned by
getComputedStyle()), and the serialization of the true computed value
follows the property infobox.  This interperetation is currently used
by both Firefox and Chromium.

A spec issue to update the language around resolved value is at
w3c/csswg-drafts#4869

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2103520
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: George Steel <gtsteel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751418}

--

wpt-commits: 201154711dd0e06c817880c7c9396a0d7188a8f5
wpt-pr: 22252
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified that referenced this issue Mar 23, 2020
…nsform interpolations, a=testonly

Automatic update from web-platform-tests
Add tests for true computed value of transform interpolations

Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms,
see https://drafts.csswg.org/css-transforms/#transform-property).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume that "computed value serialization", when referring to
a box-size dependent procedure, is used ion its historical context as
a deprecated term for what is now "resolved value" (as returned by
getComputedStyle()), and the serialization of the true computed value
follows the property infobox.  This interperetation is currently used
by both Firefox and Chromium.

A spec issue to update the language around resolved value is at
w3c/csswg-drafts#4869

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2103520
Reviewed-by: Kevin Ellis <keverschromium.org>
Commit-Queue: George Steel <gtsteelchromium.org>
Cr-Commit-Position: refs/heads/master{#751418}

--

wpt-commits: 201154711dd0e06c817880c7c9396a0d7188a8f5
wpt-pr: 22252

UltraBlame original commit: 7ccb03b7cd7b44a7cc20e71d44fd6981cd804af9
gecko-dev-updater pushed a commit to marco-c/gecko-dev-comments-removed that referenced this issue Mar 23, 2020
…nsform interpolations, a=testonly

Automatic update from web-platform-tests
Add tests for true computed value of transform interpolations

Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms,
see https://drafts.csswg.org/css-transforms/#transform-property).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume that "computed value serialization", when referring to
a box-size dependent procedure, is used ion its historical context as
a deprecated term for what is now "resolved value" (as returned by
getComputedStyle()), and the serialization of the true computed value
follows the property infobox.  This interperetation is currently used
by both Firefox and Chromium.

A spec issue to update the language around resolved value is at
w3c/csswg-drafts#4869

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2103520
Reviewed-by: Kevin Ellis <keverschromium.org>
Commit-Queue: George Steel <gtsteelchromium.org>
Cr-Commit-Position: refs/heads/master{#751418}

--

wpt-commits: 201154711dd0e06c817880c7c9396a0d7188a8f5
wpt-pr: 22252

UltraBlame original commit: 7ccb03b7cd7b44a7cc20e71d44fd6981cd804af9
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified-and-comments-removed that referenced this issue Mar 23, 2020
…nsform interpolations, a=testonly

Automatic update from web-platform-tests
Add tests for true computed value of transform interpolations

Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms,
see https://drafts.csswg.org/css-transforms/#transform-property).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume that "computed value serialization", when referring to
a box-size dependent procedure, is used ion its historical context as
a deprecated term for what is now "resolved value" (as returned by
getComputedStyle()), and the serialization of the true computed value
follows the property infobox.  This interperetation is currently used
by both Firefox and Chromium.

A spec issue to update the language around resolved value is at
w3c/csswg-drafts#4869

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2103520
Reviewed-by: Kevin Ellis <keverschromium.org>
Commit-Queue: George Steel <gtsteelchromium.org>
Cr-Commit-Position: refs/heads/master{#751418}

--

wpt-commits: 201154711dd0e06c817880c7c9396a0d7188a8f5
wpt-pr: 22252

UltraBlame original commit: 7ccb03b7cd7b44a7cc20e71d44fd6981cd804af9
@fantasai fantasai added the css-transforms-1 Current Work label Apr 1, 2020
@dbaron
Copy link
Member

dbaron commented Jun 3, 2021

Yeah, I think what needs to happen here is that transform should (like transform-origin) be defined as a resolved value special case property, and the relevant section should be rewritten accordingly.

@dbaron dbaron changed the title [css-transforms] inconsistency of computed value serialization [css-transforms] inconsistency of computed value serialization (transform should be a resolved value special case property so getComputedStyle() returns matrix()) Jun 3, 2021
@dbaron dbaron self-assigned this Jun 3, 2021
@dbaron
Copy link
Member

dbaron commented Oct 27, 2021

And that relevant section is also duplicated in transforms level 2.

@dbaron dbaron closed this as completed in 736619a Feb 16, 2022
bhearsum pushed a commit to mozilla-releng/staging-firefox that referenced this issue May 1, 2025
…nsform interpolations, a=testonly

Automatic update from web-platform-tests
Add tests for true computed value of transform interpolations

Create a set of interpation tests for transforms which read the true
computed value (as opposed to the resolved value returned by
getComputedStyle() which differs drastically in the case of transforms,
see https://drafts.csswg.org/css-transforms/#transform-property).
As there is currently no universal way to get this value,
each test comes in 3 versions:

Two variants using computedStyleMap().get().toString() which is
supported by chrome. These also have duplicate versions where the zoom
property is set as it currently triggers some transform serialization
bugs in blink.

A version using commitStyles, which in implemented in both firefox and
chrome, but currently gives resolved values instead of computed ones
in chrome.

These assume that "computed value serialization", when referring to
a box-size dependent procedure, is used ion its historical context as
a deprecated term for what is now "resolved value" (as returned by
getComputedStyle()), and the serialization of the true computed value
follows the property infobox.  This interperetation is currently used
by both Firefox and Chromium.

A spec issue to update the language around resolved value is at
w3c/csswg-drafts#4869

Change-Id: I59afcc9f73906051212cc71570631509920ddc32
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2103520
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: George Steel <gtsteel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751418}

--

wpt-commits: 201154711dd0e06c817880c7c9396a0d7188a8f5
wpt-pr: 22252
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants