[css-overflow-3] Reserved scroller space between content edge and padding edge #11288
Description
The CSS Overflow 3 spec, Section 4.1 states:
When reserving space for a scrollar placed at the edge of an element’s box, the reserved space is inserted between the inner border edge and the outer padding edge.
Test:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
article {
border: 10px solid red;
width: 200px;
height: 200px;
position: relative;
overflow: scroll;
padding-right: 50px;
}
aside {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<article>
<aside>ASIDE</aside>
<p>Text1</p>
<p style="text-align: right;">Text2</p>
</article>
</body>
</html>In Chrome DevTools, the scrollbar appears between the content box edge (inner edge) and the padding box edge, not between the inner border edge and outer padding edge as specified.
