1779227 - Canvas2d font API doesn't work on a disconnected element

Status: RESOLVED FIXED

(Core :: Graphics: Canvas2D, defect)

Description

[Jonathan Kew [:jfkthame]]

CanvasRenderingContext2D::SetFontInternal returns an error if the canvas does not currently have a PresShell (e.g. because a canvas element has been created via script, and not [yet] added to the document). It should be possible to perform drawing operations on such a "disconnected" canvas, and in general this works, but trying to set the .font attribute throws an error.

See https://jsfiddle.net/rLy6hnf7/ for an example; it should show two copies of the same content, one drawn directly on an in-document <canvas> element, the other drawn on a disconnected canvas and then copied as a blob image.

The example works in Safari; in Chrome, it doesn't throw an error but the text fails to render in the second canvas. In Firefox, we throw an error on the font setter, so the second image doesn't appear at all.

Comment 1

[Jonathan Kew [:jfkthame]]

Setting .font on a disconnected canvas element that has no PresShell/PresContext is similar to setting it on an offscreenCanvas, where these objects are not present. So I think we can handle this by pulling the version of SetFontInternal from OffscreenCanvasRenderingContext2D back into the base CanvasRenderingContext2D class, and adapting it slightly; instead of using this version only for offscreen-canvas, we'll use it any time there's no PresShell (instead of throwing an error, as CanvasRenderingContext2D::SetFontInternal currently does).

With this change, the jsfiddle example renders as expected.

Comment 2

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1779227 - Enable the font attribute to be set on a disconnected <canvas> element without throwing an error. r=aosmond

Comment 3

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1779227 - Add a WPT reftest. r=aosmond

Comment 4

[Jonathan Kew [:jfkthame]]

Here's a simple reftest that fails before the patch here is landed. (The testcase completely fails to render.) It's somewhat fuzzy because we get different antialiasing (at least on Windows) between the blob-image rendering and the canvas that is directly in the document, but the differences are only in the gray levels of the edge pixels; the actual text is still correct.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/adb9c0a3c38f
Enable the font attribute to be set on a disconnected <canvas> element without throwing an error. r=aosmond
https://hg.mozilla.org/integration/autoland/rev/856332401a32
Add a WPT reftest. r=aosmond

Comment 6

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

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

Comment 7

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/adb9c0a3c38f
https://hg.mozilla.org/mozilla-central/rev/856332401a32

Comment 8

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

Upstream PR merged by moz-wptsync-bot