[css-overflow-3] inline/block start edges should likely refer to a "scroll origin" concept. #7237
Description
https://drafts.csswg.org/css-overflow-3/#scrollable
The border boxes of all boxes for which it is the containing block and whose border boxes are positioned not wholly outside its block-start or inline-start padding edges, accounting for transforms by projecting each box onto the plane of the element that establishes its 3D rendering context. [CSS3-TRANSFORMS]
The inline-start/block-start is close - but not quite sufficient. The spec needs to introduce the concept of a "scroll origin"/"scroll originating corner"/"something". For example:
https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=10262
<!DOCTYPE html>
<div id="target" style="display: flex; flex-direction: column-reverse; overflow: scroll; width: 100px; height: 100px; position: relative;">
no overflow
<div style="background: green; width: 50px; min-height: 200px; position: absolute; top: 400px;"></div>
</div>
<script>
var target = document.getElementById('target');
console.log(target.scrollTop);
console.log(target.scrollHeight);
</script>Here the "scroll origin corner" is the bottom/left. Anything wholly placed below the bottom edge, or to the left of the left edge doesn't contribute to scrollable overflow.
For most things this is the inline/block-start edge, however flex follows the main/cross start edge.
Internally the engines all have this concept represented in some way:
FF: https://searchfox.org/mozilla-central/source/layout/base/nsLayoutUtils.cpp#1535-1555
Blink: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/ng/flex/layout_ng_flexible_box.cc;l=22-36;drc=1d8b1965b96c021ee069a3ebda38be7aaf8a5786;bpv=1;bpt=1
WebKit: https://github.com/WebKit/WebKit/blob/main/Source/WebCore/rendering/RenderFlexibleBox.cpp#L2314-L2330