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:
Markus Stange 2015-04-19 20:48:37 -04:00
parent 1eac8d1918
commit 4a60b47050
4 changed files with 101 additions and 0 deletions

View File

@ -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;
}
}

View File

@ -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>

View File

@ -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>

View File

@ -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