- From: Morten Stenshorne <mstensho@opera.com>
- Date: Tue, 02 Sep 2014 19:50:54 +0200
- To: "Tab Atkins Jr." <jackalmage@gmail.com>
- Cc: www-style list <www-style@w3.org>
"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