- 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>
> > 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:
http://lists.w3.org/Archives/Public/www-style/2012Jan/1047.html
http://lists.w3.org/Archives/Public/www-style/2012Jan/1052.html
http://lists.w3.org/Archives/Public/www-style/2012Jan/1056.html
http://lists.w3.org/Archives/Public/www-style/2012Jan/1065.html
http://lists.w3.org/Archives/Public/www-style/2012Jan/1071.html
http://lists.w3.org/Archives/Public/www-style/2012Jan/1074.html
http://lists.w3.org/Archives/Public/www-style/2012Jan/1075.html
http://lists.w3.org/Archives/Public/www-style/2012Jan/1079.html
Cheers,
-Brian
Received on Friday, 3 February 2012 09:46:21 UTC