SVG element's transform-origin computed value is incorrect |
|||||||||||||
Issue descriptionChrome 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
,
Jul 9 2017
,
Jul 10 2017
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.
,
Jul 10 2017
Yes, 'transform-box' is currently behind a flag (ref issue 595829 .)
,
Jul 11 2017
,
Jul 11 2017
Also, it's odd that `transform-origin: 0% 0%` and `transform-origin: 0 0` produce different rendering. Can anyone explain this?
,
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.
,
Jul 11 2017
But what will the right (per-spec) behavior once `transform-box` is available?
,
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'.)
,
Jul 11 2017
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?
,
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.
,
Jul 12 2017
,
Oct 30 2017
,
Nov 27 2017
,
Nov 27 2017
,
Dec 6 2017
,
Dec 6
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
,
Dec 6
,
Dec 6
I'd guess it's still important to address given spec compatibility.
,
Dec 15
Possibly related: https://bugs.chromium.org/p/chromium/issues/detail?id=915426
,
Dec 18
,
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
,
Dec 18
|
|||||||||||||
►
Sign in to add a comment |
|||||||||||||
Comment 1 by f...@opera.com
, Jul 8 2017Status: Available (was: Untriaged)