Re: [csswg-drafts] [css-images-4][css-overflow-3] How do `object-overflow` and `object-view-box` interact with `overflow` and `overflow-clip-margin`? (#7144)

Summarizing a discussion I had with @progers in the process of implementing this today that further complicated explaining the interaction between object-overflow and overflow. Turns out SVGs already allow overflow and have the behaviour as specified in option 1.

- By default an SVG clips similar to other replaced elements. The difference is that as opposed to other replaced elements, where developers can not change this behaviour, SVG clipping is applied using a [UA style rule](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/css/svg.css;l=48;drc=c7826f7b27593f326279c1e2b7ffadc185e6b178). A developer can override this to visible to allow the SVG content to overflow. Example:

```
<svg style="border: 1px solid black; width: 200px; height: 200px; overflow: visible;">
  <rect x="100" y="100" width="200" height="200" fill="blue"></rect>
</svg>
```

- overflow:hidden when applied to an SVG element does end up diverging from the behaviour on other elements because replaced contents are clipped at the content edge and the scrollable values are ignored (i.e overflow:scroll is equivalent to overflow:hidden).

It seems like we can encapsulate the behaviour for replaced elements with a combination of overflow property and UA CSS instead of introducing the object-overflow property. The idea is for all replaced elements to respect the overflow property except making it scrollable (similar to SVG). And achieve the special behaviour using UA CSS instead of the new object-overflow property.

Each replaced element will have the following CSS to clip it to content-box by default:
```
overflow: hidden;
overflow-clip-margin: content-box;
```

Some replaced elements would have this set to !important if we want to disallow overflow in general because of security risks highlighted in #7143.

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


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

Received on Tuesday, 5 April 2022 21:48:28 UTC