Fix html gradient rendering (https://github.com/flutter/flutter/issues/97762)

[eyebrowsoffire]

Fixes flutter/flutter#97762

There are actually three separate issues here to fix:

1. UV coordinates for the repeated gradient are messed up. The reason for this is that
   there is a transformation to the gradient matrix that we were for some reason
   skipping when the tile mode was "repeated". We need to apply that transformation
   in the "repeated" tile mode as well.
2. Coloration of some gradients is wrong when using a color with an alpha channel. The
   reason this is occurring is because the transferToImageBitmap doesn't properly
   preserve the alpha channel. The fix is to use the fallback path if the gradient
   contains a non-opaque color.
3. Sweep gradient wasn't drawing properly at all. This is because if there was no
   transformation matrix passed into the shader, we didn't set the gradient matrix
   uniform at all. We should set it to the identity matrix if there is none specified.

[flutter-dashboard]

It looks like this pull request may not have tests. Please make sure to add tests before merging. If you need an exemption to this rule, contact Hixie on the #hackers channel in Chat (don't just cc him here, he won't see it! He's on Discord!).

If you are not sure if you need tests, consider this rule of thumb: the purpose of a test is to make sure someone doesn't accidentally revert the fix. Ask yourself, is there anything in your PR that you feel it is important we not accidentally revert back to how it was before your fix?

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

[eyebrowsoffire]

Linear before change:

Linear after change:

Sweep before change:

Sweep after change:

It should be noted that these are all consistent with CanvasKit now.

[skia-gold]

Gold has detected about 2 new digest(s) on patchset 1.
View them at https://flutter-engine-gold.skia.org/cl/github/31355

[skia-gold]

Gold has detected about 2 new digest(s) on patchset 2.
View them at https://flutter-engine-gold.skia.org/cl/github/31355

[flutter-dashboard]

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

Changes reported for pull request #31355 at sha 985bee6

[yjbanov]

An example screenshot test for this (in fact, we should probably just add more tests to that save file) is https://github.com/flutter/engine/blob/main/lib/web_ui/test/html/shaders/gradient_golden_test.dart

[yjbanov]

I wonder if this is because on the following line we should also specify the alpha parameter:

engine/lib/web_ui/lib/src/engine/safe_browser_api.dart

Line 434 in ba8f1c5

: glContext = canvas.getContext('webgl2', <String, dynamic>{'premultipliedAlpha': false})!,

According to MDN docs: "alpha: Boolean that indicates if the canvas contains an alpha channel. If set to false, the browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images."

[eyebrowsoffire]

I actually tried this already! It did nothing unfortunately. I believe alpha is true by default.

[skia-gold]

Gold has detected about 5 new digest(s) on patchset 3.
View them at https://flutter-engine-gold.skia.org/cl/github/31355

[flutter-dashboard]

Golden file changes are available for triage from new commit, Click here to view.

Changes reported for pull request #31355 at sha d936d50

[yjbanov]

[skia-gold]

Gold has detected about 12 new digest(s) on patchset 4.
View them at https://flutter-engine-gold.skia.org/cl/github/31355

[flutter-dashboard]

Golden file changes are available for triage from new commit, Click here to view.

Changes reported for pull request #31355 at sha c217f27

[harryterkelsen]

LGTM