New issue
Advanced search Search tips

Issue 848605 link

Starred by 1 user
Status: Fixed
Owner:
fmalita@chromium.org
Closed: Jun 2018
Cc:
schenney@chromium.org
vmp...@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Chrome , Mac
Pri: 3
Type: Bug



Sign in to add a comment

Incorrect rendering of anisotropic border-radius

Project Member Reported by fmalita@chromium.org, Jun 1 2018 
Chrome Version: ToT
OS: All

What steps will reproduce the problem?

(1) open https://codepen.io/fmalita/pen/QxbVKX

What is the expected result?

The upper-left corner should look the same, regardless of other corners' border-radius.

What happens instead?

When all corners have a border-radius, the inner upper-left corner is non-rectangular.
chrome.png
11.6 KB View Download

Comment 1 by fmalita@chromium.org, Jun 1 2018 

What's going on here is we're trying to convert a filled DRRect [outer - inner] into a stroked RRect for efficiency.

But for non-circular/anisotropic radii, the centered/stroked corner ellipse is not the same geometry as [outer - inner].

E.g. https://fiddle.skia.org/c/cb007face8f2b50130d1c0228a84759a

We have a crude heuristic to reject most egregious cases from the RRect fast-path, but it's obviously insufficient: https://cs.chromium.org/chromium/src/third_party/blink/renderer/platform/graphics/graphics_context.cc?rcl=4efd7e1319f90d6a919b51859301cd8316fbd42a&l=1131
Project Member

Comment 2 by bugdroid1@chromium.org, Jun 1 2018 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/e2eef42958b177eaf8cbbdae667c481d0789421c

commit e2eef42958b177eaf8cbbdae667c481d0789421c
Author: Florin Malita <fmalita@chromium.org>
Date: Fri Jun 01 15:42:31 2018

Revisit GraphicsContext:IsSimpleDRRect() heuristics

GraphicsContext::FillDRRect() employs several heuristics in order to
determine whether a DRRect can be drawn as a (simpler) stroked RRect.

A couple of issues:

1) trivial zero-radius corners are rejected because they don't pass
   the "unconstrained" test (outer_radius == inner_radius + stroke_width).
   This means we are unnecessarily using a more expensive drawDRRect for
   borders which happen to have one or more zero-radius corners.

2) anisotropic/non-circular corners diverge from inner/outer contours
   when drawn as a stroked RRect (most noticeable with thick strokes,
   because the [outer-inner] contour is not the same geometry as the
   stroked centered ellipse).

We try to guard against #2 with an arbitrary stroke limit, but that is
fragile (e.g. the newly added test).

To deal with these problems, update the simple-drrect heuristics to

  a) always accept zero-radius corners

  b) reject all anisotropic/non-circular radii

TEST=ietestcenter/css3/bordersbackgrounds/border-top-left-radius-values-005.htm

Bug:  848203 , 848605 
Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2
Change-Id: I088e98b0afc474162417036e6278a5751f65e73d
Reviewed-on: https://chromium-review.googlesource.com/1081309
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Commit-Queue: Florin Malita <fmalita@chromium.org>
Cr-Commit-Position: refs/heads/master@{#563646}
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/fast/borders/borderRadiusSolid03-expected.png
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/fast/box-shadow/box-shadow-clipped-slices-expected.png
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/fast/clip/nested-rounded-rect-expected.png
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/fast/css/border-radius-non-negative-expected.png
[add] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/ietestcenter/css3/bordersbackgrounds/border-top-left-radius-values-005.htm
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/linux/fast/borders/border-radius-mask-canvas-border-expected.png
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/linux/fast/borders/borderRadiusAllStylesAllCorners-expected.png
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/linux/ietestcenter/css3/bordersbackgrounds/border-top-left-radius-values-002-expected.png
[add] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/linux/ietestcenter/css3/bordersbackgrounds/border-top-left-radius-values-005-expected.png
[add] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/linux/ietestcenter/css3/bordersbackgrounds/border-top-left-radius-values-005-expected.txt
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/mac/fast/borders/border-radius-mask-canvas-border-expected.png
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/mac/fast/borders/borderRadiusAllStylesAllCorners-expected.png
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/mac/fast/css/nested-rounded-corners-expected.png
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/mac/ietestcenter/css3/bordersbackgrounds/border-top-left-radius-values-002-expected.png
[add] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/mac/ietestcenter/css3/bordersbackgrounds/border-top-left-radius-values-005-expected.png
[add] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/mac/ietestcenter/css3/bordersbackgrounds/border-top-left-radius-values-005-expected.txt
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/win/fast/borders/border-radius-mask-canvas-border-expected.png
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/win/fast/borders/borderRadiusAllStylesAllCorners-expected.png
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/win/fast/css/nested-rounded-corners-expected.png
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/win/ietestcenter/css3/bordersbackgrounds/border-top-left-radius-values-002-expected.png
[add] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/win/ietestcenter/css3/bordersbackgrounds/border-top-left-radius-values-005-expected.png
[add] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/WebKit/LayoutTests/platform/win/ietestcenter/css3/bordersbackgrounds/border-top-left-radius-values-005-expected.txt
[modify] https://crrev.com/e2eef42958b177eaf8cbbdae667c481d0789421c/third_party/blink/renderer/platform/graphics/graphics_context.cc

Comment 3 by fmalita@chromium.org, Jun 1 2018

Status: Fixed (was: Started)

Comment 4 by krajshree@chromium.org, Jun 4 2018

Labels: TE-Verified-M69 TE-Verified-69.0.3449.0
Able to reproduce the issue on Mac 10.13.3 using chrome version without fix.

Verified the fix on Mac 10.13.3, Win-10 and Ubuntu 17.10 using Chrome version #69.0.3449.0 as per the comment #0.
Attaching screen shot for reference.
Observed that the upper-left corner looked the same, regardless of other corners' border-radius.
Hence, the fix is working as expected. 
Adding the verified labels.

Thanks...!!
Screen Shot 2018-06-04 at 17.36.26.png
366 KB View Download
►

Sign in to add a comment