Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

Commit 5ea3ea3

Browse files
authored
[Flutter Web(HTML)] fix: shader mask is painted incorrectly on shared offscreen canvas (#44998)
Hi from [Dora team](https://www.dora.run/), which powers web developers to build their 3d websites in just a few seconds. This PR fixes flutter/flutter#133134. The size of the shared canvas should not only be updated if both width and height are not the same. [C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style
1 parent c90aa9a commit 5ea3ea3

File tree

2 files changed

+58
-1
lines changed

2 files changed

+58
-1
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -961,7 +961,7 @@ class OffScreenCanvas {
961961
}
962962

963963
void resize(int requestedWidth, int requestedHeight) {
964-
if(requestedWidth != width && requestedHeight != height) {
964+
if(requestedWidth != width || requestedHeight != height) {
965965
width = requestedWidth;
966966
height = requestedHeight;
967967
if(offScreenCanvas != null) {

lib/web_ui/test/html/shaders/gradient_golden_test.dart

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -635,6 +635,63 @@ Future<void> testMain() async {
635635
region: region,
636636
);
637637
}, skip: isFirefox);
638+
639+
test('Paints two gradient with same width and different height', () async {
640+
final RecordingCanvas canvas =
641+
RecordingCanvas(const Rect.fromLTRB(0, 0, 400, 300));
642+
canvas.save();
643+
644+
const List<Color> colors = <Color>[
645+
Color(0xFF000000),
646+
Color(0xFFFF3C38),
647+
Color(0xFFFF8C42),
648+
Color(0xFFFFF275),
649+
Color(0xFF6699CC),
650+
Color(0xFF656D78),
651+
];
652+
653+
const List<double> stops = <double>[0.0, 0.05, 0.4, 0.6, 0.9, 1.0];
654+
655+
final Matrix4 transform = Matrix4.identity()
656+
..translate(100, 150)
657+
..scale(0.3, 0.7)
658+
..rotateZ(0.5);
659+
660+
final GradientSweep sweepGradient = GradientSweep(
661+
const Offset(0.5, 0.5),
662+
colors,
663+
stops,
664+
TileMode.clamp,
665+
0.0,
666+
2 * math.pi,
667+
transform.storage,
668+
);
669+
670+
const double kBoxWidth = 150;
671+
const double kBoxHeight1 = 40;
672+
const double kBoxHeight2 = 80;
673+
674+
const Rect rectBounds1 = Rect.fromLTWH(10, 20, kBoxWidth, kBoxHeight1);
675+
const Rect rectBounds2 = Rect.fromLTWH(10, 80, kBoxWidth, kBoxHeight2);
676+
canvas.drawRect(
677+
rectBounds1,
678+
SurfacePaint()
679+
..shader = engineGradientToShader(sweepGradient, rectBounds1),
680+
);
681+
canvas.drawRect(
682+
rectBounds2,
683+
SurfacePaint()
684+
..shader = engineGradientToShader(sweepGradient, rectBounds2),
685+
);
686+
687+
canvas.restore();
688+
await canvasScreenshot(
689+
canvas,
690+
'radial_gradient_double_item',
691+
canvasRect: screenRect,
692+
region: region,
693+
);
694+
}, skip: isFirefox);
638695
}
639696

640697
Shader engineGradientToShader(GradientSweep gradient, Rect rect) {

0 commit comments

Comments
 (0)