From 3a0eadc7ba7d2db5f6544507c483c449aaaf4f3a Mon Sep 17 00:00:00 2001 From: ferhatb Date: Tue, 26 Jan 2021 13:48:03 -0800 Subject: [PATCH 1/4] Fix svg stroke rendering --- lib/web_ui/lib/src/engine/dom_canvas.dart | 1 + .../engine/path_to_svg_golden_test.dart | 51 +++++++++++++++---- 2 files changed, 41 insertions(+), 11 deletions(-) diff --git a/lib/web_ui/lib/src/engine/dom_canvas.dart b/lib/web_ui/lib/src/engine/dom_canvas.dart index c9e4cb8d4b377..7c7bf3451766c 100644 --- a/lib/web_ui/lib/src/engine/dom_canvas.dart +++ b/lib/web_ui/lib/src/engine/dom_canvas.dart @@ -256,6 +256,7 @@ html.Element _pathToSvgElement(SurfacePath path, SurfacePaintData paint, if (paint.style == ui.PaintingStyle.stroke) { sb.write('stroke="${colorToCssString(color)}" '); sb.write('stroke-width="${paint.strokeWidth}" '); + sb.write('fill="none" '); } else if (paint.color != null) { sb.write('fill="${colorToCssString(color)}" '); } else { diff --git a/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart b/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart index 3054dac3d5607..0c37242aad17e 100644 --- a/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart +++ b/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart @@ -19,22 +19,28 @@ void main() { void testMain() async { final Rect region = Rect.fromLTWH(8, 8, 600, 800); // Compensate for old scuba tester padding - Future testPath(Path path, String scubaFileName, {Paint paint, double maxDiffRatePercent = null}) async { + Future testPath(Path path, String scubaFileName, + {Paint paint, double maxDiffRatePercent = null, bool write = false, + bool strokeEnabled = true, bool fillEnabled = true}) async { const Rect canvasBounds = Rect.fromLTWH(0, 0, 600, 800); final BitmapCanvas bitmapCanvas = BitmapCanvas(canvasBounds, RenderStrategy()); final RecordingCanvas canvas = RecordingCanvas(canvasBounds); - paint ??= Paint() - ..color = const Color(0x807F7F7F) - ..style = PaintingStyle.fill; - - canvas.drawPath(path, paint); + if (fillEnabled) { + paint ??= Paint() + ..color = const Color(0x807F7F7F) + ..style = PaintingStyle.fill; + canvas.drawPath(path, paint); + } - paint = Paint() - ..strokeWidth = 2 - ..color = const Color(0xFFFF0000) - ..style = PaintingStyle.stroke; + if (strokeEnabled) { + paint = Paint() + ..strokeWidth = 2 + ..color = fillEnabled ? const Color(0xFFFF0000) : + const Color(0xFF000000) + ..style = PaintingStyle.stroke; + } canvas.drawPath(path, paint); @@ -46,7 +52,8 @@ void testMain() async { canvas.endRecording(); canvas.apply(bitmapCanvas, canvasBounds); - await matchGoldenFile('$scubaFileName.png', region: region, maxDiffRatePercent: maxDiffRatePercent); + await matchGoldenFile('$scubaFileName.png', region: region, + maxDiffRatePercent: maxDiffRatePercent, write: write); bitmapCanvas.rootElement.remove(); svgElement.remove(); @@ -131,6 +138,27 @@ void testMain() async { path.lineTo(0, 10); await testPath(path, 'svg_notch'); }); + + /// Regression test for https://github.com/flutter/flutter/issues/70980 + test('render notch', () async { + const double w = 0.7; + final Path path = Path(); + path.moveTo(0.5, 4); + path.conicTo(0.5, 0.5, 4, 0.5, w); + path.moveTo(4, 0.5); + path.lineTo(6.5, 0.5); + path.moveTo(36.0, 0.5); + path.lineTo(158, 0.5); + path.conicTo(161.5, 0.5, 161.5, 4, w); + path.moveTo(161.5, 4); + path.lineTo(161.5, 38); + path.conicTo(161.5, 41.5, 158, 41.5, w); + path.lineTo(4, 41.5); + path.conicTo(0.5, 41.5, 0.5, 38, w); + path.lineTo(0.5, 4); + await testPath(path, 'svg_editoutline', fillEnabled: false, + write: true); + }); } html.Element pathToSvgElement(Path path, Paint paint) { @@ -142,6 +170,7 @@ html.Element pathToSvgElement(Path path, Paint paint) { if (paint.style == PaintingStyle.stroke) { sb.write('stroke="${colorToCssString(paint.color)}" '); sb.write('stroke-width="${paint.strokeWidth}" '); + sb.write('fill="none" '); } if (paint.style == PaintingStyle.fill) { sb.write('fill="${colorToCssString(paint.color)}" '); From 00cc817d10f5794b39bc58f9c818c5420eb68248 Mon Sep 17 00:00:00 2001 From: ferhatb Date: Tue, 26 Jan 2021 13:54:17 -0800 Subject: [PATCH 2/4] update test --- .../engine/path_to_svg_golden_test.dart | 29 +++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart b/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart index 0c37242aad17e..57c6140ef85e4 100644 --- a/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart +++ b/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart @@ -143,21 +143,20 @@ void testMain() async { test('render notch', () async { const double w = 0.7; final Path path = Path(); - path.moveTo(0.5, 4); - path.conicTo(0.5, 0.5, 4, 0.5, w); - path.moveTo(4, 0.5); - path.lineTo(6.5, 0.5); - path.moveTo(36.0, 0.5); - path.lineTo(158, 0.5); - path.conicTo(161.5, 0.5, 161.5, 4, w); - path.moveTo(161.5, 4); - path.lineTo(161.5, 38); - path.conicTo(161.5, 41.5, 158, 41.5, w); - path.lineTo(4, 41.5); - path.conicTo(0.5, 41.5, 0.5, 38, w); - path.lineTo(0.5, 4); - await testPath(path, 'svg_editoutline', fillEnabled: false, - write: true); + path.moveTo(0.5, 14); + path.conicTo(0.5, 10.5, 4, 10.5, w); + path.moveTo(4, 10.5); + path.lineTo(6.5, 10.5); + path.moveTo(36.0, 10.5); + path.lineTo(158, 10.5); + path.conicTo(161.5, 10.5, 161.5, 14, w); + path.moveTo(161.5, 14); + path.lineTo(161.5, 48); + path.conicTo(161.5, 51.5, 158, 51.5, w); + path.lineTo(4, 51.5); + path.conicTo(0.5, 51.5, 0.5, 48, w); + path.lineTo(0.5, 14); + await testPath(path, 'svg_editoutline', fillEnabled: false); }); } From 802f992ac31e0dae6e2d33e01a61d12e6dc78b2d Mon Sep 17 00:00:00 2001 From: ferhatb Date: Tue, 26 Jan 2021 14:39:49 -0800 Subject: [PATCH 3/4] update golden locks --- lib/web_ui/dev/goldens_lock.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/web_ui/dev/goldens_lock.yaml b/lib/web_ui/dev/goldens_lock.yaml index 1b80d23509540..e8c8f3e75d73b 100644 --- a/lib/web_ui/dev/goldens_lock.yaml +++ b/lib/web_ui/dev/goldens_lock.yaml @@ -1,2 +1,2 @@ repository: https://github.com/flutter/goldens.git -revision: b85f9093e6bc6d4e7cbb7f97491667c143c4a360 +revision: de71e99520d92bd82b2b64004cd8e74be08fba05 From bca6d7457971bdaac3dd18e99a986ad8c260819e Mon Sep 17 00:00:00 2001 From: ferhatb Date: Wed, 27 Jan 2021 09:21:49 -0800 Subject: [PATCH 4/4] fix golden test --- .../engine/path_to_svg_golden_test.dart | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart b/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart index 57c6140ef85e4..bc20029381544 100644 --- a/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart +++ b/lib/web_ui/test/golden_tests/engine/path_to_svg_golden_test.dart @@ -21,13 +21,13 @@ void testMain() async { Future testPath(Path path, String scubaFileName, {Paint paint, double maxDiffRatePercent = null, bool write = false, - bool strokeEnabled = true, bool fillEnabled = true}) async { + bool strokeEnabled = true, bool enableFill = true}) async { const Rect canvasBounds = Rect.fromLTWH(0, 0, 600, 800); final BitmapCanvas bitmapCanvas = BitmapCanvas(canvasBounds, RenderStrategy()); final RecordingCanvas canvas = RecordingCanvas(canvasBounds); - if (fillEnabled) { + if (enableFill) { paint ??= Paint() ..color = const Color(0x807F7F7F) ..style = PaintingStyle.fill; @@ -37,14 +37,15 @@ void testMain() async { if (strokeEnabled) { paint = Paint() ..strokeWidth = 2 - ..color = fillEnabled ? const Color(0xFFFF0000) : + ..color = enableFill ? const Color(0xFFFF0000) : const Color(0xFF000000) ..style = PaintingStyle.stroke; } canvas.drawPath(path, paint); - final html.Element svgElement = pathToSvgElement(path, paint); + final html.Element svgElement = pathToSvgElement(path, paint, + enableFill); html.document.body.append(bitmapCanvas.rootElement); html.document.body.append(svgElement); @@ -156,20 +157,24 @@ void testMain() async { path.lineTo(4, 51.5); path.conicTo(0.5, 51.5, 0.5, 48, w); path.lineTo(0.5, 14); - await testPath(path, 'svg_editoutline', fillEnabled: false); + await testPath(path, 'svg_editoutline', enableFill: false); }); } -html.Element pathToSvgElement(Path path, Paint paint) { +html.Element pathToSvgElement(Path path, Paint paint, + bool enableFill) { final Rect bounds = path.getBounds(); final StringBuffer sb = StringBuffer(); sb.write( - ''); + ''); sb.write('