зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1681610: Use thicker borders when faking rounded rectangles. r=gw
`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
This commit is contained in:
Родитель
7e9fbe5a65
Коммит
692a10e624
|
@ -0,0 +1,41 @@
|
|||
<!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>
|
|
@ -0,0 +1,40 @@
|
|||
<!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
|
||||
|
|
|
@ -1169,9 +1169,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}};
|
||||
|
||||
|
|
Загрузка…
Ссылка в новой задаче