1792860 - NS_ERROR_FAILURE in Firefox 105, when .fillText is called on canvas's context, inside element with shadow DOM

Status: RESOLVED FIXED

(Core :: Graphics: Canvas2D, defect)

Description

[Tomasz Domański]

Attachment: 193010739-e7e1d472-eae7-436a-b3ba-19ae8dbe0858.png

Steps to reproduce:

1. Generate Ionic + Angular project
2. Create canvas element inside ion-content element, in the Ionic Page
3. Add selector (e.g. #canva) to the canvas element
4. Query the element by Angular's ViewChild
5. Get 2d context in Angular's ngAfterViewInit
6. Call .flllText('hello, world', 10, 10) on 2d context

Expected: hello, world is visible
Actual: An error is thrown

(stackblitz: https://stackblitz.com/edit/angular-ivy-pyvhyk?file=src/app/pages/index/index.page.ts, I couldn't find proper reproduction steps which wouldn't use Ionic)

Related issues with libraries:
Ionic: https://github.com/ionic-team/ionic-framework/issues/26039
Chart.js: https://github.com/chartjs/Chart.js/issues/10720

Actual results:

If one would like to write a text using .fillText, or even change font styling by using .font in the canvas element, it results in NS_ERROR_FAILURE.

Expected results:

Text-related actions on canvas 2d context should not throw an error

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

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.

Comment 2

[ibrahimaboelsuod]

I am seeing this same error within an Angular & ionic app but with amchart tooltip text instead.

Comment 3

[Liam DeBeasi]

Attachment: Code reproduction

I was able to reproduce the issue outside of Ionic. The reported issue appears when trying to draw on a canvas passed to a Shadow DOM custom element that does not have a <slot>.

1. Open attached code reproduction in Firefox 105+.
2. Open developer tools.
3. In the "Inspector" tab observe that there is a <canvas> element inside of a custom element named <my-cmp>.
4. Observe that the reported error is in the console.
5. In the custom element constructor, add root.innerHTML = '<slot></slot>';.
6. Reload the page. Observe that the error is no longer present and the canvas is drawn correctly.

This issue was happening in Ionic because Stencil, the Web Component compiler that Ionic uses, was adding the <slot> asynchronously. As a result, there was a period where the custom element had been upgraded to use the Shadow DOM, but the component's slot had not yet been added to the DOM.

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

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

For more information, please visit auto_nag documentation.

Comment 5

[:fa__]

I've encontered the same error using Ionic React and Chart.js

Comment 6

[patrick.jung94]

When could one expect that this bug will be fixed? There is no Priority set.

Comment 7

[Tom S. (please needinfo tschuster)]

This happens because we up checking the pref layout.css.computed-style.styles-outside-flat-tree via nsComputedDOMStyle::GetComputedStyle. That was introduced quite intentionally it seems in bug 1483798. Emilio is that behavior expected?

Comment 8

[Emilio Cobos Álvarez [:emilio]]

Yes, there's no style for those elements per spec, but we shouldn't throw.

Comment 9

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1792860 - Deal better with canvases without styles. r=jfkthame,lsalzman,#gfx-reviewers

When an element is out of the flat tree we should treat it the same as
when it is out of the document, it has no meaningful style.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0dd4dda463cb
Deal better with canvases without styles. r=lsalzman,gfx-reviewers

Comment 11

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

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

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/51ca4e1f0f46
Keep checking for shell destruction.

Comment 13

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/0dd4dda463cb
https://hg.mozilla.org/mozilla-central/rev/51ca4e1f0f46

Comment 14

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

Upstream PR merged by moz-wptsync-bot