Should width and height apply to nested svg elements as CSS properties #1057
Description
Chromium shipped support in M141 for applying width and height as presentation attributes on nested svg elements, aligning Chrome’s behavior with the SVG 2 specification.
Chromestatus entry: https://chromestatus.com/feature/5178789386256384.
As part of this change, CSS properties such as width and height now correctly affect nested svg elements, making the following two examples render identically:
With CSS Properties for nested <svg> element:
<svg width="100px" height="100px">
<svg style="width:50px;height:50px;">
<circle cx="50px" cy="50px" r="40px" fill="green" />
</svg>
</svg>
Without CSS Properties for nested <svg> element:
<svg width="100px" height="100px">
<svg width="50px" height="50px">
<circle cx="50px" cy="50px" r="40px" fill="green" />
</svg>
</svg>
However, shortly after launch, users began reporting breakages on their sites User reports of a svg size regression [449170647] - Chromium. Many of these pages were relying on incorrect or previously-ignored styling, and once the feature took effect, those styles suddenly applied and caused layout regressions. As such the feature was moved to experimental status in 143.
From an inter op perspective, Firefox and Safari don't support applying CSS properties width and height to nested svg already.
mozilla/standards-positions#1243
WebKit/standards-positions#509
Based on the breakage observed and the UseCounter data https://chromestatus.com/metrics/feature/timeline/popularity/5677, it's fair to say if width and height started applying on nested svg it can cause significant web compatibility issues (layout regressions to be precise).
In that case should we explicitly mention this behaviour in the spec or should an opt-in mechanism be adapted for this feature?