RE: [css3-background] background-size and zero length

Argh.  It's been a long day.  I had my oddity case backwards.

Any-who, here's a simpler example to ponder.

Renderings I'm seeing:
- Firefox, Opera, Safari agree to paint the first div with images but they don't agree on what that looks like
- Firefox and Safari fill the second div with images; Opera does not

<html>
<head>
<style>
div {
	background: url(http://www.microsoft.com/favicon.ico) aqua;
	background-size: 1px 100px;
	-moz-background-size: 1px 100px;
	-webkit-background-size: 1px 100px;
	height: 100px;
	width: 100px;
	margin: 10px;
}
div:nth-child(2) {
	background-size: 0.01 100px;
	-moz-background-size: 0.01 100px;
	-webkit-background-size: 0.01 100px;
}
</style>
</head>
<body><div></div><div></div></body>
</html>


-Brian

-----Original Message-----
From: Brad Kemper [mailto:brad.kemper@gmail.com] 
Sent: Wednesday, May 12, 2010 1:03 AM
To: Brian Manthos
Cc: Sylvain Galineau; Boris Zbarsky; www-style@w3.org
Subject: Re: [css3-background] background-size and zero length


On May 12, 2010, at 12:23 AM, Brian Manthos wrote:

> div {
> 	background: url(http://www.microsoft.com/favicon.ico) / 0.00833333330px 100px aqua;
> 	/* Cover IE with Microsoft wallpaper; hide it in Firefox. */
> 	background-size: 100px 100px;
> 	height: 100px;
> 	width: 100px;
> }
> 
> Note that this example doesn't apply directly today because neither Opera nor Firefox appear to support background-size values in the background shorthand no matter what I attempt to throw at them.

In the WG f2f in Cupertino, we (the WG) agreed to some sort of silly restriction on when authors are allowed to use that slash in the shorthand. As I recall, you have to also include the background -position value(s) first, immediately before the slash.

But I'm not bitter or anything about losing that argument. 8¬b

> Namely, IE might see...
> div {
> 	background: url(http://www.microsoft.com/favicon.ico) / 0.00833333330px 100px aqua;
> 	background-size: 100px 100px; /* override the sizing */
> 	height: 100px;
> 	width: 100px;
> }
> 
> ... while Firefox would see ...
> div {
> 	background-size: 100px 100px; /* irrelevant, no image specified */
> 	height: 100px;
> 	width: 100px;
> }

That doesn't track with me. Why would FF throw out the whole shorthand? A zero width image is valid, even if it is invisible. It might even be useful with transitions, for transitioning the size to or from zero. It's just not roundable at zero, and you can fit an infinite number of them on the head of a pin (so don't bother drawing it until it is non-zero).

Received on Wednesday, 12 May 2010 08:33:45 UTC