1447035 - JQPlot graph not painting anymore (e.g. prior electricity usage at https://rainforestcloud.com )

Status: RESOLVED FIXED

(Core :: Graphics, defect)

Description

[Daniel Holbert [:dholbert]]

(Sadly I don't have public STR I can post for this, because the affected site is behind a login wall. If any graphics developers are interested in poking at this, I'm happy to share my username/password privately.)

STR:
 0. Have a "Rainforest Eagle" electricity-monitoring device.
 1. From an Android phone, log in at https://rainforestcloud.com/rainforest/user_portal/php/login.php
 2. Click the "History" button on the right.

EXPECTED RESULTS:
History usage should get painted onto graph.

ACTUAL RESULTS:
There's just an empty graph -- the usage isn't painted onto it.


MORE INFO:
The usage seems to be drawn into the following canvas element on the page:
<canvas width="529" height="223" style="position: absolute; left: 41px; top: 10px; display: block;" class="jqplot-series-canvas"></canvas>
So far I've only been able to reproduce with Nightly on Android (on two different phones, including in "new guest session" so it's not profile-specific).

I tracked down when it started with mozregression:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=4b472939ee78c3221dcca484395187f765e44912&tochange=f3410beb9eb1515c041a343ed077f3b2399ecee2

Hence, marking as regression from bug 1444506.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot of expected rendering

Here's the expected rendering (taken in Firefox beta 60).  (Note that I'm using an internal IP address for convenience, to view my device's web UI more directly, hence the 192.168.* in the URL bar here.)

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of actual rendering

and here's the screenshot of the actual rendering, in latest Nightly.

Comment 3

[Daniel Holbert [:dholbert]]

Also, I can reproduce on Linux Desktop Nightly if I enable SkiaGL by setting the following prefs to true:
 layers.acceleration.force-enabled
 gfx.canvas.azure.accelerated  (have to "create" this pref - it's not listed in about:config by default)

(thanks lsalzman)

Comment 4

[Daniel Holbert [:dholbert]]

Also worth noting: before the regression, the graph would occasionally only partly paint. There's an animation which starts at the left edge and fills in usage data left-to-right, and sometimes that'd stop say 80% of the way across (and e.g. switching tabs wouldn't help, so it wasn't an invalidation bug).  But when that happened, a reload would usually fix it.

After the regression, none of the usage data paints at all.

(Just noting because it seems possible the new issue is a more severe form of the old issue.)

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: (jqplot.js resource for testcase, from http://www.jqplot.com/src/jquery.jqplot.js )

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: (jquery.js resource for testcase, from http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js)

Comment 7

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a standalone testcase (which uses the two attached JS files), based on this set of demos that Lee found (which reproduce the bug): http://www.jqplot.com/examples/axisLabelTests.php

In a profile where I've set the prefs noted in comment 3, no dots are displayed on the graph in this testcase.

Comment 8

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

Another version of this bug (or at least with the same prefs + regression range): every canvas at https://www.w3schools.com/html/html5_canvas.asp (after the first blank one) renders the same contents, incorrectly -- usually they all render the final example's circular gradient.

Here's a testcase reduced from that page.
EXPECTED RESULTS: "Hello World" in first canvas, purple in second canvas.
ACTUAL RESULTS: Purple in both canvases.

Comment 9

[Lee Salzman [:lsalzman]]

I tracked this down to a bug in Skia's new explicit GPU resource allocation feature, which I had already disabled on macOS due to very evident bugs there when I was working on the Skia update. But apparently the feature was broken on all other platforms as well, so the solution here has been to just disable the explicit GPU resource allocation everywhere for now. I posted the patch as a follow-up in bug 1444506.

Daniel Holbert confirmed a version of this fix resolved the problems with his test-cases, so once that lands in the follow-up patch we can mark this bug as resolved.

Comment 10

[Daniel Holbert [:dholbert]]

Thanks for the quick work on this!

Could you add an automated testcase (perhaps based on the attached 'testcase 2') that would've caught this & could catch this if it regresses?

Comment 11

[Ryan VanderMeulen [:RyanVM]]

Skia 66 was uplifted to Beta with this fix included.

Comment 12

[Lee Salzman [:lsalzman]]

Attachment: test to verify that multiple accelerated canvases on the same page work

This is just a simplified version of your two canvas test-case to make it suitable for comparison with a ref in a reproducible manner. It draws two solid colored gradients, one in each canvas, of different colors, filling the entirety of each canvas. Ideally, it should match the ref whose canvases' background-colors has been set with nothing drawn into those canvases.

If it doesn't match, well, something has gone terribly wrong somewhere. In any case, it fails without my bug fix, and passes with my bug fix, which is what is important. :)

Comment 13

[Daniel Holbert [:dholbert]]

Comment on attachment 8961219 [details] [diff] [review]
test to verify that multiple accelerated canvases on the same page work

Review of attachment 8961219 [details] [diff] [review]:
-----------------------------------------------------------------

Thanks!

r=me with one nit:

::: layout/reftests/canvas/1447035-1.html
@@ +4,5 @@
> +function fillCanvas(gradColor) {
> +    var c = document.getElementById(gradColor + 'Canvas');
> +    var ctx = c.getContext("2d");
> +    // Create gradient
> +    var grd = ctx.createRadialGradient(75,50,5,90,60,100);

s/gradient/solid-color "gradient"/

Or some similar clarification.  (It's kind of confusing right now, since our "gradient" is all the same color -- i.e. we're using the same color at both color stops, so there's no gradation.  It's helpful if the comment kind of points that out somehow -- this wasn't obvious to me at first, so I was confused at how we were ending up with a solid-color rect.)

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/d3510733b936
test to verify that multiple accelerated canvases on the same page work. r=dholbert

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/4cf06e778dcf
follow-up - reftest comment clarification. r=me

Comment 16

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/d3510733b936
https://hg.mozilla.org/mozilla-central/rev/4cf06e778dcf