Commit c801a944 authored by Jim Blandy's avatar Jim Blandy
Browse files

Bug 1681610: Use thicker borders when faking rounded rectangles. r=gw, a=jcristau

`DisplayListBuilder::PushRoundedRect`, used for unordered list bullets and the
like, draws rounded rectangles as ordinary rectangles with rounded borders that
have a radius of half the rectangle. Unfortunately, this leads to tiny white
dots at the center of the bullet under some magnifications. I haven't diagnosed
why - perhaps there's something somewhere that snaps borders outward.

Increasing the thickness of the borders to (an impossible) 60% of the width of
the rectangle makes the problem go away. If this kludge doesn't work, we could
add a rectangle covering the center.

Differential Revision: https://phabricator.services.mozilla.com/D100753
parent 5bdbe62a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin-left: 100px;
font-size: 500%;
font-family: Nimbus Sans, sans-serif;
}
ul {
width: 1em; /* This must to be non-zero, for the percentages to work. */
}
li {
/* This clip path is chosen to mask off all the rounded edges of a
'disc' list item marker, to hide the anti-aliased pixels along the
round edges of the bullets from the reftest. This makes correctly
rendered 'disc' and 'square' list item markers appear identical,
while a bogus clear pixel in the middle of a 'disc' marker (the
present bug) still shows up.
The exact placement and rendering of the marker is up to the user
agent, so these values are specific to Firefox. The right and left
inset values fall outside the usual 0%-100% range because the
marker appears to the left of the <li>'s border box. */
clip-path: inset(44% 159% 44% -74%);
list-style-type: square;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin-left: 100px;
font-size: 500%;
font-family: Nimbus Sans, sans-serif;
}
ul {
width: 1em; /* This must to be non-zero, for the percentages to work. */
}
li {
/* This clip path is chosen to mask off all the rounded edges of a
'disc' list item marker, to hide the anti-aliased pixels along the
round edges of the bullets from the reftest. This makes correctly
rendered 'disc' and 'square' list item markers appear identical,
while a bogus clear pixel in the middle of a 'disc' marker (the
present bug) still shows up.
The exact placement and rendering of the marker is up to the user
agent, so these values are specific to Firefox. The right and left
inset values fall outside the usual 0%-100% range because the
marker appears to the left of the <li>'s border box. */
clip-path: inset(44% 159% 44% -74%);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
......@@ -26,3 +26,4 @@ fuzzy-if(webrender,2-7,17500-36908) == 1523776.html 1523776-ref.html
== 1616444-same-color-different-paths.html 1616444-same-color-different-paths-ref.html
skip-if(!asyncPan||!webrender||Android) fuzzy-if(winWidget,94-94,3415-3415) pref(apz.allow_zooming,true) == picture-caching-on-async-zoom.html picture-caching-on-async-zoom.html?ref
pref(apz.allow_zooming,true) == 1662062-1-no-blurry.html 1662062-1-ref.html
== 1681610.html 1681610-ref.html
......@@ -1164,9 +1164,12 @@ void DisplayListBuilder::PushRoundedRect(const wr::LayoutRect& aBounds,
// - clips are not cached; borders are
// - a simple border like this will be drawn as an image
// - Processing lots of clips is not WebRender's strong point.
//
// Made the borders thicker than one half the width/height, to avoid
// little white dots at the center at some magnifications.
wr::BorderSide side = {aColor, wr::BorderStyle::Solid};
float h = aBounds.size.width / 2;
float v = aBounds.size.height / 2;
float h = aBounds.size.width * 0.6f;
float v = aBounds.size.height * 0.6f;
wr::LayoutSideOffsets widths = {v, h, v, h};
wr::BorderRadius radii = {{h, v}, {h, v}, {h, v}, {h, v}};
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment