Re: [css3-images][css3-background] Specify "CSS View Box" in B&B

fantasai <fantasai.lists@inkedblade.net> skreiv Tue, 20 Dec 2011 05:19:11  
+0100

> On 02/08/2011 06:51 AM, Leif Arne Storset wrote:
>> This is somewhat related to yesterday's border-image discussion [0].  
>> Brad and Tab seem to say that the the rendering for
>> dimensionless background images is clear, but I think it needs a little  
>> bit of work.

I must admit that me@{11 months ago} will not win any prizes for clear  
prose [1]. But I think I managed to puzzle out what I was talking about.  
Actually, it's good you bring it up, fantasai, because Firefox changed  
behavior sometime between 3.6 and 8.0, and now follows the spec, but  
conflicts with WebKit (and what Opera eventually released, and IE 10  
platform preview).

My original attachment (new and improved version is attached) has a  
background-image gradient and "background-size: 60px" in a box 200px wide  
and 100px tall. Correct me if I'm wrong, but according to the current spec  
the gradient should be rendered in a box 60px wide and 100px tall, whereas  
WebKit, Presto, Trident and Firefox 3.6.25 render in a box 30px tall. This  
is my reasoning:

5.2.  CSS⇋Object Negotiation (excerpt) [2]:

| 2. Using the intrinsic dimensions, the specified size, and the default
|    object size for the context the image or object is used in, CSS then
|    computes a concrete object size. (See the following section.) This
|    defines the size and position of the region the object will render in.

5.3.  Default Concrete Object Size Resolution (excerpt):

| In the absence of more specific rules, an object's intrinsic dimensions
| are resolved to a concrete object size as follows:

[snip]

| * If the specified size has only a width or height, but not both, then
|   the concrete object size is given that specified width or height.
|   The other dimension is calculated as follows:
|
|   1. If the object has an intrinsic aspect ratio [snip; no intrinsic
        aspect ratio]
|   2. Otherwise, if the missing dimension is present in the object's
|      intrinsic dimensions [snip; no intrinsic dimensions]
|   3. Otherwise, the missing dimension of the concrete object size is
|      taken from the default object size.

5.1.  Object-Sizing Terminology (excerpt from definition of "default  
object size"):

| ‘background-image’
|     The default object size is the size of the element's background
|     positioning area. [CSS3BG]

Since background-origin is not specified in this example, the BPA is the  
padding box, which is 100px tall. Thus, concrete object height = padding  
box height.

> Leif, would you mind reviewing http://dev.w3.org/csswg/css3-images/ and
> letting me know if there's still an issue? If so, I'm not entirely clear
> on what it is...

We need to decide whether we want to keep the currently-specced behavior  
(if my understanding of it is correct) and file bugs against WebKit,  
Presto and Trident, or whether we only file bugs against Gecko after  
changing 5.3 so that the missing dimension is calculated using the  
specified dimension and the aspect ratio of the default object size.

I recommend changing the Images spec to match the majority of  
implementations; it makes gradients behave quite similarly to raster  
images, and if the author really wants 100% in one dimension he or she can  
just specify that.

The downside is that this would override the B&B spec [3]. Also, it could  
be argued that keeping the spec as it is is more logical; if gradients  
have no intrinsic ratio, why pull one from the BPA?

[0] http://lists.w3.org/Archives/Public/www-style/2011Feb/0170.html
[1] http://lists.w3.org/Archives/Public/www-style/2011Feb/0229.html
[2] http://dev.w3.org/csswg/css3-images/#object-negotiation
[3] http://dev.w3.org/csswg/css3-background/#auto
[CSS3BG] http://www.w3.org/TR/2011/CR-css3-background-20110215

-- 
Leif Arne Storset
Core Technology Developer, Opera Software
Oslo, Norway