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

[Flutter Web(HTML)] fix: shader mask is painted incorrectly on shared offscreen canvas #44998

Merged
merged 4 commits into from
Jul 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/web_ui/lib/src/engine/safe_browser_api.dart
Original file line number Diff line number Diff line change
Expand Up @@ -961,7 +961,7 @@ class OffScreenCanvas {
}

void resize(int requestedWidth, int requestedHeight) {
if(requestedWidth != width && requestedHeight != height) {
if(requestedWidth != width || requestedHeight != height) {
width = requestedWidth;
height = requestedHeight;
if(offScreenCanvas != null) {
Expand Down
57 changes: 57 additions & 0 deletions lib/web_ui/test/html/shaders/gradient_golden_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -635,6 +635,63 @@ Future<void> testMain() async {
region: region,
);
}, skip: isFirefox);

test('Paints two gradient with same width and different height', () async {
final RecordingCanvas canvas =
RecordingCanvas(const Rect.fromLTRB(0, 0, 400, 300));
canvas.save();

const List<Color> colors = <Color>[
Color(0xFF000000),
Color(0xFFFF3C38),
Color(0xFFFF8C42),
Color(0xFFFFF275),
Color(0xFF6699CC),
Color(0xFF656D78),
];

const List<double> stops = <double>[0.0, 0.05, 0.4, 0.6, 0.9, 1.0];

final Matrix4 transform = Matrix4.identity()
..translate(100, 150)
..scale(0.3, 0.7)
..rotateZ(0.5);

final GradientSweep sweepGradient = GradientSweep(
const Offset(0.5, 0.5),
colors,
stops,
TileMode.clamp,
0.0,
2 * math.pi,
transform.storage,
);

const double kBoxWidth = 150;
const double kBoxHeight1 = 40;
const double kBoxHeight2 = 80;

const Rect rectBounds1 = Rect.fromLTWH(10, 20, kBoxWidth, kBoxHeight1);
const Rect rectBounds2 = Rect.fromLTWH(10, 80, kBoxWidth, kBoxHeight2);
canvas.drawRect(
rectBounds1,
SurfacePaint()
..shader = engineGradientToShader(sweepGradient, rectBounds1),
);
canvas.drawRect(
rectBounds2,
SurfacePaint()
..shader = engineGradientToShader(sweepGradient, rectBounds2),
);

canvas.restore();
await canvasScreenshot(
canvas,
'radial_gradient_double_item',
canvasRect: screenRect,
region: region,
);
}, skip: isFirefox);
}

Shader engineGradientToShader(GradientSweep gradient, Rect rect) {
Expand Down