Closed Bug 1237640 Opened 4 years ago Closed 3 years ago

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

Categories

(Core :: Canvas: 2D, defect)

46 Branch
defect
Not set

Tracking

()

RESOLVED DUPLICATE of bug 1274936

People

(Reporter: roel, Unassigned)

References

Details

(Keywords: feature, Whiteboard: [gfx-noted])

Attachments

(2 files)

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,
See https://www.fxsitecompat.com/en-US/docs/2015/canvas-fails-to-render-emojis-on-os-x/
Status: UNCONFIRMED → RESOLVED
Closed: 4 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1209480
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.
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.
Status: RESOLVED → REOPENED
Ever confirmed: true
Resolution: DUPLICATE → ---
Sorry, I clicked the button too quickly.
Component: Untriaged → Canvas: 2D
Product: Firefox → Core
Attached file 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.
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!
Keywords: feature
Whiteboard: [gfx-noted]
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.
Depends on: 1274936
Flags: needinfo?(roel)
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.
Status: REOPENED → RESOLVED
Closed: 4 years ago3 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1274936
Flags: needinfo?(roel)
Yes, in Fx 49 the issue seems to be fixed!
You need to log in before you can comment on or make changes to this bug.