Bug 893298 - Correctly calculate button and button child's desired height to vertically center the child. r=bz

This commit is contained in:
Bear Travis 2013-07-18 14:21:47 -07:00
parent a0acaa5dce
commit 1ac69282f5
4 changed files with 68 additions and 19 deletions

View File

@ -267,38 +267,28 @@ nsHTMLButtonControlFrame::ReflowButtonContents(nsPresContext* aPresContext,
aFocusPadding.top + aReflowState.mComputedBorderPadding.top,
0, aStatus);
// calculate the min internal height so the contents gets centered correctly.
// XXXbz this assumes border-box sizing.
nscoord minInternalHeight = aReflowState.mComputedMinHeight -
aReflowState.mComputedBorderPadding.TopBottom();
minInternalHeight = std::max(minInternalHeight, 0);
// Compute our desired height before vertically centering our children
nscoord actualDesiredHeight = 0;
if (aReflowState.ComputedHeight() != NS_INTRINSICSIZE) {
aDesiredSize.height = aReflowState.ComputedHeight();
actualDesiredHeight = aReflowState.ComputedHeight();
} else {
aDesiredSize.height += aFocusPadding.TopBottom();
actualDesiredHeight = aDesiredSize.height + aFocusPadding.TopBottom();
// Make sure we obey min/max-height in the case when we're doing intrinsic
// sizing (we get it for free when we have a non-intrinsic
// aReflowState.ComputedHeight()). Note that we do this before adjusting
// for borderpadding, since mComputedMaxHeight and mComputedMinHeight are
// content heights.
aDesiredSize.height = NS_CSS_MINMAX(aDesiredSize.height,
actualDesiredHeight = NS_CSS_MINMAX(actualDesiredHeight,
aReflowState.mComputedMinHeight,
aReflowState.mComputedMaxHeight);
}
// center child vertically
nscoord yoff = 0;
if (aReflowState.ComputedHeight() != NS_INTRINSICSIZE) {
yoff = (aReflowState.ComputedHeight() - aDesiredSize.height)/2;
// center child vertically in the content area
nscoord yoff = (actualDesiredHeight - aFocusPadding.TopBottom() - aDesiredSize.height) / 2;
if (yoff < 0) {
yoff = 0;
}
} else if (aDesiredSize.height < minInternalHeight) {
yoff = (minInternalHeight - aDesiredSize.height) / 2;
}
// Place the child
FinishReflowChild(aFirstKid, aPresContext, &reflowState, aDesiredSize,
@ -309,8 +299,9 @@ nsHTMLButtonControlFrame::ReflowButtonContents(nsPresContext* aPresContext,
aDesiredSize.ascent = aFirstKid->GetBaseline();
// Adjust the baseline by our offset (since we moved the child's
// baseline by that much).
// baseline by that much), and set our actual desired height.
aDesiredSize.ascent += yoff;
aDesiredSize.height = actualDesiredHeight;
}
nsresult nsHTMLButtonControlFrame::SetFormProperty(nsIAtom* aName, const nsAString& aValue)

View File

@ -2,3 +2,4 @@ asserts(2) == first-letter-1.html first-letter-1-ref.html
asserts(1) != first-letter-1.html first-letter-1-noref.html
== max-height.html max-height-ref.html
== min-height.html min-height-ref.html
== vertical-centering.html vertical-centering-ref.html

View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 100px;
display: inline-block;
border: 0;
padding: 0;
font: 2em/100px sans-serif;
color: white;
text-align: center;
background: blue;
color: white;
}
</style>
</head>
<body>
<div>button</div>
<div>button</div>
</body>
</html>

View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<style>
input, div {
height: 100px;
width: 100px;
display: inline-block;
border: 0;
padding: 0;
font: 2em sans-serif;
color: white;
background-color: blue;
color: white;
}
input::-moz-focus-inner {
padding: 0;
border: 0;
}
div {
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<input type='button' value='button' />
<div>button</div>
</body>
</html>