1565557 - [resize-observer] svg interaction

Status: RESOLVED FIXED

(Core :: SVG, enhancement, P3)

Description

A resolution was made for csswg-drafts/#4032.

[resize-observer] svg interaction

• RESOLVED: svg elements generating css layout boxes are included as part of resize observer and resize observer rectangles with a definition of `svg:root, *:not(svg|*) > svg, svg|foreignObject > svg { /* SVG elements with CSS layout box */

Discussion.

Comment 1

[Di Weng]

This is still an impacting issue. MDN indicates that ResizeObserver supports the bounding box of an SVG Element, but this does not work in Firefox.

Here is a demo: https://codepen.io/w1ndy/pen/zYWdNWZ. Resizing the output view only fires the event for the container element, but not for the SVG element.

Comment 2

[Daniel Holbert [:dholbert]]

CC'ing dshin who's been looking at some ResizeObserver improvements recently, in case he has cycles/interest to look at this.

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to mystery.wd from comment #1)

This is still an impacting issue. MDN indicates that ResizeObserver supports the bounding box of an SVG Element, but this does not work in Firefox.

Just to clarify the current state of things: are you seeing this work as-expected in any browser?

I tested Chrome 105 and Safari 15.5, and they seem to only fire the event for the container element, too, if I'm correctly interpreting the console.log output from your codepen testcase when I resize it.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

The box we use for SVG elements is the bounding-box, which is zero for that SVG in the codepen (svg.getBBox() is all zeros).

Here's the SVG specific handling for the record.

Comment 5

[Daniel Holbert [:dholbert]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)

The box we use for SVG elements is the bounding-box, which is zero for that SVG in the codepen (svg.getBBox() is all zeros).

(right -- and I think the intent of the CSSWG resolution is: for "outer" <svg> elements (SVGOuterSVGFrame essentially, i.e. this frame class), we should be making ResizeObserver use its CSS layout box -- the same box we use for regular html/css content -- instead of its bounding box.)

Here's the SVG specific handling for the record.

Nice -- yeah, we probably want to add a frame->IsSVGOuterSVGFrame() exception or special-case somewhere around there.

Comment 6

[Di Weng]

Thanks :emilio and :dholbert!

(In reply to Daniel Holbert [:dholbert] from comment #3)

Just to clarify the current state of things: are you seeing this work as-expected in any browser?

No, I've tested in the latest Chrome and Edge, and this case doesn't work either.

However, I've came to realize that this behavior actually conforms to the spec because the resolution mentioned above hasn't been incorporated into the spec yet. I've submitted a PR here to track the spec update.

Comment 7

[David Shin[:dshin]]

Attachment: Bug 1565557: ResizeObserver for SVG elements with CSS layout boxes use the layout boxes. r=#layout-reviewers

As per the CSSWG resolution here: https://github.com/w3c/csswg-drafts/issues/4032
Previously, any and all SVG elements used its SVG object bounding box. Now, SVG
elements that have their own CSS layout box use them. These match the following
CSS rules: svg:root, *:not(svg|*) > svg, svg|foreignObject > svg

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/742e5698d74f
ResizeObserver for SVG elements with CSS layout boxes use the layout boxes. r=emilio

Comment 9

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/35437 for changes under testing/web-platform/tests

Comment 10

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/742e5698d74f

Comment 11

[Web Platform Test Sync Bot (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot