Bug 287638 – Element with `overflow: scroll` does not correctly account for margins of its child to determine the scrollable area with `writing-mode: vertical-rl`

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Antoine Quint]

Look at the attached test case which is this simple HTML and CSS:

```
<style>

#scroller {
    overflow: scroll;
    width: 80px;
    height: 100px;
    writing-mode: vertical-rl;
    background-color: gray;
}

#target {
    margin: 150px;
    width: 50px;
    height: 50px;
    background-color: green;
}
    
</style>

<div id=scroller>
    <div id=target></div>
</div>
```

In Chrome, `scroller.scrollHeight` returns `350` while in ToT as of 290337@main it returns `200`, as if `margin` for the `#target` was `0` and not `150px`.

This affects imported/w3c/web-platform-tests/scroll-animations/css/view-timeline-inset-animation.html.

[Antoine Quint]

Created attachment 474220 [details]
Test

[Radar WebKit Bug Importer]

<rdar://problem/144793456>

[Antoine Quint]

We're updating the affected WPT in https://bugs.webkit.org/show_bug.cgi?id=287790 to not use `margin`. We should however still fix this bug to achieve interoperability with Chrome and Firefox in this area.

[alan]

Created attachment 474245 [details]
Patch

[alan]

Created attachment 474246 [details]
[fast-cq]Patch

[Ahmad Saleem]

*** Bug 287765 has been marked as a duplicate of this bug. ***

[EWS]

Committed 290518@main (88cdc8fdb1bd): <https://commits.webkit.org/290518@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 474246 [details].