W3C home > Mailing lists > Public > www-style@w3.org > August 2012

[css3-intrinsic-sizing] sizing percentage width content in quirks mode

From: Ojan Vafai <ojan@chromium.org>
Date: Wed, 8 Aug 2012 14:25:58 -0700
Message-ID: <CANMdWTs0v3qEx6G2+BJ8DBT_cCDAoScKy8YbHSkAXgkfdQRm9g@mail.gmail.com>
To: www-style@w3.org
http://dev.w3.org/csswg/css3-sizing/ points to
http://www.w3.org/TR/CSS21/visudet.html#float-width for calculating the min
and max preferred widths. The latter text is a bit vague about what exactly
should happen with percentage widths or any of the new intrinsic or
viewport-relative width keywords.

Here are a couple cases that do strange things. I tested in Firefox 14 and
Chrome 22.

1. Both of them ignore percentages widths. The below examples are quirks
mode examples, but percentage widths are ignored in standards mode as well
as best I can tell.
2. Both pay attention to pixel calc values.
3. Gecko respects max-content/min-content when computing the preferred
widths and WebKit does not.

Before I start fixing bugs, what should we do in these cases? It seems to
me that respecting min-content/max-content is a no-brainer. Should we also
respect percentage widths, fill-available and fit-content which depend on
the available width? It's certainly what I would expect as a web developer.
I'm not sure if we can safely change percentages without breaking existing
sites though.


<div style="width: 100px; background-color: salmon">
<div style="display:inline-block; border: 5px solid orange; width:
min-content;">
    foo bar baz foo bar baz
    <div style="display:inline-block; width:calc(35px);">yyy</div>
    <div style="display:inline-block; width: 50%;">zzz</div>
    <div style="display:inline-block; min-width: 50%">xxx</div>
</div>
</div>

<div style="width: 100px; background-color: salmon">
<div style="display:inline-block; border: 5px solid orange; width:
max-content;">
    foo bar baz foo bar baz
    <div style="display:inline-block; width: max-content;">abcdefg
hijklmndop</div>
    <div style="display:inline-block; width: calc(80px);">yyy</div>
    <div style="display:inline-block; width: 50%;">zzz</div>
    <div style="display:inline-block; min-width: 50%">xxx</div>
</div>
</div>
Received on Wednesday, 8 August 2012 21:26:47 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:58 GMT