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

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
Родитель 14dbea4c39
Коммит 151341e046
4 изменённых файлов: 71 добавлений и 19 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

29
layout/forms/nsHTMLButtonControlFrame.cpp
Просмотреть файл

@ -266,38 +266,28 @@ nsHTMLButtonControlFrame::ReflowButtonContents(nsPresContext* aPresContext,
xoffset,
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;
if (yoff < 0) {
yoff = 0;
}
} else if (aDesiredSize.height < minInternalHeight) {
yoff = (minInternalHeight - aDesiredSize.height) / 2;
// center child vertically in the content area
nscoord yoff = (actualDesiredHeight - aFocusPadding.TopBottom() - aDesiredSize.height) / 2;
if (yoff < 0) {
yoff = 0;
}
// Place the child
@ -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)

1
layout/reftests/forms/button/reftest.list
Просмотреть файл

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

25
layout/reftests/forms/button/vertical-centering-ref.html Normal 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: transparent;
color: black;
}
</style>
</head>
<body>
<div>button</div>
<div>button</div>
</body>
</html>

35
layout/reftests/forms/button/vertical-centering.html Normal file
Просмотреть файл

@ -0,0 +1,35 @@
<!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: transparent;
color: black;
}
input {
-moz-appearance: none;
}
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>