1110496 - SVG-as-an-image is broken, when used as CSS border-image (slice 9), in 33 -> 34 Update

Status: RESOLVED FIXED

(Core :: Graphics: ImageLib, defect)

Description

[brent.dearth]

Attachment: Broken slice-9 SVG border-image

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.38 Safari/537.36

Steps to reproduce:

Upgraded from 33.0.2 to 34.0.5


Actual results:

Layout using buttons with SVG border image (CSS below) broke with rendering issues. Using a PNG fallback instead renders as expected. Screenshot attached.

CSS:

button {
  border-width: 9px 21px 9px 9px;
  border-image: url('../../assets/vectors/pointy_button_light_turquoise_border.svg') 9   21 9 9 fill stretch;
  box-shadow: none;
  background: none;
  margin-bottom: -3px;
  margin-top: 0px;
  position: relative;
}


Expected results:

Continued to render border-images as with 33.0.2.

Comment 1

[brent.dearth]

Attachment: Sample SVG

Comment 2

[Loic]

Attachment: screenshot-ff34-win7.jpg

It looks fine on my Win 7 machine.
Maybe broken only on OSX?

Comment 3

[Robert Longson [:longsonr]]

Can you attach a proper testcase that shows the issue please?

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (using CSS from comment 0)

I can confirm that this testcase (using the CSS from comment 0) changed its rendering between Firefox 33 & 34.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: screenshot of testcase 1 on linux (firefox 33 top, 34 bottom)

Comment 6

[Daniel Holbert [:dholbert]]

I'm guessing this behavior-change was a result of the image "Draw" API refactoring in bug 1043560; adding regressionwindow-wanted to confirm.

I'm also not sure what the "correct" rendering is here (haven't dug into the exact border-image value & what it calls for), but FWIW, Chrome renders the testcase nicely and stretches the arrow to match the button-size, if you increase e.g. the button 'height' and/or 'width' properties.

Comment 7

[Loic]

Regression range:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=daa84204a11a&tochange=dc352a7bf234

Indeed, bug 1043560 is in the range.

Comment 8

[Daniel Holbert [:dholbert]]

[Tagging seth as probably the best person to look at this, if he has cycles for it.]

Comment 9

[Seth Fowler [:seth] [:s2h]]

FWIW SVG-as-image in border-image was broken in Firefox 33 as well. I realize that it's now broken more, but the implementation has never been correct.

I'll try to find cycles for this but it probably won't be in the next few days.

Comment 10

[Sylvestre Ledru [:Sylvestre]]

Recent regression, tracking.

Comment 11

[Lukas Blakk [:lsblakk] use ?needinfo]

Too late in the 35 cycle for speculative fixes and we're doing our last beta today.

Comment 12

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(bug 619500 covers previous problems with SVG border-images)

Comment 13

[Sylvestre Ledru [:Sylvestre]]

As discussed by email with Seth, he believes that it is not critical bug since it was always broken.
Stop tracking!

Comment 14

[brent.dearth]

FWIW, even if this was somewhat broken in 33, it was not evident in this test case from a user perspective. For all intents and purposes, this test case was working as expected prior to 34.

Comment 15

[Seth Fowler [:seth] [:s2h]]

(In reply to brent.dearth from comment #14)
> FWIW, even if this was somewhat broken in 33, it was not evident in this
> test case from a user perspective. For all intents and purposes, this test
> case was working as expected prior to 34.

Yes, even though SVG-as-image in border-image has always been broken, I agree that this particular test case has regressed. I am still going to fix this regression.

I am mainly trying to avoid a situation where I am forced to implement a new feature (correct support for SVG-as-image in border-image, which we have never had) as a critical regression fix. Without investigating the issue, it's unclear whether a small fix is sufficient, or whether to fix this correctly we really need to fix SVG-as-image in border-image as a whole. That's something we need to do anyway, of course, and it's something we will do, but the process we need to follow there is different from the process we'd follow for something that was just a small patch to fix a regression.

Comment 16

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Note that bug 619500 covers prior brokenness.

Comment 17

[u279076]

Seth, is this issue still on your radar? Is there anything left to do here outside of bug 619500?

Comment 18

[u459114]

Should be fixed after bug 619500 landed. The same root cause -- can not handle SVG-boder-image with viewBox correctly.

Comment 19

[Astley Chen (inactive)]

Based on comment 18, this bug will be fixed along with bug 619500. Tested on latest m-c build[1] and problem was fixed. Change status to resolved.

[1]: https://bugzilla.mozilla.org/show_bug.cgi?id=619500#c83