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

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. ^_^

> 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.  floats are sized
to fit-content, right?  That means they take the available space as a
max constraint, so even if its preferred width is 300px (due to that
being the max-content width of their content), it'll get set to 10px
wide, which will then resolve the percentage to 5px.

~TJ

Received on Tuesday, 2 September 2014 15:51:25 UTC