Bug 812899 part 3 - Make vertical 'auto' margins on absolutely positioned elements always center, even when the margins are negative. r=dbaron

This commit is contained in:
Karl Dubost 2015-12-03 14:24:00 +09:00
Родитель 6019ca23a6
Коммит 371b14248e
3 изменённых файлов: 68 добавлений и 9 удалений

Просмотреть файл

@ -1799,15 +1799,10 @@ nsHTMLReflowState::InitAbsoluteConstraints(nsPresContext* aPresContext,
if (marginBStartIsAuto) {
if (marginBEndIsAuto) {
if (availMarginSpace < 0) {
// FIXME: Note that the spec doesn't actually say we should do this!
margin.BEnd(cbwm) = availMarginSpace;
} else {
// Both margin-block-start and -end are 'auto', so they get
// equal values
margin.BStart(cbwm) = availMarginSpace / 2;
margin.BEnd(cbwm) = availMarginSpace - margin.BStart(cbwm);
}
// Both 'margin-top' and 'margin-bottom' are 'auto', so they get
// equal values
margin.BStart(cbwm) = availMarginSpace / 2;
margin.BEnd(cbwm) = availMarginSpace - margin.BStart(cbwm);
} else {
// Just margin-block-start is 'auto'
margin.BStart(cbwm) = availMarginSpace;

Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<title> absolutely positioned element should be vertically centered even if the height is bigger than that of the containing block (reference) - bug 812899</title>
<style>
body > div {
font-size: 16px;
position: relative;
border: red solid;
margin-top: 5em;
width: 5em;
height: 5em;
}
body > div > div {
position: absolute;
border: medium solid blue;
margin: -23px auto;
height: 150%;
width: 150%;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
</style>
<body>
<div>
<div></div>
</div>
</body>
</html>

Просмотреть файл

@ -0,0 +1,32 @@
<!DOCTYPE HTML>
<title> absolutely positioned element should be vertically centered even if the height is bigger than that of the containing block (reference) - bug 812899</title>
<style>
body > div {
font-size: 16px;
position: relative;
border: red solid;
margin-top: 5em;
width: 5em;
height: 5em;
}
body > div > div {
position: absolute;
border: medium solid blue;
margin: auto auto;
height: 150%;
width: 150%;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
</style>
<body>
<div>
<div></div>
</div>
</body>
</html>