Bug 246533

Summary: Unable to resize container with shadow DOM container query
Product: WebKit Reporter: Noah Liebman <noah>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: karlcow, koivisto, rniwa, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 16   
Hardware: Mac (Intel)   
OS: macOS 12   
Bug Depends on:    
Bug Blocks: 148695    
Attachments:
Description Flags
rendering in Safari, chrome, firefox none

Description Noah Liebman 2022-10-14 13:08:27 PDT 
When a container contains a web component that uses a container query (e.g., `container-type: inline-size`) in its shadow DOM, it’s not possible to resize the container with the CSS `resize` property. It works in Edge and Chrome.

Demo: https://codepen.io/noleli/pen/jOxJVPw
Comment 1 Karl Dubost 2022-10-21 01:34:30 PDT 
Created attachment 463140 [details]
rendering in Safari, chrome, firefox

* Safari  can't drag to resize
* Chrome  can drag to resize AND it changes color
* Firefox can drag to resize AND it DOES NOT change color
Comment 2 Noah Liebman 2022-10-21 09:27:30 PDT 
Thanks for the breakdown. To clarify, it doesn’t change color in Firefox because Firefox doesn’t support container queries yet. (It’s behind a flag `layout.css.container-queries.enabled`, but still has some issues.)
Comment 3 Radar WebKit Bug Importer 2022-10-21 13:09:18 PDT 
<rdar://problem/101438469>