Re: [csswg-drafts] [css-grid] Percentages and intrinsic size

This is the code for back-computing percentage grid-gaps in Gecko:
http://searchfox.org/mozilla-central/rev/d0448c970093f94bd986a21d3a9e8c366b316eb4/layout/generic/nsGridContainerFrame.cpp#4768
http://searchfox.org/mozilla-central/rev/d0448c970093f94bd986a21d3a9e8c366b316eb4/layout/base/nsLayoutUtils.h#1484

Assume the grid-gap is calc(Apx + B%) and we have N gaps,
then we calculate the intrinsic size (Size) as:
1. let Size = sum all track lengths
2. add Apx * N to Size
3. let Percent = B% * N
4. if Size or Percent is negative goto 7
5. if Percent >= 100% then let Size = "infinity", goto 7
6. let Size = Size / (100% - Percent)
7. if Size is negative let Size be zero

(A or B may be a negative number)

Percentage grid-gaps also affect how we calculate the number of
repeat auto-fill/fit tracks (when the size is auto), that code lives here:
http://searchfox.org/mozilla-central/rev/d0448c970093f94bd986a21d3a9e8c366b316eb4/layout/generic/nsGridContainerFrame.cpp#905
it's basically the same algorithm as above, repeated in a loop
with N=1, N=2 etc until the min/max are satisfied.

All of the above is symmetrical in both axes.

Note that once the intrinsic size is known it is treated as
a definite percentage basis, so for example:

```css
.grid {
  display: inline-grid;
  grid: repeat(2,20px) / repeat(2,20px);
  grid-gap:calc(10px - 10%);
}
```
The content area size of the grid is 50px x 50px, so the final grid-gap
is 10px - (0.1 * 50px) = 5px, which results in a 5px empty space at
the end of the grid.

However, "grid-gap:calc(10px - 50%)" would make the grid-gap negative
so we clamp that to zero.

Some [testcases](https://bugzilla.mozilla.org/attachment.cgi?id=8919970) for the above.

[Rendering in Firefox](https://bugzilla.mozilla.org/attachment.cgi?id=8919971).

(BTW, I'm not claiming our handling of a negative percentage part in calc() is ideal -
I just wanted to document what we're currently doing.)

-- 
GitHub Notification of comment by MatsPalmgren
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/509#issuecomment-337780770 using your GitHub account

Received on Thursday, 19 October 2017 02:21:58 UTC