Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dotted borders render incorrectly #1932

Closed
nc4rrillo opened this issue Oct 25, 2017 · 6 comments
Closed

Dotted borders render incorrectly #1932

nc4rrillo opened this issue Oct 25, 2017 · 6 comments
Assignees

Comments

@nc4rrillo
Copy link
Contributor

@nc4rrillo nc4rrillo commented Oct 25, 2017

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: []
@kvark kvark added the type: bug label Oct 26, 2017
@nc4rrillo
Copy link
Contributor Author

@nc4rrillo nc4rrillo commented Nov 2, 2017

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

@nical nical self-assigned this Nov 7, 2017
@nical
Copy link
Collaborator

@nical nical commented Nov 7, 2017

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."

@nical
Copy link
Collaborator

@nical nical commented Nov 7, 2017

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

@pcwalton
Copy link
Collaborator

@pcwalton pcwalton commented Nov 7, 2017

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

@nical
Copy link
Collaborator

@nical nical commented Nov 7, 2017

@nical nical added the bugzilled label Nov 7, 2017
bors-servo added a commit that referenced this issue Nov 8, 2017
Fix rendering of dotted corners when corner radius < border width.

Fixes #1932.

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/webrender/2007)
<!-- Reviewable:end -->
@nical
Copy link
Collaborator

@nical nical commented Nov 9, 2017

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

@nical nical closed this Nov 9, 2017
bors-servo added a commit that referenced this issue Nov 9, 2017
Fix rendering of dotted corners when corner radius < border width.

Fixes #1932.

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/webrender/2007)
<!-- Reviewable:end -->
bors-servo added a commit that referenced this issue Nov 9, 2017
Fix rendering of dotted corners when corner radius < border width.

Fixes #1932.

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/webrender/2007)
<!-- Reviewable:end -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
You can’t perform that action at this time.