Support the overflow property

[nicoburns]

What problem does this solve or what need does it fill?

Layout of UI containing scrollable regions.

What solution would you like?

Taffy should not implement support for scrolling itself (the actual scroll offset). But it should implement support for layout for nodes that are scrollable:

• Add new style property Overflow, which can be controlled independently in each axis.
• Support Overflow::Hidden #424
  • If a flexbox or grid item has overflow: hidden (or scroll or auto) in a given axis then it's automatic minimum size can be assumed to be zero (this is partly a performance optimisation, but it can also affect layout).
• Support Overflow::Scroll #446
  • If a node has overflow: scroll in a given axis and scrollbar-width is greater than 0, then space for a scrollbar should be set aside in the opposite axis (vertical scrolling requires a scrollbar that takes up horizontal space). This space should also be added to it's content size for the purpose of intrinsic sizing.

[adjabaev]

I came across a usecase where I would need this, which made me wondering about what this PR would imply on the test side as nodes specifying "scroll" or "hidden" overflows might have a content size that might differ from the actual shown size. Which may lead to larger assertions. (I might aswell be overthinking this but I tough the thinking was interesting)

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight

Here would be a sample test (not very generic as it implies gap & flex, but it demonstrates my point)

<div id="test-root" style="display: flex; flex-direction: column; width: 100px; height: 100px; gap: 50px; overflow: scroll;">
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 50px;"></div>
  <div style="width: 50px; height: 50px;"></div>
</div>

[nicoburns]

After looking into this some more I have the following conclusions:

• The main difference that overflow makes to layout is reserving space for scrollbars. This happens only if:
  • "classic scrollbars" are being used (not overlay scrollbars that don't take up space like macOS)
  • And:
    • Overflow is scroll
    • Overflow is auto and the content actually overflows. Relayout occurs in this case, taking into the scrollbar's space in the second layout
• It would make sense to support the scrollbar-width property along with overflow.
• We could potentially initially get away with only supporting scrollbar-width (and getting the user to set it to 0 for overflow: hidden). This would pretty much cover the overflow: hidden and overflow: scroll cases. For overflow: auto we'd also need the overflow property and to implement the relayout where scrollbars are required.

There is also this in Yoga "The W3C spec doesn't say anything about the 'overflow' property, but all major browsers appear to implement the following logic". But I haven't determined exactly what the effect of this code is yet. It doesn't look like it would make a huge difference, but it might be nice to support anyway.

[nicoburns]

There is an additional effect of overflow: hidden | scroll that I missed in my previous comment: it causes the "automatic minimum size" of flex/grid children to be zero (in the axis that overflow is set).

[nicoburns]

Splitting Overflow::Auto into a separate issue and closing this as complete.