[web] Fix rendering of gradients in html mode

[xtyxtyx]

Code Example

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class DemoGradientTransform implements GradientTransform {
  @override
  Matrix4? transform(Rect bounds, {TextDirection? textDirection}) {
    return Matrix4.identity()
      ..scale(1.2, 1.7)
      ..rotateZ(0.25);
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    var colors = <Color>[
      Colors.red,
      Colors.green,
      Colors.blue,
      Colors.yellow,
    ];

    const stops = <double>[0.0, 0.25, 0.5, 1.0];

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: GridView(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: TileMode.values.length,
        ),
        children: <Widget>[
          for (final mode in TileMode.values)
            DecoratedBox(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: colors,
                  stops: stops,
                  tileMode: mode,
                  transform: DemoGradientTransform(),
                ),
              ),
            ),
          for (final mode in TileMode.values)
            DecoratedBox(
              decoration: BoxDecoration(
                gradient: RadialGradient(
                  center: Alignment.topLeft,
                  radius: 0.5,
                  colors: colors,
                  stops: stops,
                  tileMode: mode,
                  transform: DemoGradientTransform(),
                ),
              ),
            ),
          for (final mode in TileMode.values)
            DecoratedBox(
              decoration: BoxDecoration(
                gradient: SweepGradient(
                  center: Alignment.topLeft,
                  startAngle: 0.0,
                  endAngle: 3.14,
                  colors: colors,
                  stops: stops,
                  tileMode: mode,
                  transform: DemoGradientTransform(),
                ),
              ),
            ),
        ],
      ),
    );
  }
}

Fixes: flutter/flutter#84245

[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.

[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 #40345 at sha b3623fe

[flutter-dashboard]

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

Changes reported for pull request #40345 at sha 093e0b5

[flutter-dashboard]

This pull request executed golden file tests, but it has not been updated in a while (20+ days). Test results from Gold expire after as many days, so this pull request will need to be updated with a fresh commit in order to get results from Gold.

[Hixie]

@xtyxtyx This looks like a great contribution, sorry we have been slacking on reviewing it. Let me see if I can find a reviewer.

[Hixie]

@xtyxtyx If you don't get a review for this in the next few days, please join our Discord (the link is in the contributing guide, link to which is below) and ping me (Hixie) in the #hackers-web channel.

[kevmoo]

CC @yjbanov ?

[kevmoo]

Did this suddenly start failing on Firefox? Thoughts @yjbanov ?

[yjbanov]

I'm surprised this wasn't failing before. We don't have infra to golden-test Firefox. @eyebrowsoffire reorged our tests recently and might know more.

[eyebrowsoffire]

I don't think these tests will fail on Firefox, but they will not take screenshots or send them to skia gold. However, it may be of at least some utility to just run the tests on Firefox anyway just to make sure you can actually do the drawing commands and not crash or throw an exception. I'll leave it up to you though, it might not be worthwhile to run them.

[yjbanov]

LGTM but I'd like @eyebrowsoffire, who looked into this code before and also recently mentioned something to me about it, to take a second look.

[eyebrowsoffire]

LGTM! Thanks for fixing this.

[eyebrowsoffire]

I don't think these tests will fail on Firefox, but they will not take screenshots or send them to skia gold. However, it may be of at least some utility to just run the tests on Firefox anyway just to make sure you can actually do the drawing commands and not crash or throw an exception. I'll leave it up to you though, it might not be worthwhile to run them.

[flutter-dashboard]

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

Changes reported for pull request #40345 at sha a63f2b6

[eyebrowsoffire]

@xtyxtyx This has been sitting for a while, and I noticed there are some untriaged goldens sitting here. I went to triage them, but some of the new ones don't look correct to me. For example https://flutter-engine-gold.skia.org/detail?grouping=name%3Dradial_gradient_clamp_transformed%26source_type%3Dflutter-engine&digest=fb78cbd08ab084418a97c2bfe060a503&changelist_id=40345&crs=github

Which just shows a gray oval. I have to assume that's supposed to be rendering some kind of gradient there? Not sure if it's an issue with the test, an issue with the rendering code, or whether it's actually expected to just draw a gray oval.

[flutter-dashboard]

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

Changes reported for pull request #40345 at sha 9e809b4

[flutter-dashboard]

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

Changes reported for pull request #40345 at sha c2e3185

[xtyxtyx]

@eyebrowsoffire Thanks for your help! After some investigation I found these gray ovals were painted because the center of the gradient was too far away. I've fixed the test and the new these golden files look correct now.

[eyebrowsoffire]

Great! I approved the new goldens, they look sane to me now.

[kevmoo]

Thanks so much for your contribution @xtyxtyx !!