Webrender: Dotted borders render incorrectly

Created on 25 Oct 2017  路  6Comments  路  Source: servo/webrender

Hi,
I've noticed dotted borders render the corners seemingly incorrectly.

---
root: 
  items: 
    - 
      bounds: [5, 5, 490, 490]
      "clip-rect": [5, 5, 490, 490]
      "clip-and-scroll": 0
      "backface-visible": true
      type: border
      width: 25
      "border-type": normal
      color: black
      style: dotted
  id: [0, 0]
pipelines: []
bugzilled bug

All 6 comments

Seems related to having a radius < width for the border

---
root: 
  items: 
    - 
      bounds: [5, 5, 490, 490]
      "clip-rect": [5, 5, 490, 490]
      "clip-and-scroll": 0
      "backface-visible": true
      type: border
      width: 25
      "border-type": normal
      color: black
      style: dotted
      "radius": 35
  id: [0, 0]
pipelines: []

renders as:

FWIW I've seen this on Linux and on Windows with my discreet GPU

I traced it down to the creation of BorderCornerClipSource in border.rs where we compute the ellipse of a dotted corner with negative radii due to subtracting the width to the corner radius (good catch @nc4rrillo!). The code that positions the dots for the corner expects positive ellipse raddii, and using the abs fixes the missing pieces.
However, because of the way this code places the dots on the corners and edges, we end up with overlapping dots in some cases which is somewhat underwhelming. Is there any bit of specification about how the dots should be positioned?

All I can find in the CSS spec is "The border is a series of dots."

For reference, Gecko has a pretty complex dotted corner implementation (with delicious ascii art) but it doesn't link to any spec.

@nical Based on experience with CSS 2.1, I highly doubt there's a detailed spec for dotted borders.

The clipped corners are fixed in #2007, the remaining work (ugly overlap) is tracked in #2013.

Was this page helpful?
0 / 5 - 0 ratings