Bug 1111292 - Include the column gap(s) in the minimum width calculation when the number of columns is non-auto. r=roc

This commit is contained in:
Mats Palmgren 2014-12-19 16:28:43 +00:00
parent 78bec85183
commit 704323fa5d
5 changed files with 126 additions and 5 deletions

View File

@ -389,9 +389,12 @@ nsColumnSetFrame::GetMinISize(nsRenderingContext *aRenderingContext)
NS_ASSERTION(colStyle->mColumnCount > 0,
"column-count and column-width can't both be auto");
// As available width reduces to zero, we still have mColumnCount columns,
// so multiply the child's min-width by the number of columns.
// so multiply the child's min-width by the number of columns (n) and
// include n-1 column gaps.
colISize = iSize;
iSize *= colStyle->mColumnCount;
nscoord colGap = GetColumnGap(this, colStyle);
iSize += colGap * (colStyle->mColumnCount - 1);
// The multiplication above can make 'width' negative (integer overflow),
// so use std::max to protect against that.
iSize = std::max(iSize, colISize);

View File

@ -4,14 +4,14 @@
<style>
div { -moz-column-count:2; -moz-column-gap:0; border:2px solid black; height:200px; }
div.gap { -moz-column-gap:80px; }
span { display:inline-block; width:50px; }
span { display:inline-block; width:100px; }
</style>
</head>
<body>
<table width="1"><tr><td><div>
<table cellpadding=0 cellspacing=0 width="1"><tr><td><div>
<span></span>
</div></tr></td></table>
<table width="1"><tr><td><div class="gap">
<table cellpadding=0 cellspacing=0 width="1"><tr><td><div class="gap">
<span></span>
</div></tr></td></table>
</body>

View File

@ -0,0 +1,43 @@
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>Testcase for bug 1109571</title>
<style type="text/css">
* {
color:black; background:none; font-size:16px; padding:0; margin:0; font-family:monospace;
}
.c {
height: 2.2em;
line-height: 1em;
border: dotted;
white-space: pre;
position: relative;
}
g { display:inline-block; width:2em; }
z { position:absolute; top:0; bottom:0; color:white; border-right:2px solid blue; margin-left:-1px; }
o { position:absolute; top:0; right:0; width:0; }
x { position:relative; z-index:1; } /* to render it above the blue bar */
</style>
</head>
<body>
<div style="width:250px; border:1px solid">
<table cellpadding=0 cellspacing=0><td><div class="c"><z style="padding-left:1em">&nbsp;&nbsp;&nbsp;&nbsp;</z><x>xxxx</x><g></g><x>xxxx</x><br><x>xxxx</x><g></g><x>xxxx</x></div></td><td><x>xxxxxxxxxxxxxxxxxxxxxxxxx</x></table>
</div>
<div style="width:250px; border:1px solid">
<table cellpadding=0 cellspacing=0><td><div class="c"><z>&nbsp;&nbsp;&nbsp;&nbsp;</z><x>xxxxxxxx</x><br><x>xxxxxxxx</x></div></td><td><x>xxxxxxxxxxxxxxxxxxxxxxxxx</x></table>
</div>
<div style="width:250px; border:1px solid">
<table cellpadding=0 cellspacing=0><td><div class="c"><z style="padding-left:1em">&nbsp;&nbsp;&nbsp;&nbsp;</z><x>xxxx</x><br><x>xxxx</x><o><g></g><x>xxxx</x><br><g></g><x>xxxx</x></o></div></td><td><x>xxxxxxxxxxxxxxxxxxxxxxxxx</x></table>
</div>
<div style="width:250px; border:1px solid">
<table cellpadding=0 cellspacing=0><td><div class="c"><z>&nbsp;&nbsp;&nbsp;&nbsp;</z><x>xxxx</x><br><x>xxxx</x><o><x>xxxx</x><br><x>xxxx</x></o></div></td><td><x>xxxxxxxxxxxxxxxxxxxxxxxxx</x></table>
</div>
</body>
</html>

View File

@ -0,0 +1,74 @@
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>Testcase for bug </title>
<style type="text/css">
* {
color:black; background:none; font-size:16px; padding:0; margin:0; font-family:monospace;
}
.c {
-moz-column-rule:2px solid blue;
-webkit-column-rule:2px solid blue;
-o-column-rule:2px solid blue;
-ms-column-rule:2px solid blue;
column-rule:2px solid blue;
-moz-column-gap:0;
-webkit-column-gap:0;
-o-column-gap:0;
-ms-column-gap:0;
column-gap:0;
height:2.2em;
line-height:1em;
border:dotted;
}
.col2 {
-moz-column-count:2;
-webkit-column-count:2;
-o-column-count:2;
-ms-column-count:2;
column-count:2;
}
.cw {
-moz-column-width:4em;
-webkit-column-width:4em;
-o-column-width:4em;
-ms-column-width:4em;
column-width:4em;
}
.gap {
-moz-column-gap:2em;
-webkit-column-gap:2em;
-o-column-gap:2em;
-ms-column-gap:2em;
column-gap:2em;
}
</style>
</head>
<body>
<div style="width:250px; border:1px solid">
<table cellpadding=0 cellspacing=0><td><div class="c col2 gap">xxxx xxxx xxxx xxxx</div></td><td width="10000">xxxxxxxxxxxxxxxxxxxxxxxxx</table>
</div>
<div style="width:250px; border:1px solid">
<table cellpadding=0 cellspacing=0><td><div class="c col2">xxxx xxxx xxxx xxxx</div></td><td width="10000">xxxxxxxxxxxxxxxxxxxxxxxxx</table>
</div>
<div style="width:250px; border:1px solid">
<table cellpadding=0 cellspacing=0><td><div class="c gap cw">xxxx xxxx xxxx xxxx</div></td><td width="10000">xxxxxxxxxxxxxxxxxxxxxxxxx</table>
</div>
<div style="width:250px; border:1px solid">
<table cellpadding=0 cellspacing=0><td><div class="c cw">xxxx xxxx xxxx xxxx</div></td><td width="10000">xxxxxxxxxxxxxxxxxxxxxxxxx</table>
</div>
</body>
</html>

View File

@ -2,9 +2,10 @@
== pref-width-1a.html pref-width-1-ref.html
== pref-width-1b.html pref-width-1-ref.html
== pref-width-1c.html pref-width-1-ref.html
== min-width-1a.html min-width-1-ref.html
== min-width-1a.html pref-width-1-ref.html
== min-width-1b.html min-width-1-ref.html
== min-width-1c.html min-width-1-ref.html
== min-width-2.html min-width-2-ref.html
== column-balancing-overflow-000.html column-balancing-overflow-000.ref.html
== column-balancing-overflow-001.html column-balancing-overflow-000.ref.html
== column-balancing-overflow-002.html column-balancing-overflow-002.ref.html