[csswg-drafts] [css-overflow-3] inline/block start edges should likely refer to a "scroll origin" concept. (#7237)

bfgeek has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-overflow-3] inline/block start edges should likely refer to a "scroll origin" concept. ==
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](https://drafts.csswg.org/css-writing-modes-4/#block-start) or [inline-start](https://drafts.csswg.org/css-writing-modes-4/#inline-start) padding edges, accounting for transforms by projecting each box onto the plane of the element that establishes its [3D rendering context](https://drafts.csswg.org/css-transforms-2/#3d-rendering-context). [[CSS3-TRANSFORMS]](https://drafts.csswg.org/css-overflow-3/#biblio-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
```html
<!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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7237 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 27 April 2022 22:31:37 UTC