diff --git a/lib/web_ui/lib/src/engine/html_image_codec.dart b/lib/web_ui/lib/src/engine/html_image_codec.dart index 742464446b1cc..d5db33fcbffc1 100644 --- a/lib/web_ui/lib/src/engine/html_image_codec.dart +++ b/lib/web_ui/lib/src/engine/html_image_codec.dart @@ -143,7 +143,7 @@ class HtmlImage implements ui.Image { } final DomHTMLImageElement imgElement; - bool _requiresClone = false; + bool _didClone = false; bool _disposed = false; @override @@ -204,16 +204,12 @@ class HtmlImage implements ui.Image { } } - // Returns absolutely positioned actual image element on first call and - // clones on subsequent calls. DomHTMLImageElement cloneImageElement() { - if (_requiresClone) { - return imgElement.cloneNode(true) as DomHTMLImageElement; - } else { - _requiresClone = true; + if (!_didClone) { + _didClone = true; imgElement.style.position = 'absolute'; - return imgElement; } + return imgElement.cloneNode(true) as DomHTMLImageElement; } @override diff --git a/lib/web_ui/test/html/compositing/canvas_image_blend_mode_golden_test.dart b/lib/web_ui/test/html/compositing/canvas_image_blend_mode_golden_test.dart index a4ad2e240ecb3..3b985102d4f4c 100644 --- a/lib/web_ui/test/html/compositing/canvas_image_blend_mode_golden_test.dart +++ b/lib/web_ui/test/html/compositing/canvas_image_blend_mode_golden_test.dart @@ -111,6 +111,25 @@ Future testMain() async { rc.restore(); await canvasScreenshot(rc, 'canvas_image_blend_and_text'); }); + + test('Does not re-use styles with same image src', () async { + final RecordingCanvas rc = RecordingCanvas( + const Rect.fromLTRB(0, 0, 400, 400)); + final HtmlImage flutterImage = createFlutterLogoTestImage(); + rc.save(); + rc.drawRect(const Rect.fromLTWH(0, 50, 200, 50), makePaint() + ..color = white); + rc.drawImage(flutterImage, const Offset(0, 50), + makePaint() + ..colorFilter = const EngineColorFilter.mode(red, BlendMode.modulate)); + + // Expect that the colorFilter is only applied to the first image, since the + // colorFilter is applied to a clone of the flutterImage and not the original + rc.drawImage(flutterImage, const Offset(0, 100), makePaint()); + + rc.restore(); + await canvasScreenshot(rc, 'canvas_image_same_src'); + }); } Paragraph createTestParagraph() {