Re: aspect-ratio property

On Thu, Jan 5, 2012 at 11:23 AM, Matthew Wilcox <elvendil@gmail.com> wrote:
> I thought that CSS re-flowed constantly while data was being loaded. I
> had assumed that it would see the start of an element, create the
> node, apply  the CSS, download the content of the element applying it
> as it goes, then close the element and could then re-draw?
>
> (I'm not yet far through the article about how browsers work and don't
> know if it covers the process in that much detail)

Hmm, I'm not communicating well.  Let's look at a slightly simpler example:

div {
  width: calc( height * 2 );
  height: auto;
}

Normally, in this sort of situation, CSS will first determine the
element's width (based on its contents and its container), then do a
layout of its contents, and determine the element's height from that.
With the above CSS, though, it cant' do that.  It can't determine its
width until it's figured out the height, but because of the way layout
works (explained in the previous sentence), it can't figure out the
height until it's determined the width, either.

Theoretically, this is a solveable system of constraints.  We could,
for example, try out *every* width until we find one that results in a
height that gives you a 2:1 ratio.  This is not really feasible for
web content, though - iterative layout is *really* slow.  So, in
practice, we're stuck, and have to give up here.

Like I said, 'aspect-ratio' solves this case easily.  Say you have
similar code to the above:

div {
  width: auto;
  height: auto;
  aspect-ratio: calc( 2 / 1 );
}

Here, since both dimensions are auto, aspect-ratio is free to choose
which one to resolve first before applying itself.  It chooses width
(the measure dimension) because that's what you normally do, resolves
the width, and then sets the height accordingly to fit the ratio.
This freedom allows us to sidestep the circularity.


Another benefit of setting aspect-ratio separately is that it can
interact better with other constraints, like min/max-width/height.
For example, take this code:

div {
  width: auto;
  height: auto;
  aspect-ratio: calc( 2 / 1 );
  max-height: 200px;
}

Assume that the div's container is 1000px wide.  Here, aspect-ratio
first resolves width to 1000px, then tries to set height to 500px, but
notes that it's now in violation of max-height.  It then reverses
course, setting height to 200px and width to 400px, and declares
victory.

On the other hand, look at the following code with explicit dependencies:

div {
  width: auto;
  height: calc( width / 2 );
  max-height: 200px;
}

Again, the container is 1000px wide.  The width gets set to 1000px,
and the height is set to 500px.  This is in violation of the
max-height constraint, so it gets corrected to 200px.  You now have a
box with a 5:1 ratio, instead of the intended 2:1.  Attempting to make
the layout algorithm be "smart" about this would be quite a bit of
work, and would probably end up just specifying contradictions in lots
of corner cases.

~TJ

Received on Thursday, 5 January 2012 19:47:53 UTC