Percentage sizing of replaced elements

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Percentage sizing of replaced elements

Boris Zbarsky
Consider the following testcase:

<table width="400" border=1>
   <tr>
     <td style="width: 80%"></td>
     <td style="width: 20%">
       <img style="width: 100%"
            src="https://www.mozilla.org/images/header_logo.gif">
     </td>
   </tr>
</table>

On trunk, the image ends up about 80px wide.  On reflow branch, it ends up at
its intrinsic width.

For some form controls that had similar issues I duplicated the hack from bug
40596 -- set intrinsic min width to 0 if the style width is not auto.  Is that
what we want to be doing here for images?  Should we be doing that for replaced
inlines in general, perhaps?  Right now, we do it for text controls, buttons,
and comboboxes (but NOT listboxes)...

What happens as things stand is that the second column ends up with an intrinsic
min width equal to the image's intrinsic width, and then the width constraint on
the whole table effectively makes the situation overconstrained so we ignore the
20% thing.

-Boris
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Percentage sizing of replaced elements

Chris Hubick
On Tue, 08 Aug 2006 11:18:04 -0500, Boris Zbarsky wrote:

> <table width="400" border=1>
>    <tr>
>      <td style="width: 80%"></td>
>      <td style="width: 20%">
>        <img style="width: 100%"
>             src="https://www.mozilla.org/images/header_logo.gif">
>      </td>
>    </tr>
> </table>
>
> On trunk, the image ends up about 80px wide.  On reflow branch, it ends
> up at its intrinsic width.
>
> For some form controls that had similar issues I duplicated the hack
> from bug 40596 -- set intrinsic min width to 0 if the style width is not
> auto.  Is that what we want to be doing here for images?

I thought intrinsic width was only used in the 'auto' case?  When you
explicitly set the width on a block-level replaced element in such a
fashion, does that not imply that any intrinsic width has thus been
overridden and will be ignored?  In my (very limited) understanding of
CSS, I would have expected such, and wouldn't have interpreted it as
over-constrained myself.  I would expect the width of the image to be
scaled up or down to 80px, and barring other constraints, I would also
then expect the intrinsic min/pref height of the image to be set based on
the 80px used width, scaled by the intrinsic ratio.  What am I missing?

--
Chris Hubick
mailto:[hidden email]
http://www.hubick.com/

_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Percentage sizing of replaced elements

Chris Hubick
On Tue, 08 Aug 2006 13:31:04 -0600, Chris Hubick wrote:
> I would expect the width of the image to be scaled up or down to 80px,
> and barring other constraints, I would also then expect the min/pref
> height of the image to be set based on the 80px used width, scaled by
> the intrinsic ratio.

FMP (Had an extra 'intrinsic' in there)

To clarify:  I guess what I am curious about is... does setting the min
intrinsic width to 0 have any effect on intrinsic ratio calculations WRT
the intrinsic height?

--
Chris Hubick
mailto:[hidden email]
http://www.hubick.com/

_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Percentage sizing of replaced elements

Boris Zbarsky
In reply to this post by Chris Hubick
Chris Hubick wrote:
> I thought intrinsic width was only used in the 'auto' case?

Intrinsic min width is also needed for tables because they're not allowed to
overflow...

> When you explicitly set the width on a block-level replaced element in such a
> fashion, does that not imply that any intrinsic width has thus been
> overridden and will be ignored?

Not for tables.

> I would expect the width of the image to be scaled up or down to 80px

This is the question.  Should it be?  On trunk it is; on reflow branch it
currently is not.

I thought about it some more, and it seems that what we may really want is for
IntrinsicForContainer to report a min of 0 for percentage widths (or at least
percentage widths of replaced elements?).  And there's already an XXX comment to
this effect.

-Boris
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Percentage sizing of replaced elements

Boris Zbarsky
In reply to this post by Chris Hubick
Chris Hubick wrote:
> To clarify:  I guess what I am curious about is... does setting the min
> intrinsic width to 0 have any effect on intrinsic ratio calculations WRT
> the intrinsic height?

No.  They use the actual intrinsic dimensions of the image, not the intrinsic as
reported to the parent.

-Boris
_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout
Reply | Threaded
Open this post in threaded view
|

Re: Percentage sizing of replaced elements

L. David Baron
In reply to this post by Boris Zbarsky
On Tuesday 2006-08-08 11:18 -0500, Boris Zbarsky wrote:

> <table width="400" border=1>
>   <tr>
>     <td style="width: 80%"></td>
>     <td style="width: 20%">
>       <img style="width: 100%"
>            src="https://www.mozilla.org/images/header_logo.gif">
>     </td>
>   </tr>
> </table>
>
> On trunk, the image ends up about 80px wide.  On reflow branch, it ends up
> at its intrinsic width.
I need to look into issues with percentages and intrinsic widths and a
bunch of other things.  Writing good testcases for that stuff, fixing
the code, and writing spec text for it is on the top of my list of
things to do.

-David

--
L. David Baron                                <URL: http://dbaron.org/ >
           Technical Lead, Layout & CSS, Mozilla Corporation

_______________________________________________
dev-tech-layout mailing list
[hidden email]
https://lists.mozilla.org/listinfo/dev-tech-layout

attachment0 (196 bytes) Download Attachment