1916030 - Firefox fails to paint svg-as-an-image, if the svg element has a width or height of 0 and no viewBox

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[Daniel Holbert [:dholbert]]

Filing this as the underlying defect behind our WPT failure in bug 1906145.

Essentially, if an SVG image lacks a viewBox, and has a zero-sized width or height, then I think we synthesize a zero-sized viewBox from its width and height, and that means we don't paint anything when the image draws (because we scale up a zero-sized area to fill the image element's bounds, or something like that).

Other browsers do in fact paint in this case, though -- I suspect because they just decline to synthesize a viewBox from the SVG image's height and width, and they instead just use a viewBox based on the area that we're rendering to (the image element), or something along those lines.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (<svg> has width=0)

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (<svg> has height=0)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 3 (<svg> has width and height both set to 0)

Comment 4

[Daniel Holbert [:dholbert]]

In all three testcases, we fail to paint the SVG in the top half of the testcase, whereas other engines reliably paint (when there's area to be painted).

Specifically:

• Firefox renders the top half with no cyan (i.e. not painting any content from the SVG image)
• Chromium renders the the top half with cyan backgrounds (for the img elements that are nonzero-sized).
• WebKit renders the top half with cyan backgrounds. (They also render all the img elements as being nonzero-sized, which disagrees with us and Chrome -- this sizing behavior is probably a WebKit bug).

Comment 5

[Daniel Holbert [:dholbert]]

When fixing this, I plan to include (possibly-evolved-a-bit) versions of those 3 testcases as WPTs, along with similar tests for <embed>, <svg:image>, SVG-as-a-background-image-with-background-size, etc. (in all cases having width and/or height set to 0 on the <svg> element, but nonzero width and/or height on the embedding context).

Comment 6

[Daniel Holbert [:dholbert]]

Try run with implementation changes, but still needing some new tests:
https://treeherder.mozilla.org/jobs?repo=try&revision=1b3d051ece5df8981c7ce4c7271444e7786e3ef0

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: Bug 1916030 part 1: Spin off a helper function for testing whether an <svg> element's width & height are both either unset or set to a positive value. r?#layout,#svg

This patch doesn't change behavior; it's just moving existing logic to a helper
function, so that the next patch in the series can add an additional use of
this helper-function.

Comment 8

[Daniel Holbert [:dholbert]]

Attachment: Bug 1916030 part 2: Decline to synthesize a viewBox for SVG-as-an-image, if the synthesized viewBox would be zero-sized (which would prevent painting). r?#layout,#svg

Comment 9

[Daniel Holbert [:dholbert]]

Attachment: Bug 1916030 part 3: Add WPT to test for viewBox synthesis in SVG-as-an-image with specified width and/or height. r?#layout,#svg

As discussed in (ancient) bug 614649: for SVG images that have a specified
'width' and/or 'height' on their root <svg> element, we need to synthesize a
viewBox using that width and/or 'height', in order for the SVG content to scale
up or down to fill an <img> element of a different size (rather than just
rendering at its native resolution into a viewport of that size, padding or
clipping its coordinate space).

But notably, we should not synthesize a viewBox if either 'width' or 'height'
are 0 (or 0%), because a 0-sized viewBox would result in nothing being
painted. That's the main thing that this new testcase is focusing on testing.

Comment 10

[Daniel Holbert [:dholbert]]

Attachment: Bug 1916030 part 4: Add variant of WPT to ensure that we decline to synthesize a viewBox for SVG-as-an-image if the root node has a negative width or height. r?#layout,#svg

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4fafa6c67ac8
part 1: Spin off a helper function for testing whether an <svg> element's width & height are both either unset or set to a positive value. r=firefox-svg-reviewers,longsonr
https://hg.mozilla.org/integration/autoland/rev/010466b2a459
part 2: Decline to synthesize a viewBox for SVG-as-an-image, if the synthesized viewBox would be zero-sized (which would prevent painting). r=firefox-svg-reviewers,longsonr
https://hg.mozilla.org/integration/autoland/rev/081370c77dc9
part 3: Add WPT to test for viewBox synthesis in SVG-as-an-image with specified width and/or height. r=firefox-svg-reviewers,longsonr

Comment 12

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

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

Comment 13

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/4fafa6c67ac8
https://hg.mozilla.org/mozilla-central/rev/010466b2a459
https://hg.mozilla.org/mozilla-central/rev/081370c77dc9

Comment 14

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

Upstream PR merged by moz-wptsync-bot