1778032 - border-image-repeat: repeat; rendering inconsistent with chrome

Status: RESOLVED FIXED

(Core :: Graphics: WebRender, defect)

Description

[jsnkuhn]

Attachment: border-image-repeat-compare.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0

Steps to reproduce:

https://codepen.io/jsnkuhn/pen/PoRPKOz?editors=1100

Actual results:

border-image-repeat: repeat; renders top and bottom borders left aligned and right and left borders top aligned

Expected results:

If i'm reading the spec correctly the left and right borders should be vertically center and the top and bottom borders should be horizontally centered.

https://drafts.csswg.org/css-backgrounds/#border-image-process

a screenshot of the inconsistency is attached

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Graphics: WebRender' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[jsnkuhn]

this might only be an issue with raster images. I added the image as an inline SVG to the border-image-source and now it centers...

Comment 3

[jsnkuhn]

A pen with vector and raster border-images-source side by side for each border-image-repeat. Should make things a bit easier to see
https://codepen.io/jsnkuhn/pen/ExEVrNq

Comment 4

[Andrew Osmond [:aosmond] (he/him)]

It's very interesting that the raster and SVG images paths are so different. I would not have expected that in this case.

Comment 5

[jsnkuhn]

A surprise to me as well. Literally just stumbled on this.

FYI, this isn't just a Firefox thing there's a similar issue with Chrome where border-image-repeat: round; with a vector source doesn't render correctly at certain widths but raster works just fine.

https://bugs.chromium.org/p/chromium/issues/detail?id=1342292

Comment 6

[Simon Pieters [:zcorpan]]

Does this case have a test in web-platform-tests?

Comment 7

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=91314f83cc0d8ca5ab98b01bdbb51fdecc51f5d0&tochange=8f1f4702a5c23ffabc82130854676e0daca2930a

Suspect: d0bb20252591242f871100924701c7c291ae0608 Andrew Osmond — Bug 1409773 - Use WebRender instead of fallback for border raster images. r=jrmuizel

Comment 8

[jsnkuhn]

This is the test for border-image-repeat: repeat; that FF does not currently pass:
https://wpt.fyi/results/css/css-backgrounds/border-image-space-001.html?label=master&label=experimental&aligned&view=subtest&q=border-image

The incorrect rendering of the PNG border-image-source hinges on the second sentence:
"Each of the 4 edges between red diamonds must start and end with a half slice of a blue diamond."

Comment 9

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1409773

Comment 10

[Daniel Holbert [:dholbert]]

(In reply to jsnkuhn from comment #8)

This is the test for border-image-repeat: repeat; that FF does not currently pass:
https://wpt.fyi/results/css/css-backgrounds/border-image-space-001.html?label=master&label=experimental&aligned&view=subtest&q=border-image

The incorrect rendering of the PNG border-image-source hinges on the second sentence:
"Each of the 4 edges between red diamonds must start and end with a half slice of a blue diamond."

I think this was a mis-paste -- we do fail the test linked here, but just for reasons of fuzziness/imprecision; to a first approximation, we render that border-image-space-001.html testcase the same as Chrome does, and the same that we render the reference case. Bug 1820657 is filed on further investigation there.)

The actual relevant WPT test for the behavior described in this bug here (which includes the "half slice of a blue-diamond" quote from comment 8) is this one:
https://wpt.fyi/results/css/css-backgrounds/css3-border-image-repeat-repeat.html
...which is also tracked in bug 1820659.

Comment 11

[Daniel Holbert [:dholbert]]

Let's bump the severity to S3, now that this is interop2023-relevant (via bug 1820659) and has been reported several times.

(We've got ~4 versions of this bug on file, I think (this one, bug 1819485, bug 1819487 and bug 1820659). Not sure which one is the best one to use for fixing, but hopefully aosmond or tnikkel might be the right folks to take a look. :) (Requires WebRender & ImageLib knowledge, I think.))

Comment 12

[Timothy Nikkel (:tnikkel)]

I took a quick look at one of the other bugs. I could have missed something, but it looked like we basically just send the basic CSS info needed to draw the border and the image to webrender and then webrender draws it, including the positioning of the image. So if that understanding is correct the fix would be inside of webrender.

Comment 13

[Nicolas Silva [:nical]]

Attachment: Bug 1778032 - Fix the position of border-image repeat tiles. r=#gfx-reviewers

Comment 14

[BugBot [:suhaib / :marco/ :calixte]]

There is an r+ patch which didn't land and no activity in this bug for 2 weeks.
:nical, could you have a look please?
If you still have some work to do, you can add an action "Plan Changes" in Phabricator.
For more information, please visit BugBot documentation.

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8c932e681e02
Fix the position of border-image repeat tiles. r=gfx-reviewers,gw

Comment 16

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/8c932e681e02