[haiku-bugs] Re: [Haiku] #17538: WebPositive SVG stroke rendering

  • From: "Haiku" <trac@xxxxxxxxxxxx>
  • To: undisclosed-recipients: ;
  • Date: Sat, 19 Feb 2022 12:49:07 -0000

#17538: WebPositive SVG stroke rendering
-------------------------------------+-------------------------------------
  Reporter:  thebuck                 |      Owner:  pulkomandy
      Type:  bug                     |     Status:  new
  Priority:  normal                  |  Milestone:  Unscheduled
 Component:                          |    Version:  R1/Development
  Applications/WebPositive           |   Keywords:  SVG stroke line
Resolution:                          |  rendering
Blocked By:                          |   Blocking:
  Platform:  All                     |
-------------------------------------+-------------------------------------

Old description:

The handcrafted stroke-test.svg uncovers many stroke-related rendering
issues, see Conclusions section.

Using the test image:\\
- View it standalone in WebPositive to test mouse hover effects and to
avoid #17305.\\
- Every assymmetry (except color change on mouse hover) with respect to
the vertical red line is a browser bug.\\

Elements of the image (left | right):\\
- orange top: filled rectangular path | stroked line path\\
- blue top U: just one curve path\\
- black O: differently scaled quarter paths with their stroke-width and
geometry adjusted to make them look identical; \\listing stroke-width:\\
 - top:     4 | 0.125\\
 - bottom: 16 | 2.5\\
- blue bottom: line path segments | one dashed line path\\
- While the mouse is over an element, the element becomes green.\\

Conclusions from my hrev55788/x86_64/QEMU test run:
1. If 0 < stroke-width < 1 then it renders as 1.
2. transform is neglected for path polygonization detail level (same for
fill).
3. stroke-dasharray is unimplemented.
4. ???
5. Renderer's bounding box of paths neglects stroke (however, extreme
points of curves extend the box more than enough).
6. LCD subpixel antialiasing preference generally affects SVG (should
always greyscale like other browsers).
7. The fill-rule equivalent for stroking is uninitialized (should be
nonzero).
8. Renderer's bounding box of paths is one path-d unit too big to the
bottom and right.

What tests led to conclusions:
1. The magenta zero-stroke thing is invisible, the O has thick top right
(0.125 as 1), and bottom right was correctly not rounded to int (2.5).
2. The number of polylines (look carefully for corners) in O quarters
increases with stroke-width, i.e. with less upscaling
3. The bottom blue right half is continuous, also for mouse hover
detection (thin hover area because of 5.).
4. Scrolling the bounding box of the top left orange rectangle in/out of
view toggles orange painting of all black elements (resize window for
this). With LCD subpixel antialiasing only the fully covered pixels are
aliased orange with a thin antialiasing rainbow border of black around.
With greyscale antialiasing there is just a perfect orange stroke, but
temporary black stroke glitches into view while scrolling. Only happens
when encountering the combination "fill:none;stroke:#000" after an
element with only fill but no stroke.
5. Hovering the mouse over elements works only in their bounding box and
repaints only the same (test especially blue elements; move between them
and the red cross to get larger repaints).
6. Change antialiasing preference and reload page.
7. The red cross has a transparent center. I also saw that effect
triggered by an unrelated transition somewhere else, without nearby
"fill-rule:evenodd".
8. Hovering the top right orange line and considering point 5., the BBox
is too big towards bottom right. The top right O quarter being orange as
per point 4., then hovered, updates exactly one path-d unit (equals
stroke-width with point 1.) too far to the bottom.

New description:

 The handcrafted stroke-test.svg uncovers many stroke-related rendering
 issues, see Conclusions section.

 Using the test image:\\
 - View it standalone in WebPositive to test mouse hover effects and to
 avoid #17305.\\
 - Every assymmetry (except color change on mouse hover) with respect to
 the vertical red line is a browser bug.\\

 Elements of the image (left | right):\\
 - orange top: filled rectangular path | stroked line path\\
 - blue top U: just one curve path\\
 - black O: differently scaled quarter paths with their stroke-width and
 geometry adjusted to make them look identical; \\listing stroke-width:\\
  - top:     4 | 0.125\\
  - bottom: 16 | 2.5\\
 - blue bottom: line path segments | one dashed line path\\
 - While the mouse is over an element, the element becomes green.\\

 Conclusions from my hrev55788/x86_64/QEMU test run:
 1. If 0 < stroke-width < 1 then it renders as 1.
 2. transform is neglected for path polygonization detail level (same for
 fill).
 3. stroke-dasharray is unimplemented.
 4. ~~???~~
 5. Renderer's bounding box of paths neglects stroke (however, extreme
 points of curves extend the box more than enough).
 6. LCD subpixel antialiasing preference generally affects SVG (should
 always greyscale like other browsers).
 7. The fill-rule equivalent for stroking is uninitialized (should be
 nonzero).
 8. Renderer's bounding box of paths is one path-d unit too big to the
 bottom and right.

 What tests led to conclusions:
 1. The magenta zero-stroke thing is invisible, the O has thick top right
 (0.125 as 1), and bottom right was correctly not rounded to int (2.5).
 2. The number of polylines (look carefully for corners) in O quarters
 increases with stroke-width, i.e. with less upscaling
 3. The bottom blue right half is continuous, also for mouse hover
 detection (thin hover area because of 5.).
 4. ~~Scrolling the bounding box of the top left orange rectangle in/out of
 view toggles orange painting of all black elements (resize window for
 this). With LCD subpixel antialiasing only the fully covered pixels are
 aliased orange with a thin antialiasing rainbow border of black around.
 With greyscale antialiasing there is just a perfect orange stroke, but
 temporary black stroke glitches into view while scrolling. Only happens
 when encountering the combination "fill:none;stroke:#000" after an element
 with only fill but no stroke.~~ Fixed in hrev55883.
 5. Hovering the mouse over elements works only in their bounding box and
 repaints only the same (test especially blue elements; move between them
 and the red cross to get larger repaints).
 6. Change antialiasing preference and reload page.
 7. The red cross has a transparent center. I also saw that effect
 triggered by an unrelated transition somewhere else, without nearby "fill-
 rule:evenodd".
 8. Hovering the top right orange line and considering point 5., the BBox
 is too big towards bottom right. The top right O quarter being orange as
 per point 4., then hovered, updates exactly one path-d unit (equals
 stroke-width with point 1.) too far to the bottom.

--
Comment (by thebuck):

 Point 4. no more observed, assuming fixed by hrev55883. Description
 updated.
-- 
Ticket URL: <https://dev.haiku-os.org/ticket/17538#comment:7>
Haiku <https://dev.haiku-os.org>
The Haiku operating system.

Other related posts: