1716442 - css image-rendering not applying to border-image

Status: VERIFIED FIXED

(Core :: Graphics: WebRender, defect)

Description

[jsnkuhn]

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

Steps to reproduce:

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

Actual results:

css border-image renders blury from border-image-size scaling. Attempted to counteract this with css image-rendering: crisp-edges;. Image appearance remained blury and stretched in Firefox.

Expected results:

image-rendering: crisp-edges; should clean up the blury border-image to a pixelated looking state. This is working properly in chrome with image-rendering: pixelated;

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 revert this change in case you think the bot is wrong.

Comment 2

[Timothy Nikkel (:tnikkel)]

We seem to be getting the image rendering value here

https://searchfox.org/mozilla-central/rev/d97dca5907e2a0a77a2435b24ef980268cd3c4fe/layout/painting/nsCSSRenderingBorders.cpp#3640

in the border image rendering code, but it doesn't seem to be taking effect.

Comment 3

[jsnkuhn]

Not sure if this is helpful for triage but... image-rendering does apply to mask-image: https://jsbin.com/vobehaxiqu/edit?html,css,output

So still seems that this bug is specifically an issue with image-rendering and border-image.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1716442 - Apply image-rendering to border-image. r=#gfx-reviewers

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b75104a08cb3
Apply image-rendering to border-image. r=gfx-reviewers,mstange

Comment 6

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

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

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f8bd89f87dce
Follow-up: Fix wrench bustage.

Comment 8

[jsnkuhn]

Hey all, thanks for looking at this! Should let you know that the border-image-source linked in that Codepen is a dialog border from Chrono Trigger on the SNES so for copyright reasons it should probably be replaced if your going to make a WPT. Will attach a similar image without the copyright issues.

Comment 9

[jsnkuhn]

Attachment: small-border.png

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/da5523522f5f
Avoid using copyrighted image in the test for this bug. DONTBUILD

Comment 11

[Emilio Cobos Álvarez (:emilio)]

(In reply to jsnkuhn from comment #8)

Hey all, thanks for looking at this! Should let you know that the border-image-source linked in that Codepen is a dialog border from Chrono Trigger on the SNES so for copyright reasons it should probably be replaced if your going to make a WPT. Will attach a similar image without the copyright issues.

Thank you!

Comment 12

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/b75104a08cb3
https://hg.mozilla.org/mozilla-central/rev/f8bd89f87dce
https://hg.mozilla.org/mozilla-central/rev/da5523522f5f

Comment 13

[jsnkuhn]

can confirm border-image is no longer blurry in Firefox Nightly!

Comment 14

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

Upstream PR merged by moz-wptsync-bot

Comment 15

[Ciprian Georgiu, Desktop QA]

I've reproduced the bug using an affected Nightly build, 91.0a1 (20210614215408). Tested with STR from comment 0, on macOS 11.

The issue is verified as fixed on latest Beta 97.0b8, across platforms: Win 10 x64, macOS 11 and Ubuntu 18.04 x64.