New issue
Advanced search Search tips
Starred by 9 users

Issue metadata

Status: Assigned
Owner:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Task



Sign in to add a comment

Implement the transform-box property

Reported by amelia.b...@gmail.com, Mar 17 2016 Back to list

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

Example URL:
https://jsbin.com/wanipiwujo/edit?html,css,output

Steps to reproduce the problem:
1. Apply a translate transform to an SVG element, using % for the translation offset (the red rectangles in the test page)
2. Apply a rotational transform on an SVG element, and also set the transform-origin property using % values (the blue ellipses in the test page)
3. Optionally, set the transform-box property on the element.

What is the expected behavior?
See https://drafts.csswg.org/css-transforms/#propdef-transform-box

Percentages in transformations are relative to the width/height of a reference box.  For SVG, this should by default be the view-box (same as most other percentages in SVG).  CSS Transforms introduces the transform-box property to allow author control over this behavior.

What went wrong?
Chromium does not support transform-box, and treats all SVG elements as if they had `transform-box: fill-box` for percentages.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? N/A 

Did this work before? N/A 

Does this work in other browsers? N/A 

Chrome version: 49.0.2623.87  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 21.0 r0

Firefox has always implemented percentages in CSS Transforms on SVG elements relative to the view-box.  The latest Nightly build (48) supports transform-box according to the latest spec.

IE/Edge have not yet implemented CSS transforms on SVG elements, in part because of the lack of interoperability of this feature.

Safari/WebKit I believe have same behavior as Chromium, can't test at the moment.
 

Comment 1 by jw...@jwatt.org, Mar 17 2016

Mozilla and the spec chose the default of 'transform-box' to make the 'transform' attribute and the 'transform' CSS property symmetrical. That is, taking the value from the 'transform' attribute and setting it as the value of the property instead, or visa versa, should give exactly the same rendering.

Comment 2 by f...@opera.com, Mar 18 2016

Components: -Blink Blink>SVG
Labels: -OS-Windows OS-All
Status: Available

Comment 3 by f...@opera.com, Jul 5 2016

 Issue 625639  has been merged into this issue.
Project Member

Comment 4 by bugdroid1@chromium.org, Mar 2 2017

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

commit 9c742930a91e7c1affdc9f956ad7b6afd4a0c692
Author: fs <fs@opera.com>
Date: Thu Mar 02 22:33:49 2017

Add a use-counter for transforms using the reference box on SVG element

For gauging the risk of implementing 'transform-box' proper - mostly
with an eye towards the initial value.

BUG=595829

Review-Url: https://codereview.chromium.org/2725973003
Cr-Commit-Position: refs/heads/master@{#454408}

[add] https://crrev.com/9c742930a91e7c1affdc9f956ad7b6afd4a0c692/third_party/WebKit/LayoutTests/svg/transforms/transform-boxsize-usecounter-1.html
[add] https://crrev.com/9c742930a91e7c1affdc9f956ad7b6afd4a0c692/third_party/WebKit/LayoutTests/svg/transforms/transform-boxsize-usecounter-2.html
[add] https://crrev.com/9c742930a91e7c1affdc9f956ad7b6afd4a0c692/third_party/WebKit/LayoutTests/svg/transforms/transform-boxsize-usecounter-3.html
[add] https://crrev.com/9c742930a91e7c1affdc9f956ad7b6afd4a0c692/third_party/WebKit/LayoutTests/svg/transforms/transform-boxsize-usecounter-4.html
[add] https://crrev.com/9c742930a91e7c1affdc9f956ad7b6afd4a0c692/third_party/WebKit/LayoutTests/svg/transforms/transform-boxsize-usecounter-no-trigger-1.html
[add] https://crrev.com/9c742930a91e7c1affdc9f956ad7b6afd4a0c692/third_party/WebKit/LayoutTests/svg/transforms/transform-boxsize-usecounter-no-trigger-2.html
[modify] https://crrev.com/9c742930a91e7c1affdc9f956ad7b6afd4a0c692/third_party/WebKit/Source/core/frame/UseCounter.h
[modify] https://crrev.com/9c742930a91e7c1affdc9f956ad7b6afd4a0c692/third_party/WebKit/Source/core/style/ComputedStyle.h
[modify] https://crrev.com/9c742930a91e7c1affdc9f956ad7b6afd4a0c692/third_party/WebKit/Source/core/svg/SVGElement.cpp
[modify] https://crrev.com/9c742930a91e7c1affdc9f956ad7b6afd4a0c692/third_party/WebKit/Source/platform/transforms/TranslateTransformOperation.h
[modify] https://crrev.com/9c742930a91e7c1affdc9f956ad7b6afd4a0c692/tools/metrics/histograms/histograms.xml

Comment 5 by jw...@jwatt.org, Mar 2 2017

Just to be pedantic, shouldn't there be an "usecounter-no" test that has a transform that *does* use the transform-box on an absolutely positioned HTML element. (Checking that the use counter isn't incremented for HTML elements.) :)

