зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1156129 - Take border radius into account when calculating the bounds of border display items. r=roc
--HG-- extra : rebase_source : 4fdf851e055514fcf1b3a7d894a158ce8b384e6a
This commit is contained in:
Родитель
1eac8d1918
Коммит
4a60b47050
|
@ -3413,6 +3413,26 @@ nsDisplayBorder::CalculateBounds(const nsStyleBorder& aStyleBorder)
|
|||
result.UnionRect(result, nsRect(borderBounds.X(), borderBounds.Y(), border.left, borderBounds.Height()));
|
||||
}
|
||||
|
||||
nscoord radii[8];
|
||||
if (mFrame->GetBorderRadii(radii)) {
|
||||
if (border.left > 0 || border.top > 0) {
|
||||
nsSize cornerSize(radii[NS_CORNER_TOP_LEFT_X], radii[NS_CORNER_TOP_LEFT_Y]);
|
||||
result.UnionRect(result, nsRect(borderBounds.TopLeft(), cornerSize));
|
||||
}
|
||||
if (border.top > 0 || border.right > 0) {
|
||||
nsSize cornerSize(radii[NS_CORNER_TOP_RIGHT_X], radii[NS_CORNER_TOP_RIGHT_Y]);
|
||||
result.UnionRect(result, nsRect(borderBounds.TopRight() - nsPoint(cornerSize.width, 0), cornerSize));
|
||||
}
|
||||
if (border.right > 0 || border.bottom > 0) {
|
||||
nsSize cornerSize(radii[NS_CORNER_BOTTOM_RIGHT_X], radii[NS_CORNER_BOTTOM_RIGHT_Y]);
|
||||
result.UnionRect(result, nsRect(borderBounds.BottomRight() - nsPoint(cornerSize.width, cornerSize.height), cornerSize));
|
||||
}
|
||||
if (border.bottom > 0 || border.left > 0) {
|
||||
nsSize cornerSize(radii[NS_CORNER_BOTTOM_LEFT_X], radii[NS_CORNER_BOTTOM_LEFT_Y]);
|
||||
result.UnionRect(result, nsRect(borderBounds.BottomLeft() - nsPoint(0, cornerSize.height), cornerSize));
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>The bounds calculation for border display items needs to take the border radius into account</title>
|
||||
|
||||
<style>
|
||||
|
||||
div {
|
||||
margin: 10px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
#one {
|
||||
border-top: 10px solid blue;
|
||||
}
|
||||
|
||||
#two {
|
||||
border-top: 1px solid blue;
|
||||
opacity: 0.5;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
#three {
|
||||
border-top: 1px solid blue;
|
||||
mix-blend-mode: overlay;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="one"></div>
|
||||
<div id="two"></div>
|
||||
<div id="three"></div>
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>The bounds calculation for border display items needs to take the border radius into account</title>
|
||||
|
||||
<style>
|
||||
|
||||
div {
|
||||
margin: 10px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
#one {
|
||||
border-top: 30px solid blue;
|
||||
}
|
||||
|
||||
#two {
|
||||
border-top: 1px solid blue;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#three {
|
||||
border-top: 1px solid blue;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="one"></div>
|
||||
<div id="two"></div>
|
||||
<div id="three"></div>
|
||||
|
||||
<script>
|
||||
|
||||
window.addEventListener("MozReftestInvalidate", function (e) {
|
||||
document.getElementById("one").style.borderTopWidth = "10px";
|
||||
|
||||
document.documentElement.removeAttribute("class");
|
||||
});
|
||||
|
||||
</script>
|
|
@ -1875,3 +1875,4 @@ fuzzy-if(d2d,36,304) HTTP(..) == 1116480-1-fakeitalic-overflow.html 1116480-1-fa
|
|||
skip-if(B2G||Mulet) == 1150021-1.xul 1150021-1-ref.xul
|
||||
== 1151145-1.html 1151145-1-ref.html
|
||||
== 1151306-1.html 1151306-1-ref.html
|
||||
== 1156129-1.html 1156129-1-ref.html
|
||||
|
|
Загрузка…
Ссылка в новой задаче