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

Conversation

@bleroux
Copy link
Contributor

@bleroux bleroux commented Jul 21, 2022

Description

This PRs fixes an issue where the HTML renderer was not able to draw straight lines when stroke width is zero (For more information see the demo here: flutter/flutter#46339 (comment)).
The implementation choice is to draw a filled rectangle with a 1 width or a 1 height. This choice is done for optimization purposes (compared to relying on drawing the line on an Web canvas).

Related Issue

Fixes flutter/flutter#46339

Tests

Adds 1 test.

@flutter-dashboard flutter-dashboard bot added the platform-web Code specifically for the web engine label Jul 21, 2022
@skia-gold
Copy link

Gold has detected about 1 new digest(s) on patchset 1.
View them at https://flutter-engine-gold.skia.org/cl/github/34812

@flutter-dashboard
Copy link

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 #34812 at sha af46a44

@flutter-dashboard
Copy link

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.

@bleroux bleroux requested a review from yjbanov September 9, 2022 07:28
final double top = math.min(line.top, line.bottom);
final double width = line.width.abs();
final double height = line.height.abs();
if (line.width == 0 || line.height == 0) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this check necessary? This condition seems to be guaranteed by toStraightLine, see

if (y0 == y1 || x0 == x1) {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch! I updated the PR to remove this redundant check.

drawRRect(rrect, paint);
return;
}
// Use drawRect for straight line paths painted with a zero strokeWidth
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I actually understand why we want to use drawRect instead of just drawing the path anyway and just changing the stroke width to 1.0. Can you clarify?

Copy link
Contributor Author

@bleroux bleroux Sep 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@eyebrowsoffire
This is related to this part of my PR description:
"The implementation choice is to draw a filled rectangle with a 1 width or a 1 height. This choice is done for optimization purposes (compared to relying on drawing the line on an Web canvas)."

With the HTML renderer, drawRectwill be rendered as <div>, drawing the path will be rendered as a <canvas>. As the use cases for this issue seem to be mainly using a separator on long list, my guess is that it is cheaper to have the browser rendering many <div> insteaf of many <canvas>, but I can be wrong here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, that's a good call. We want to avoid creating unnecessary canvas elements if a drawing call can be expressed using an HTML element. However, do note that this does not guarantee a div. It depends on the Paint and other environmental factors whether a div or a canvas will be used.

@bleroux bleroux force-pushed the fix_html_renderer_does_not_render_border branch from af46a44 to d3e0b0c Compare September 14, 2022 17:52
@skia-gold
Copy link

Gold has detected about 1 new digest(s) on patchset 1.
View them at https://flutter-engine-gold.skia.org/cl/github/34812

@flutter-dashboard
Copy link

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

Changes reported for pull request #34812 at sha d3e0b0c

@bleroux bleroux requested a review from yjbanov September 14, 2022 18:51
@yjbanov yjbanov added the autosubmit Merge PR when tree becomes green via auto submit App label Sep 14, 2022
@bleroux
Copy link
Contributor Author

bleroux commented Sep 14, 2022

@yjbanov
It's the first time I filed a PR with a golden file change and I don't have the access rights to validate the golden file. Can you do it or explain me what is the procedure?

@yjbanov
Copy link
Contributor

yjbanov commented Sep 15, 2022

Yeah, I did it, but it's having trouble registering it. I just triaged it again. 🤞 this is pass now.

@auto-submit auto-submit bot merged commit 2fb44a2 into flutter:main Sep 15, 2022
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Sep 15, 2022
zanderso pushed a commit to flutter/flutter that referenced this pull request Sep 15, 2022
* 071f888 [web] Compile tests with sound null safety (flutter/engine#36169)

* 73c9b87 Roll Skia from ce330bb13879 to 962fd1f9abfc (2 revisions) (flutter/engine#36170)

* 2fb44a2 Fix HTML renderer does not render border (flutter/engine#34812)
@bleroux bleroux deleted the fix_html_renderer_does_not_render_border branch September 16, 2022 13:03
Oleh-Sv pushed a commit to Oleh-Sv/engine that referenced this pull request Sep 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

autosubmit Merge PR when tree becomes green via auto submit App platform-web Code specifically for the web engine will affect goldens

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[web] HTML Renderer doesn't render border

4 participants