Comment 6 by f...@opera.com, Mar 3 2017

Owner: f...@opera.com
Status: Assigned
Labels: PaintTeamTriaged-20160318 BugSource-User

Comment 8 by f...@opera.com, Mar 29 2017

Labels: -Type-Bug Type-Launch-OWP
Summary: Implement the transform-box property (was: Default behavior of % in transforms on SVG incorrect // implement transform-box property // implement % values for transform-origin)
Project Member

Comment 9 by bugdroid1@chromium.org, Apr 5 2017

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

commit 8e4a41274d2916c25668c2e7c37892e878e5d6c4
Author: fs <fs@opera.com>
Date: Wed Apr 05 23:22:52 2017

Implement support for the 'transform-box' property

Spec:

 https://drafts.csswg.org/css-transforms-1/#transform-box

Intent to implement:

 https://groups.google.com/a/chromium.org/d/topic/blink-dev/v8g3QF8pRF8

Implemented behind the CSSTransformBox Blink runtime flag.
Add some basic tests and a smoke test for the "legacy" transform-box
behavior. Existing tests are adjusted to be compatible with the new
behavior.
The test svg/transforms/transform-origin-css-property.xhtml is "fixed"
by adding units when required (unitless numbers are not valid in inline
style.)

BUG=595829

Review-Url: https://codereview.chromium.org/2786643003
Cr-Commit-Position: refs/heads/master@{#462266}

[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/VirtualTestSuites
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/svg/css/transform-origin-zoom.svg
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/svg/transforms/change-transform-origin-css.xhtml
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/svg/transforms/change-transform-origin-presentation-attribute.xhtml
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/svg/transforms/percent-transform-values.xhtml
[add] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/svg/transforms/transform-box-border-box-expected.html
[add] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/svg/transforms/transform-box-border-box.html
[add] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/svg/transforms/transform-box-fill-box-expected.html
[add] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/svg/transforms/transform-box-fill-box.html
[add] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/svg/transforms/transform-box-view-box-expected.html
[add] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/svg/transforms/transform-box-view-box.html
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/svg/transforms/transform-origin-css-property.xhtml
[add] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/virtual/stable/svg/transforms/stable/README.txt
[add] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/virtual/stable/svg/transforms/stable/legacy-transform-box.html
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/Source/core/css/CSSProperties.json5
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/Source/core/css/CSSValueKeywords.json5
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/Source/core/css/parser/CSSParserFastPaths.cpp
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/Source/core/frame/UseCounter.cpp
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/Source/core/style/ComputedStyle.cpp
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/Source/core/svg/SVGElement.cpp
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.json5
[modify] https://crrev.com/8e4a41274d2916c25668c2e7c37892e878e5d6c4/tools/metrics/histograms/histograms.xml

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

 Issue 729386  has been merged into this issue.
Ping on this one, since it's listed as a Q2 goal for paint-dev.

Comment 12 by f...@opera.com, Jun 20 2017

Need to update the implementation to match the changes that were made to the spec. That should be mostly done, but I've not had time to work in this for a while now.
Labels: migrated-launch-owp Type-Task
This issue has been automatically relabelled type=task because type=launch-owp issues are now officially deprecated. The deprecation is because they were creating confusion about how to get launch approvals, which should be instead done via type=launch issues.

We recommend this issue be used for implementation tracking (for public visibility), but if you already have an issue for that, you may mark this as duplicate.

For more details see here: https://docs.google.com/document/d/1JA6RohjtZQc26bTrGoIE_bSXGXUDQz8vc6G0n_sZJ2o/edit

For any questions, please contact owencm, sshruthi, larforge
Project Member

Comment 14 by bugdroid1@chromium.org, Oct 24

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

commit 9fc03eb55bb4b248f9241a70b1cd14893905a790
Author: Fredrik Söderquist <fs@opera.com>
Date: Tue Oct 24 22:42:15 2017

The initial value for 'transform-box' should be 'view-box'

 https://github.com/w3c/csswg-drafts/issues/857#issuecomment-296024182

Drop support for 'border-box' for the time being, since it no longer is
just an alias for 'view-box'. Remove the test for it (which happened to
be using the wrong keyword even... Oops)

Bug: 595829
Change-Id: Ia2889848eb3355c18164ce6978a13bab9e40e698
Reviewed-on: https://chromium-review.googlesource.com/735560
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#511287}
[delete] https://crrev.com/e0754a932085aaa194b200bb9a60b091da7bdb89/third_party/WebKit/LayoutTests/svg/transforms/transform-box-border-box.html
[modify] https://crrev.com/9fc03eb55bb4b248f9241a70b1cd14893905a790/third_party/WebKit/Source/core/css/CSSProperties.json5
[modify] https://crrev.com/9fc03eb55bb4b248f9241a70b1cd14893905a790/third_party/WebKit/Source/core/svg/SVGElement.cpp

Project Member

Comment 15 by bugdroid1@chromium.org, Oct 25

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

commit 92d486ea599cf8211a409ce1277c5179a234fca9
Author: Fredrik Söderquist <fs@opera.com>
Date: Wed Oct 25 13:42:58 2017

Remove reference for test that was removed

TBR=pdr@chromium.org

Bug: 595829
Change-Id: Ie93a136fbfb6e9425e9c48c89c8132f35ebfbc45
Reviewed-on: https://chromium-review.googlesource.com/738190
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#511439}
[delete] https://crrev.com/05fbc1c3ea9a30433f7dcd3658b1134d64965dbf/third_party/WebKit/LayoutTests/svg/transforms/transform-box-border-box-expected.html

Project Member

Comment 16 by bugdroid1@chromium.org, Nov 9

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

commit e6fbde070b59cde157b26db7251e80436b14e5a3
Author: Fredrik Söderquist <fs@opera.com>
Date: Thu Nov 09 20:51:37 2017

Ship the CSS 'transform-box' property

Intent-to-ship thread:

 https://groups.google.com/a/chromium.org/d/topic/blink-dev/4ZWHz8tCONI/discussion

Bug: 595829
Change-Id: I8b25037046efeeffcc52bf3835aff06c8d110549
Reviewed-on: https://chromium-review.googlesource.com/759040
Reviewed-by: Daniel Bratell <bratell@opera.com>
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#515282}
[modify] https://crrev.com/e6fbde070b59cde157b26db7251e80436b14e5a3/third_party/WebKit/LayoutTests/VirtualTestSuites
[delete] https://crrev.com/daf11e8f4eeed2d409b857dca2c83f7613334e9a/third_party/WebKit/LayoutTests/virtual/stable/svg/transforms/stable/README.txt
[delete] https://crrev.com/daf11e8f4eeed2d409b857dca2c83f7613334e9a/third_party/WebKit/LayoutTests/virtual/stable/svg/transforms/stable/legacy-transform-box.html
[modify] https://crrev.com/e6fbde070b59cde157b26db7251e80436b14e5a3/third_party/WebKit/LayoutTests/virtual/stable/webexposed/css-properties-as-js-properties-expected.txt
[modify] https://crrev.com/e6fbde070b59cde157b26db7251e80436b14e5a3/third_party/WebKit/LayoutTests/virtual/stable/webexposed/css-property-listing-expected.txt
[modify] https://crrev.com/e6fbde070b59cde157b26db7251e80436b14e5a3/third_party/WebKit/Source/platform/runtime_enabled_features.json5

Project Member

Comment 17 by bugdroid1@chromium.org, Nov 15

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

commit 828654a96d8f945a5a2e9dae8ec29c4dbabf3229
Author: Fredrik Söderquist <fs@opera.com>
Date: Wed Nov 15 11:53:17 2017

Specify fill-box transform-box for circle.animation-{end,keyframe-}point

The transform-origin is supposed to be relative to the fill-box (the
object's/circle's bounding box) and not the viewport (which is the
initial value.)

Bug:  783985 , 595829
Change-Id: I80b5b64a3bbeaca1d305972733820d361a7c064e
Reviewed-on: https://chromium-review.googlesource.com/765887
Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#516671}
[modify] https://crrev.com/828654a96d8f945a5a2e9dae8ec29c4dbabf3229/third_party/WebKit/Source/devtools/front_end/animation/animationTimeline.css

Project Member

Comment 18 by bugdroid1@chromium.org, Nov 29

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

commit f09b7c63737fcc399e00f6ddcf48add6d0629807
Author: Fredrik Söderquist <fs@opera.com>
Date: Wed Nov 29 15:12:45 2017

WPT tests for the 'transform-box' property

Basic tests for 'fill-box' and 'view-box' with various viewport
configurations.

Bug: 595829
Change-Id: I81ec92e958c5ec240c7932219371b6c5369f5ac5
Reviewed-on: https://chromium-review.googlesource.com/796211
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#520111}
[add] https://crrev.com/f09b7c63737fcc399e00f6ddcf48add6d0629807/third_party/WebKit/LayoutTests/external/wpt/css/css-transforms/transform-box/fill-box.html
[add] https://crrev.com/f09b7c63737fcc399e00f6ddcf48add6d0629807/third_party/WebKit/LayoutTests/external/wpt/css/css-transforms/transform-box/support/greensquare200x200.html
[add] https://crrev.com/f09b7c63737fcc399e00f6ddcf48add6d0629807/third_party/WebKit/LayoutTests/external/wpt/css/css-transforms/transform-box/view-box-nested.html
[add] https://crrev.com/f09b7c63737fcc399e00f6ddcf48add6d0629807/third_party/WebKit/LayoutTests/external/wpt/css/css-transforms/transform-box/view-box-viewbox-nested.html
[add] https://crrev.com/f09b7c63737fcc399e00f6ddcf48add6d0629807/third_party/WebKit/LayoutTests/external/wpt/css/css-transforms/transform-box/view-box-viewbox.html
[add] https://crrev.com/f09b7c63737fcc399e00f6ddcf48add6d0629807/third_party/WebKit/LayoutTests/external/wpt/css/css-transforms/transform-box/view-box.html

Project Member

Comment 19 by bugdroid1@chromium.org, Nov 29

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

commit 66628e19391aac650a35aae340e55cef0bf0e157
Author: Fredrik Söderquist <fs@opera.com>
Date: Wed Nov 29 20:06:27 2017

A 'transform-box' change can yield a different transform

We wouldn't invalidate as needed if the 'transform-box' property changed
its value.

Bug: 595829
Change-Id: Ibcaa9e94b54b99724f2d3e1ca5dedd868d85b776
Reviewed-on: https://chromium-review.googlesource.com/796213
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#520211}
[add] https://crrev.com/66628e19391aac650a35aae340e55cef0bf0e157/third_party/WebKit/LayoutTests/external/wpt/css/css-transforms/transform-box/value-changed.html
[modify] https://crrev.com/66628e19391aac650a35aae340e55cef0bf0e157/third_party/WebKit/Source/core/css/ComputedStyleDiffFunctions.json5

Project Member

Comment 20 by bugdroid1@chromium.org, Nov 29

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

commit f97a28d75c0a71162b58610eadafd1ecc2361f4d
Author: Fredrik Söderquist <fs@opera.com>
Date: Wed Nov 29 21:54:52 2017

Update the computed transform when the reference box changes

When the object bounding box (for 'fill-box') or the viewport (for
'view-box') changes, we need to update the transform as well.
Add a bool to LayoutSVGShape to track if the transform depends on the
reference box, to make checking this quicker.

Bug: 595829
Change-Id: Ie7429553e78b08f7a574b1e7beae30c738250078
Reviewed-on: https://chromium-review.googlesource.com/796271
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/heads/master@{#520259}
[add] https://crrev.com/f97a28d75c0a71162b58610eadafd1ecc2361f4d/third_party/WebKit/LayoutTests/external/wpt/css/css-transforms/transform-box/fill-box-mutation.html
[modify] https://crrev.com/f97a28d75c0a71162b58610eadafd1ecc2361f4d/third_party/WebKit/Source/core/layout/svg/LayoutSVGShape.cpp
[modify] https://crrev.com/f97a28d75c0a71162b58610eadafd1ecc2361f4d/third_party/WebKit/Source/core/layout/svg/LayoutSVGShape.h

Sign in to add a comment