Opened 3 years ago

Last modified 10 months ago

#17538 new bug

WebPositive SVG stroke rendering — at Version 3

Reported by: thebuck Owned by: pulkomandy
Priority: normal Milestone: Unscheduled
Component: Kits/Web Kit Version: R1/Development
Keywords: SVG Cc:
Blocked By: Blocking:
Platform: All

Description (last modified by thebuck)

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.

Change History (4)

comment:1 by thebuck, 3 years ago

Description: modified (diff)

comment:2 by thebuck, 3 years ago

Description: modified (diff)

by thebuck, 3 years ago

Attachment: stroke-test.svg added

version 3, to demonstrate also point 7.

comment:3 by thebuck, 3 years ago

Description: modified (diff)
Note: See TracTickets for help on using tickets.