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

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:

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>

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

Received on Tuesday, 2 September 2014 06:36:40 UTC