New issue
Advanced search Search tips

Issue 740300 link

Starred by 4 users

Issue metadata

Status: Fixed
Owner:
Closed: Dec 18
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac , Fuchsia
Pri: 2
Type: Bug



Sign in to add a comment

SVG element's transform-origin computed value is incorrect

Project Member Reported by dvoytenko@google.com, Jul 8 2017

Issue description

Chrome Version: (copy from chrome://version)
OS: (e.g. Win7, OSX 10.9.5, etc...)

What steps will reproduce the problem?
(1) Style an SVG element with `transform` and `transform-origin`
(2) Compute styles using `getComputedStyle`
(3) Read and inspect `transform` and `transform-origin`

What is the expected result?

`transform` and `transform-origin` should both reflect the correct calculated values

What happens instead?

`transform-origin` always yields `0 0`. `transform` is fine.

Demo:

Use this bin: http://jsbin.com/yuhoxum/edit?html,js,output

It styles an SVG rect shape with `transform-origin: 50% 50%; transform: scale(0.5)`. The rendering appears to be fully correct. However, reading styles and computed values yields:

computed transform: matrix(0.5, 0, 0, 0.5, 0, 0)
computed origin: 0px 0px
style transform: scale(0.5)
style origin: 50% 50% 0px

Styles are correct, but computed value for origin = `0px 0px` is wrong.

Other browsers:

- Appears to be the case in all Blink
- Safari: the same behavior
- Firefox: returns non-zero values, but completely unclear what those values are
- IE/Edge: do not support transforms on SVG at all

 

Comment 1 by f...@opera.com, Jul 8 2017

Labels: -Pri-1 OS-Chrome OS-Fuchsia OS-Linux OS-Windows Pri-2
Status: Available (was: Untriaged)
Definitely a bug in one form or another. The spec says:

 "Computed value: For <length> the absolute value, otherwise a percentage"

which none of the implementations actually seem to adhere to... I guess we should go with resolving percentage values and get the spec fixed as well, since that seems like the most common behavior (need to check what IE/Edge does, but they are at worst the odd one out.)

Also note that for Firefox (and bleeding edge/TP Safari) you'd want to add 'transform-box: fill-box' to ensure the "right" reference box is used (you seem to assume fill-box at least, hence "right".)
Labels: Hotlist-Interop
That's true. Per Firefox, the transform-origin should be relative to view-box by default for an SVG element. And thus, both Chrome's rendering and computed values are incorrect.

Comment 4 by f...@opera.com, Jul 10 2017

Yes, 'transform-box' is currently behind a flag (ref  issue 595829 .)
Project Member

Comment 5 by sheriffbot@chromium.org, Jul 11 2017

Labels: Hotlist-Google
Also, it's odd that `transform-origin: 0% 0%` and `transform-origin: 0 0` produce different rendering. Can anyone explain this?

Comment 7 by f...@opera.com, Jul 11 2017

That is also related to transform-box - or rather the lack of it - percentage values will be relative to the bounding box of the element while non-percentage will be relative to the origin of the current coordinate system.
But what will the right (per-spec) behavior once `transform-box` is available?

Comment 9 by f...@opera.com, Jul 11 2017

With 'transform-box', 'transform-origin: 0% 0%' will be the same as 'transform-origin: 0 0' (regardless of the value of 'transform-box'.)
Cc: rbyers@chromium.org
fs@ any idea what the web-platform-test situation is like here?  Maybe we should at least try to land a couple tests around SVG and transforms?

Comment 11 by f...@opera.com, Jul 11 2017

After the merge of the CSS testsuites to WPT, there should be a fair amount of tests at least: https://github.com/w3c/web-platform-tests/tree/master/css/css-transforms-1 - the "bubble" in the draft claims 951 tests for the whole CSS transforms spec. Because of the mass of tests I've only sifted through them... I've yet to find coverage for computed style and percentage values (and SVG.) There's definitely tests for 'transforms' and SVG, but to what degree they are up-to-date and correct I don't know.

Comment 12 by meade@chromium.org, Jul 12 2017

Labels: Update-Quarterly
Labels: Code-ComputedStyle
Labels: Standards
Labels: -Code-ComputedStyle BlockedBug
Labels: -Update-Quarterly
Project Member

Comment 17 by sheriffbot@chromium.org, Dec 6

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Status: Available (was: Untriaged)
I'd guess it's still important to address given spec compatibility.
Owner: f...@opera.com
Status: Assigned (was: Available)
Project Member

Comment 22 by bugdroid1@chromium.org, Dec 18

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/cf11cdf7a29d2d73ed0de5472749f2b87bd924e6

commit cf11cdf7a29d2d73ed0de5472749f2b87bd924e6
Author: Fredrik Söderquist <fs@opera.com>
Date: Tue Dec 18 17:30:36 2018

Resolve computed 'transform-origin' for SVG elements

Make the local helper ReferenceBoxForTransform available via
ComputedStyleUtils and use it in TransformOrigin::CSSValueFromComp...
Replace usages of MinimumValueForLength with FloatValueForLength. This
matches what is done when resolving/applying transform in the general
case.
Also sink the common handling of the 'z' component out of the 'if'.

Bug:  740300 
Change-Id: Id0e6cbcc85942ccc8cdb3f8ed86ecc6e7aaf492e
Reviewed-on: https://chromium-review.googlesource.com/c/1382434
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#617548}
[modify] https://crrev.com/cf11cdf7a29d2d73ed0de5472749f2b87bd924e6/third_party/blink/renderer/core/css/properties/computed_style_utils.cc
[modify] https://crrev.com/cf11cdf7a29d2d73ed0de5472749f2b87bd924e6/third_party/blink/renderer/core/css/properties/computed_style_utils.h
[modify] https://crrev.com/cf11cdf7a29d2d73ed0de5472749f2b87bd924e6/third_party/blink/renderer/core/css/properties/longhands/transform_origin_custom.cc
[add] https://crrev.com/cf11cdf7a29d2d73ed0de5472749f2b87bd924e6/third_party/blink/web_tests/external/wpt/css/css-transforms/transform-origin-014.html

Status: Fixed (was: Assigned)

Sign in to add a comment