1237640 - Canvas doesn't render emoji/color fonts loaded through @font-face

Status: RESOLVED DUPLICATE of bug 1274936

(Core :: Graphics: Canvas2D, defect)

Description

[Roel Nieskens]

Attachment: Menubar_and_ChromaTest_by_PixelAmbacht_and_Nightly.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.73 Safari/537.36 OPR/34.0.2036.25

Steps to reproduce:

Apply a color font to a canvas element through @font-face and fillText().

https://bugzilla.mozilla.org/show_bug.cgi?id=1209480


Actual results:

The normal "black and white" fallback glyphs are rendered.


Expected results:

The color glyphs should have been rendered, for both SVG-in-OpenType and COLR/CPAL which Firefox supports.

See attachment, which is from a feature test I wrote at https://github.com/RoelN/ChromaCheck . As you see, the color emoji from a local OS font renders fine, but the color glyphs loaded through @font-face don't,

Comment 1

[Kohei Yoshino [:kohei]]

See https://www.fxsitecompat.com/en-US/docs/2015/canvas-fails-to-render-emojis-on-os-x/

Comment 2

[Roel Nieskens]

This isn't a duplicate. The fix to bug 1209480 does now render fonts *installed locally*, but not when loaded through @font-face. IE11 on Windows 8.11 does this correctly.

Comment 3

[Markus Stange [:mstange]]

Correct, this is not a duplicate of bug 1209480.

Roel, ideally we'd have a testcase attached to this bug that shows the problem in the simplest form possible, i.e. just one html file that has a small canvas with the glyphs that should be colored. I suppose the downloadable font could be embedded as a data url.

Comment 4

[Kohei Yoshino [:kohei]]

Sorry, I clicked the button too quickly.

Comment 5

[Roel Nieskens]

Attachment: chromacheck.html

This test has an embedded font with three color glyphs, each for one of the OpenType color formats (SVG-in-OpenType, Microsoft's COLR/CPAL, and Apple's SBIX). The glyphs are rendered in a normal DOM element, and inside a canvas element. In Firefox (46+), the canvas should show the red and purple square, but it doesn't. 

Safari/OSX does properly show the blue cube for the SBIX format, and IE11+/Window8.1+ does properly show the red COLR/CPAL cube.

Comment 6

[Roel Nieskens]

The test is derived from a feature test I'm working on, for more info see the Github link in the first post. Let me know if this helps!

Comment 7

[Tim Guan-tin Chien [:timdream] (please needinfo)]

COLR format rendering will be fixed in bug 1274936. I am not entirely sure about the expected result of the test in comment 5, so I don't know if this is a 100% dup. I can see squares being rendered on color marked as Microsoft COLR/CPAL and SVG-in-OT though with the local patch though.

Comment 8

[Brian Birtles (:birtles)]

From what I can understand this bug is about canvas producing inconsistent results when rendering using a color font loaded using @font-face, when compared to using the same font in HTML content. (i.e. this is not about getting all the boxes, including the SBIX box to show up--it's about consistency between the two sets of boxes.)

From my testing, Firefox 49 (current beta) seems to fix the issue (while Firefox 48 is similar to the result in attachment 8705171 [details]). As a result, I think this is most likely covered by bug 1274936.

Comment 9

[Roel Nieskens]

Yes, in Fx 49 the issue seems to be fixed!