W3C home > Mailing lists > Public > www-style@w3.org > February 2012

RE: [css3-2d-transforms][css3-images] <position> grammar is duplicated or points to the wrong spec

From: Brian Manthos <brianman@microsoft.com>
Date: Fri, 3 Feb 2012 09:44:53 +0000
To: fantasai <fantasai.lists@inkedblade.net>
CC: "www-style@w3.org" <www-style@w3.org>, "L. David Baron" <dbaron@dbaron.org>, Tab Atkins Jr. <jackalmage@gmail.com>
Message-ID: <9710FCC2E88860489239BE0308AC5D170EB32C6E@TK5EX14MBXC264.redmond.corp.microsoft.com>
> > http://www.w3.org/TR/css3-background/#background-position

> >  # Percentages:  refer to size of background positioning area minus size
> >  #               of background image; see text

# <percentage>
# A percentage for the horizontal offset is relative to
# (width of background positioning area - width of background image).
# A percentage for the vertical offset is relative to
# (height of background positioning area - height of background image),
# where the size of the image is the size given by ‘background-size’.

Let's take Example IX, and flesh it out a little:
	div {
		background-position: 75% 50%; /* A1 */
		background-repeat: no-repeat;
		background-size: 100px 100px;
		border: 0px;
		padding: 0px;
		width: 200px;
		height: 200px;

The example shows that (75px, 50px) in the image should align with (150px, 100px).

Thus, an equivalent value for rendering purposes would be:
(A2)	background-position: 75px 50px;

Now let's compare with calc.

	div {
		background-position: calc(75%) calc(50%); /* B1 */
		background-repeat: no-repeat;
		background-size: 100px 100px;
		border: 0px;
		padding: 0px;
		width: 200px;
		height: 200px;

As we discussed previously (read: last week), CSS Values (unless someone edited it within the last week) allows for the calc to be used instead of an explicit <length> but not instead of an explicit <percentage>.  Thus, combined with the grammar for background-position this is the same as...

	background-position: calc-resolved-as-length-horizontal(75%) calc-resolved-as-length-horizontal(50%);

... and thus ...

	background-position: calc(width-as-length * 0.75) calc(height-as-length * 0.50)

... and finally ...

(B2)	background-position: 150px 100x;

Observe that (A2) and (B2) are different.  Unless I misunderstood, David believes that A1 and B1 should behave the same and that the spec should change to match that belief.  I disagree.

Even though I disagree, I offered what I thought was the right way to introduce that proposed behavior if the WG wants to go along with that unusual design.  Tab disagreed and offered a different approach, an approach which I think is bad for CSS both in the specific case *and* because it sets a troubling precedent for CSS design overall.

That catches you up pretty much, I think, Elika.

Rather than completely rehash my previous commentary fully, I'll just offer some links:









Received on Friday, 3 February 2012 09:46:21 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:55 UTC