Re: [css-sizing] Minimum preferred width of replaced content with percentage width

"Tab Atkins Jr." <jackalmage@gmail.com> writes:

> On Mon, Sep 1, 2014 at 11:36 PM, Morten Stenshorne <mstensho@opera.com> wrote:
>> Hello,
>>
>> <div style="display:table-cell; width:200px;">
>>     <img src="http://home.powertech.no/mstensho/gfx/bilen.jpg" style="width:50%;">
>> </div>
>>
>> All browsers (as far as I know) agree that the used width of the image
>> above be set to 100px. This is because they set min-content-size
>> (minimum preferred width) of replaced content to 0 (but keep
>> max-content-size at intrinsic size), if the specified width is a
>> percentage. This way the desired width of the table-cell is kept at
>> 200px (and not overridden by child content thought to be wider).
>>
>> But I cannot find anything suggesting this behavior in the css-sizing
>> spec (and certainly not in CSS 2.1). Should it be added somewhere, or
>> have I missed something?
>>
>> The intrinsic width of the image in the snippet above is 300px. Without
>> the percentage detail in the spec, one would think that the correct
>> behavior should be to set min-content-size to 300px, which would force
>> the table cell to become 300px wide (and then the used width of the
>> image would be 50% of this - i.e. 150px). But no browser does this.
>>
>> Tables work in mysterious ways. :) Let's use regular shrink-to-fit tests
>> instead. Still the same issue. Here are two tests that pass in all
>> browsers, but the behavior in the first one isn't covered in the spec:
>
> Tables are indeed interesting.  However, I know that fantasai and I
> aren't sure about our handling of replaced elements in Sizing
> currently.  We'd be happy to fix when we understand what is the
> correct behavior. ^_^

Sounds good. :)

At the end of http://dev.w3.org/csswg/css-sizing/#replaced-intrinsic you
could add something like: "However, if the specified size is a
percentage, min-content size is 0".

>> This image should be 5px wide:
>> <div style="width:10px;">
>>     <div style="float:left;">
>>         <img src="http://home.powertech.no/mstensho/gfx/bilen.jpg" style="width:50%;">
>>     </div>
>> </div>
>>
>> This image should be 150px wide:
>> <div style="width:1000px;">
>>     <div style="float:left;">
>>         <img src="http://home.powertech.no/mstensho/gfx/bilen.jpg" style="width:50%;">
>>     </div>
>> </div>
>
> I'm not sure I understand why the first one fails.

It doesn't fail in any browser that I know of, but it should, according
to the spec.

> floats are sized to fit-content, right?  That means they take the
> available space as a max constraint,

A max constraint against max-content width, but not against min-content
width.

> so even if its preferred width is 300px (due to that being the
> max-content width of their content

AND min-content width will be 300px according to the spec (but not
according to the browsers).

>), it'll get set to 10px wide, which will then resolve the percentage
>to 5px.

shrink-to-fit size: min(max(available size, min-content size), max-content size)
According to the spec: min(max(10px, 300px), 300px) = 300px
According to all browsers: min(max(10px, 0), 300px) = 10px

-- 
---- Morten Stenshorne, developer, Opera Software ASA ----
------------------ http://www.opera.com/ -----------------

Received on Tuesday, 2 September 2014 17:51:24 UTC