- 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