1702844 - Scrollbar overlaps child, on auto-height "overflow-x:scroll" element with vertical writing mode

Status: NEW

(Core :: Layout: Scrolling and Overflow, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

STR:

1. Load attached testcase.

EXPECTED RESULTS:
You should see the same amount of purple border on all sides of the box.

ACTUAL RESULTS (on platforms where scrollbars take up space):
The purple border is clipped on the bottom. The scrollbar overlaps it.

It looks like we're not including any space for the horizontal scrollbar when determining the intrinsic height of the container here, so it ends up stomping on the children. This would be sort-of normal/expected if the element had overflow-x:auto and we couldn't tell up front whether there would be a scrollbar; but in this case, the element has overflow-x:scroll which is explicitly requesting a scrollbar, so we should allocate some space for it.

Note that Firefox on Mac (with overlay scrollbars) is unaffected; probably Android is unaffected too (haven't tested). This is only a problem on platforms where scrollbars take up space -- i.e. Linux and Windows, as well as some special Mac configurations.

This bug is part of the reason that https://wpt.live/css/css-flexbox/cross-axis-scrollbar.html fails, which is included as part of the compat2021 test set; hence, tagging as blocking the compat2021 metabug.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: semi-reference case (using horizontal writing-mode)

Here's a sort-of reference case, flipped to use a horizontal writing mode (and overflow-y:scroll instead of overflow-x:scroll).

This produces EXPECTED RESULTS. So we've got an asymmetry here where we're doing something wrong in vertical writing modes (and/or when accounting for horizontal-scrollbar height).

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of testcase (left) vs. semi-reference case (right)

Here's a screenshot showing the discrepancy between the two attached cases.