Closed Bug 1902253 Opened 5 months ago Closed 4 months ago

canvas composition ops not working correctly with emoji filltext

Categories

(Core :: Graphics: Canvas2D, defect)

Product:
Core
Component:
Graphics: Canvas2D
Version:
Firefox 126
Type:
defect

Tracking

()

Status:
RESOLVED FIXED
Milestone:
129 Branch
Tracking Flags:
Tracking Status
firefox-esr128 --- fixed
firefox129 --- fixed

People

(Reporter: axkibe, Assigned: jfkthame)

Details

Attachments

(7 files)

reporters Standalone testcase.html
406 bytes, text/html
Details
test for canvas composition operations vs color glyphs
1.17 KB, text/html
Details
Bug 1902253 - When the compositing mode is not OVER, we must first render the color glyph to a temporary surface, then composite it with the appropriate operator. r=#gfx-reviewers
48 bytes, text/x-phabricator-request
Details | Review
comparison of current Nightly vs patched build
309.58 KB, image/png
Details
Bug 1902253 - Add a reftest for COLR-glyph compositing modes. r=#gfx-reviewers
48 bytes, text/x-phabricator-request
Details | Review
Bug 1902253 - When the compositing mode is not OVER, we must first render the color glyph to a temporary surface, then composite it with the appropriate operator.
48 bytes, text/x-phabricator-request
phab-bot
: approval-mozilla-esr128+
Details | Review
Bug 1902253 - Add a reftest for COLR-glyph compositing modes.
48 bytes, text/x-phabricator-request
phab-bot
: approval-mozilla-esr128+
Details | Review

Steps to reproduce:

Open following minimal example

<html>
<script>
window.onload = ( ) => {
const cv = document.getElementById('canvas');
const cx = cv.getContext('2d');
cx.fillStyle='#888888';
cx.fillRect(0,0,200,200);

cx.globalCompositeOperation='destination-in';
cx.fillStyle='black';
cx.font = '200px sans-serif';
cx.fillText('\u{1F63A}',40,180);
};
</script>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
</body>
</html>

Actual results:

canvas is blank.

Expected results:

a gray cat to be visible (as in chromium). Purpose removing the color from the color emoji.

This can be worked around by just drawing the emoji first using source-over in another off screen canvas and using that for drawImage( ) using destionation-out composite.

I get this is extremely important and a totally common usecase :) Anyway, could be fixed, albeit I worked around it.

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

Component: Untriaged → Graphics: Canvas2D
Product: Firefox → Core
Status: UNCONFIRMED → NEW
Ever confirmed: true

Bisection:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=9b23d1bb84b2499b94d91c5f588fc93a54e5bdcc&tochange=3c9ae13132f0e2c2fe2841422bd316ce6af1b823
Maybe bug 1746795 ?

Before the bisection: full cat emoji is drawn
After bisection: blank page

Improvement1: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=8aca58bfd700721a1d20f1de5b04eecbb64fb3e2&tochange=a4e2776e87186593dfcd3984fd61df789f5e51be - A inverted "L" shape is drawnn

Improvement2:
1875670 - Add a cache for rasterized COLRv1 glyphs, because fully redrawing them on each use can be expensive. r=gfx-reviewers,lsalzman
Differential Revision: https://phabricator.services.mozilla.com/D200139
-> After this, a grey square is drawn.

Looks like a Text+camvas bug.

The severity field is not set for this bug.
:lsalzman, could you have a look please?

For more information, please visit BugBot documentation.

Flags: needinfo?(lsalzman)

Jonathan, this seems like maybe the various layers of the glyph are just compositing strangely here? What would be the correct interpretation here?

Flags: needinfo?(lsalzman) → needinfo?(jfkthame)
Flags: needinfo?(jfkthame)
Summary: canvas destination-out not working on emoji filltext → canvas destination-out/destination-in not working on emoji filltext

This actually affects pretty much all the composition operators, though it's more glaringly wrong with some than others. The attached testcase exercises more of them.

Assignee: nobody → jfkthame
Summary: canvas destination-out/destination-in not working on emoji filltext → canvas composition ops not working correctly with emoji filltext

This shows the rendering of the above testcase using current Nightly (left) vs a build with the patch (right), where compositing works correctly.

Severity: -- → S3
Pushed by jkew@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/7d1990e74b44 When the compositing mode is not OVER, we must first render the color glyph to a temporary surface, then composite it with the appropriate operator. r=gfx-reviewers,lsalzman https://hg.mozilla.org/integration/autoland/rev/c2d7979b2ae3 Add a reftest for COLR-glyph compositing modes. r=gfx-reviewers,lsalzman
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/46964 for changes under testing/web-platform/tests

https://hg.mozilla.org/mozilla-central/rev/7d1990e74b44
https://hg.mozilla.org/mozilla-central/rev/c2d7979b2ae3

Status: NEW → RESOLVED
Closed: 4 months ago
status-firefox129: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → 129 Branch
Upstream PR merged by moz-wptsync-bot
Attachment #9420354 - Flags: approval-mozilla-esr128?
Attachment #9420357 - Flags: approval-mozilla-esr128?

esr128 Uplift Approval Request

  • User impact if declined: bad rendering of color glyphs, depending on compositing modes; pre-req for uplift of bug 1912431
  • Code covered by automated testing: yes
  • Fix verified in Nightly: yes
  • Needs manual QE test: no
  • Steps to reproduce for manual QE testing: n/a
  • Risk associated with taking this patch: low
  • Explanation of risk level: fix affects only color-glyph painting code, has test coverage
  • String changes made/needed: none
  • Is Android affected?: yes
Attachment #9420354 - Flags: approval-mozilla-esr128? → approval-mozilla-esr128+
Attachment #9420357 - Flags: approval-mozilla-esr128? → approval-mozilla-esr128+
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: