Re: The :min-width/:max-width pseudo-classes

On Sat, Mar 30, 2013 at 5:49 AM, François REMY
<francois.remy.dev@outlook.com> wrote:
> I'm still trying to understand how exactly the <viewport> 'layout-ancestors-to-layout-childs' model is problematic. I may be wrong but it seems to me that
>
>   <div style="width: calc(50% + 1em + 1vh)">
>     <div style="width: calc(50% + 1em + 1vh)">
>       Some content
>     </div>
>   </div>
>
> already requires that you compute the layout of the parent div before you can compute the layout of the inner one, right? In my mental model, I don't see how this is so different in the case of :min-width.

Yes, layout of a child depending on layout of a parent is fine, and
extremely common.

The problems here are (1) selectors depending on layout, so that both
selector resolution and layout have to be multipass, and (2) with the
reference combinator (and other things like :matches() + the subject
indicator), you can have layout of an element depend on non-ancestors,
which means it's impossible to parallelize layout in subtrees in the
general case.

Limiting the selector to only depending on ancestors helps (2), but
Boris points out that this may not be enough - we may need to limit it
to only the nearest viewport.  I think this is likely to be a
perfectly acceptable limitation, as the whole point of having a
viewport is that the children don't need to worry about the outside
world.

This still leaves us with the problem of (1), though, which is
unsurmountable given the basic concept.


> While I'm asking layout questions, can I also ask how browsers are able to get min-content and percentages working properly inside each other?
>
>   <div style='width: 50%; background: blue;'>
>     <div style='width: -webkit-min-content; background: red;'>
>       <div style='width: 50%; background: yellow;'>
>         Some content
>       </div>
>     </div>
>   </div>
>
> Does it imply two successive relayouts (one where percentages are treated as 0, and then another one where they are resolved against the previously detemined value for min-content)? Does it means I can get <iframe seamless>-like 2^n relayouts where n is the number of nested min-content elements?

min-content doesn't require a real layout - you do need to query the
children for their min-content sizes, but that's determined without
any "real" layout going on.  You can also cache the sizing
information.

~TJ

Received on Saturday, 30 March 2013 18:11:51 UTC