[css-overflow] spec text for scrollable end-edge padding needs clarification

[dholbert]

In https://drafts.csswg.org/css-overflow-3/#scrollable , the first bullet-point ("the box’s own content and padding areas") and the fifth bullet-point ("padding on the end-edge side...") need some clarification.

It's not clear to me which of those two bullet points is intended to be responsible for the final 30px of padding creating the scrollable overflow in this example (markup below at [1]):
https://jsfiddle.net/dholbert/w40undve/

Also, the fifth bullet-point needs some clarification about what box the padding is added to, when creating a rect to be unioned. Right now it says "The scrollable overflow area is the union of: [...] * Padding on the end-edge sides of the scrollable overflow rectangle representing the end-side padding applied to the scroll container" . I'm not sure precisely what this bullet-point is calling for, but it sounds a bit like it's asking for us to first determine the scrollable overflow rect per earlier bullet points (including e.g. out-of-flow children that we serve as the CB for, and super-tall grandchildren), and then add the container's end-edge padding to that scrollable overflow. That's not what implementations actually do, though, as shown by this example:
https://jsfiddle.net/dholbert/3vk9nj16/
(the same as my earlier fiddle except that I've added position:absolute to the flex item, basically).

In this second example, the padding does not get added to the overflow area created by the abspos descendant, in Gecko or Chromium or WebKit. So I think we need to be sure to phrase that fifth bullet point such that it doesn't sound like it's calling for that.

[1] Markup for my first jsfiddle above:
CSS:

.flex {
  display: flex;
  height: 100px;
  width: 100px;
  padding-right: 30px;
  padding-bottom: 30px;
  border: 3px solid black;
  background: lime;
  overflow: auto;
}
.item {
  height: 150px;
  width: 150px;
  flex: none;
  background: teal;
}

HTML:

<div class="flex">
<div class="item">
</div>
</div>

[dholbert]

I think my intuition for the expected behavior here is:

• If there is overflow, then the scrolled box (the inner piece that moves when you scroll) is intrinsically sized to the content; it sizes as if it were an auto-sized element with the contents that it's been given (except that percentages resolve against the size of the outer scrolled box, for example).
• This intrinsically-sized-box gives us a content box (or an analog of a content-box) for the inner scrolled frame's contents, basically.
• ...but, the thing that we want to be scrollable is the padding box, in general -- not the content-box (with the exception of inline-end padding on scrollable blocks, for historical reasons; let's forget about that for the moment).
• So: we should inflate this scrolled-frame-"content box" by the scrollframe's padding, and we contribute that to the scrollable area.

Importantly, this box (the one that we inflate by the padding) does not include the final relative positions of relatively-positioned children, nor does it include the boxes of distant overflowing grandchildren, or out-of-flow content. Those things all do individually contribute to the scrollable area, but they don't contribute to the box that we add the padding onto, when we determine how the padding influences the scrollable area, since they're not part of the scrolled frame's "content box"-type thing.

Does this intuition make sense? And does this actually match what the spec says right now? (It doesn't seem to clearly match the spec by my reading, at least.) I think my description above does at least match (or roughly match) what Chromium and WebKit actually do, at least; and it does match what Gecko will soon do as of https://bugzilla.mozilla.org/show_bug.cgi?id=1712875.

[fantasai]

@dholbert If I'm reading your comments right, then yes, that's the intent and the way the spec is trying to say the same thing in this part:

Padding on the end-edge sides of the scrollable overflow rectangle representing the end-side padding applied to the scroll container, added such that its content can be scrolled to a position that would satisfy the requirements of place-content: end alignment.

The first bullet point is referring to the scroll container's padding area as attached to its border. So if a scroll container contained nothing (or only a small thing), the scrollable overflow area would be its entire padding box, not just the part with content.

[frivoal]

I think the spec, @fantasai, @dholbert, and myself are all in agreement, but the current phrasing is really hard to understand, so it needs a bit of rewriting and some notes / examples.

[fantasai]

Fixed in af26469 and 541b8da

@dholbert Do you think this is clear enough? Or should we try to clarify more somehow? :)