This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 16705 - transform-origin with just one argument 'top' or 'bottom' not well defined
Summary: transform-origin with just one argument 'top' or 'bottom' not well defined
Status: RESOLVED FIXED
Alias: None
Product: CSS
Classification: Unclassified
Component: Transforms (show other bugs)
Version: unspecified
Hardware: PC All
: P2 normal
Target Milestone: ---
Assignee: Dirk Schulze
QA Contact: public-css-bugzilla
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2012-04-12 00:53 UTC by Dirk Schulze
Modified: 2012-04-29 14:58 UTC (History)
6 users (show)

See Also:


Attachments

Description Dirk Schulze 2012-04-12 00:53:44 UTC
It is possible to just use one argument for transform-origin that is either 'top' or 'bottom'. But this is partly in conflict with the following wording: 

""
If only one value is specified, the second value is assumed to be ‘center’. If one or two values are specified, the third value is assumed to be ‘0px’.

If at least one of the first two values is not a keyword, then the first value represents the horizontal position (or offset) and the second represents the vertical position (or offset). The third value always represents the Z position (or offset).
""

This implies that 'transform-origin: top' Is as if 'top center' was specified. Actually all browsers interact as if 'center top' was specified (which makes more sense). Maybe the second paragraph could clarify it a bit more.
Comment 1 Aryeh Gregor 2012-04-14 19:20:14 UTC
It could be clearer.  The idea is that due to the first paragraph, "top" is the same as "top center".  This is in turn the same as "center top" -- "top" can only refer to the vertical component, so by process of elimination "center" refers to the horizontal component, regardless of order.

This is how 'background-position' has always worked.  It's instructive to look at how CSS 2.1 defines it: <http://www.w3.org/TR/CSS2/colors.html#propdef-background-position>.  By contrast, I now notice that the keywords aren't defined at all.

We could change the quoted part (and the following paragraph, which was not quoted in comment 0) to something like:

"""
If only one value is specified, the second value is assumed to be ‘center’. If
one or two values are specified, the third value is assumed to be ‘0px’.

If one of the first two values is ‘left‘ or ‘right‘, that represents the horizontal position and the other of the first two values represents the vertical position (regardless of order).  Likewise, if one of the first two values is ‘top‘ or ‘bottom‘, that represents the vertical position and the other represents the horizontal position.  In any other case, the first value represents the horizontal position and the second represents the vertical position.

The third value always represents the Z position.

<percentage> and <length> for the first two values represent an offset of the transform origin from the top left corner of the element's bounding box.  Keywords are the same as the equivalent percentages: ‘left‘ and ‘top‘ are 0%, ‘center‘ is 50%, and ‘right‘ and ‘bottom‘ are 100%.
"""

Or we could just copy CSS 2.1's wording and adapt it for the third coordinate.  That might be less confusing.  I don't think we want to normatively reference CSS 2.1, because percentages mean something different for 'background-position' than for 'transform-origin' (although they're parsed the same).
Comment 2 Dirk Schulze 2012-04-25 23:27:08 UTC
The only thing we want to say is, if it is uncertain which value represents the horizontal or vertical offset, then the horizontal offset comes first. So what about this text:


""
If two or more values are defined and either no value is a keyword, or the only used keyword is '<code style="css">center</code>', then the first value represents the horizontal position (or offset) and the second represents the vertical position (or offset). A third value always represents the Z position (or offset) and must be of type <length>.
""

Any concerns? Otherwise I'll upload this text.
Comment 3 Dirk Schulze 2012-04-29 14:58:01 UTC
Landed the suggested text.