mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1700802 - Add a small radius to the auto style outline. r=mstange 

(When not following the frame's border radius of course)

This makes stuff like:

  data:text/html,<input style="border-color: lightgrey">

More aesthetically pleasing when focused, and we still keep the square
inside the outline (this is what Safari does).

Differential Revision: https://phabricator.services.mozilla.com/D109680
This commit is contained in:
Emilio Cobos Álvarez 2021-03-25 11:28:08 +00:00
Родитель 400ed7383c
Коммит ab1118bc65
4 изменённых файлов: 57 добавлений и 41 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

50
layout/reftests/outline/outline-auto-001-ref.html
Просмотреть файл

@ -1,26 +1,36 @@
<!DOCTYPE HTML>
<html><head>
<title>Testcase for outline:auto</title>
<style type="text/css">
html,body {
color:black; background-color:white; padding:10px; margin:0;
}
.a { outline:auto; width:190px; height:10px; background:black; }
.w { border:solid black; border-width:5px; margin:20px; width:190px; }
</style>
</head>
<body>
<title>Testcase for outline:auto</title>
<style>
html, body {
color: black;
background-color: white;
padding: 10px;
margin: 0;
}
.a, .a2 {
outline: auto;
width:190px;
height: 10px;
background: black;
}
.a2 {
width: 194px;
height: 14px;
margin-left: -2px;
margin-top: -2px;
}
.w {
border: solid black;
border-width: 5px;
margin: 20px;
width: 190px;
height: 10px;
}
</style>
<div class="w"><div class="a" style="outline-width:10px; outline-offset:5px;"></div></div>
<div class="w"><div class="a" style="outline-width:10px; outline-offset:10px;"></div></div>
<div class="w"><div class="a" style="outline-width:10px; outline-offset:0px;"></div></div>
<div class="w"><div class="a2" style="outline-width:10px; outline-offset:-2px;"></div></div>
<div class="w"><div class="a" style="outline-width:15px; outline-offset:6px;"></div></div>
<div class="w"><div class="a" style="outline-width:15px; outline-offset:4px;"></div></div>
<div class="w"><div class="a" style="outline-width:11px; outline-offset:5px;"></div></div>
<div class="w"><div class="a" style="outline-width:11px; outline-offset:10px;"></div></div>
<div class="w"><div class="a" style="outline-width:11px; outline-offset:0px;"></div></div>
</body>
</html>
<div class="w"><div class="a2" style="outline-width:11px; outline-offset:-2px;"></div></div>

1
layout/reftests/outline/outline-auto-001-solid-ref.html
Просмотреть файл

@ -17,7 +17,6 @@
<div style="outline-width:0; outline-offset:5px;"></div>
<div style="outline-width:0; outline-offset:-5px;"></div>
<div style="outline-width:5px; outline-offset:1px;"></div>
<div style="outline-width:5px; outline-offset:-1px;"></div>
<div style="outline-width:1px; outline-offset:0;"></div>
<div style="outline-width:1px; outline-offset:5px;"></div>
<div style="outline-width:1px; outline-offset:-5px;"></div>

38
layout/reftests/outline/outline-auto-001.html
Просмотреть файл

@ -1,26 +1,28 @@
<!DOCTYPE HTML>
<html><head>
<title>Testcase for outline:auto</title>
<style type="text/css">
html,body {
color:black; background-color:white; padding:10px; margin:0;
}
div { outline:auto; width:200px; margin:20px; height:20px; background:black; }
.b div { border:solid blue; border-width: 1px 3px 5px 7px; }
</style>
</head>
<body>
<title>Testcase for outline:auto</title>
<style>
html, body {
color: black;
background-color: white;
padding: 10px;
margin: 0;
}
div {
outline: auto;
width: 200px;
margin: 20px;
height: 20px;
background: black;
}
.b div {
border: solid blue;
border-width: 1px 3px 5px 7px;
}
</style>
<div style="outline-width:0; outline-offset:0;"></div>
<div style="outline-width:0; outline-offset:5px;"></div>
<div style="outline-width:0; outline-offset:-5px;"></div>
<div style="outline-width:5px; outline-offset:1px;"></div>
<div style="outline-width:5px; outline-offset:-1px;"></div>
<div style="outline-width:1px; outline-offset:0;"></div>
<div style="outline-width:1px; outline-offset:5px;"></div>
<div style="outline-width:1px; outline-offset:-5px;"></div>
</body>
</html>

9
widget/nsNativeBasicTheme.cpp
Просмотреть файл

@ -1832,15 +1832,20 @@ void nsNativeBasicTheme::PaintAutoStyleOutline(nsIFrame* aFrame,
LayoutDeviceCoord(SnapBorderWidth(kInnerFocusOutlineWidth, aDpiRatio));
rect.Inflate(width);
const nscoord offset = aFrame->StyleOutline()->mOutlineOffset.ToAppUnits();
nscoord cssRadii[8];
if (!aFrame->GetBorderRadii(cssRadii)) {
const CSSCoord cssOffset = CSSCoord::FromAppUnits(offset);
const CSSCoord radius =
cssOffset >= 0.0f
? kInnerFocusOutlineWidth
: std::max(kInnerFocusOutlineWidth + cssOffset, CSSCoord(0.0f));
return PaintRoundedRectWithRadius(aPaintData, rect, sRGBColor::White(0.0f),
innerColor, kInnerFocusOutlineWidth,
/* aRadius = */ 0.0f, aDpiRatio);
radius, aDpiRatio);
}
nsPresContext* pc = aFrame->PresContext();
const nscoord offset = aFrame->StyleOutline()->mOutlineOffset.ToAppUnits();
const Float devPixelOffset = pc->AppUnitsToFloatDevPixels(offset);
RectCornerRadii innerRadii;