зеркало из 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:
Jim Blandy
Родитель
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
|
== 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
|
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
|
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
|
// - clips are not cached; borders are
|
||||||
// - a simple border like this will be drawn as an image
|
// - a simple border like this will be drawn as an image
|
||||||
// - Processing lots of clips is not WebRender's strong point.
|
// - 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};
|
wr::BorderSide side = {aColor, wr::BorderStyle::Solid};
|
||||||
float h = aBounds.size.width / 2;
|
float h = aBounds.size.width * 0.6f;
|
||||||
float v = aBounds.size.height / 2;
|
float v = aBounds.size.height * 0.6f;
|
||||||
wr::LayoutSideOffsets widths = {v, h, v, h};
|
wr::LayoutSideOffsets widths = {v, h, v, h};
|
||||||
wr::BorderRadius radii = {{h, v}, {h, v}, {h, v}, {h, v}};
|
wr::BorderRadius radii = {{h, v}, {h, v}, {h, v}, {h, v}};
|
||||||
|
|
||||||
|
|
|
||||||
Загрузка…
Ссылка в новой задаче