Re: [csswg-drafts] [css-overflow-3] Clarify padding in overflow content (#129)

M101 is rolling at the moment for us. I added the tests for the padding edge behaviour in:

https://wpt.fyi/results/css/css-overflow/scrollable-overflow-padding.html?label=master&label=experimental&aligned&q=css-overflow

All of the tests in that file roughly have this form:

```html
<style>
    scrollable-container {
        display: block;
        width: 100px;
        height: 100px;
        overflow: scroll;
        padding: 10px 5px;
    }

    scrollable-container > div {
        width: 200px; height: 0; /* The child has zero area - so shouldn't directly contribute to scrollable overflow. */
        position: relative; left: -1000px; /* Additionally it is rel-pos'd before the scroll origin. */
        margin-right: 50px; /* end margin to push out the padding edge. */
    }
</style>
<scrollable-container data-expected-scroll-width="260">
    <div></div>
 </scrollable-container>
```

The test does this for various writing-mode + direction combinations + block/inline level children.

Currently all the browsers agree on the block direction scrollable overflow tests. The tests check that the behaviour is the same in the inline direction.

Additionally one this I also wanted to clarify was that there was some discussion in the issue that these two cases should behave the same:
```html
<div style="width: 100px; height: 100px; overflow: scroll; padding: 10px;">
   veryveryverylongword
</div>
<div style="width: 100px; height: 100px; overflow: scroll; padding: 10px;">
   <div>veryveryverylongword</div>
</div>
```

These shouldn't behave the same as the alignment rectangle is different for each. E.g. in the 2nd case the <div> is ~100px, rather than the width of the longest word.

If the `<div>` had something like:
```html
<div style="width: 100px; height: 100px; overflow: scroll; padding: 10px;">
   <div style="min-width: min-content;">veryveryverylongword</div>
</div>
```
Then the test cases would behave the same.

Ian

-- 
GitHub Notification of comment by bfgeek
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/129#issuecomment-1113489051 using your GitHub account


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

Received on Friday, 29 April 2022 16:11:00 UTC