4bfb502c0b
By mistake the specification used to say that, for items spanning multiple tracks, the growth limits of the tracks with an intrinsic max track sizing function should grow to accommodate the minimum contribution of the item. But this was a mistake, because an intrinsic max track sizing function can only be min-content or max-content. So instead of distributing the minimum contribution, it should be the min-content contribution. The spec has been fixed and there is a CSSWG resolution in https://github.com/w3c/csswg-drafts/issues/4790 This patch fixes the problem by reverting 2b923d48ea7e. The change is likely web compatible, since it only affects a rare edge case with 'minmax()' where the min sizing function is 'auto' or a fixed value smaller than the min-content contribution, the max sizing function is 'min-content', and an item whose minimum contribution is forced to be smaller than the min-content contribution, and spans multiple tracks. Differential Revision: https://phabricator.services.mozilla.com/D89145
345 lines
7.8 KiB
HTML
345 lines
7.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<!--
|
|
Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/
|
|
-->
|
|
<html><head>
|
|
<meta charset="utf-8">
|
|
<title>Reference: flex/auto min-sizing</title>
|
|
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151212">
|
|
<style type="text/css">
|
|
body,html { color:black; background:white; font-family:monospace; font-size:16px; padding:0; margin:0; }
|
|
|
|
.grid {
|
|
display: grid;
|
|
border: 1px solid;
|
|
float: left;
|
|
min-width:100px;
|
|
}
|
|
.fixed .grid {
|
|
width:140px;
|
|
}
|
|
|
|
.g1 {
|
|
grid-template-columns: 24px
|
|
minmax(0,0)
|
|
minmax(0,0)
|
|
1fr;
|
|
min-width:104px;
|
|
}
|
|
|
|
.g2 {
|
|
grid-template-columns: minmax(0,max-content)
|
|
minmax(0,0)
|
|
minmax(0,0)
|
|
1fr;
|
|
}
|
|
|
|
.g3 {
|
|
grid-template-columns: minmax(0,auto)
|
|
minmax(0,0)
|
|
minmax(0,0)
|
|
1fr;
|
|
}
|
|
|
|
.g4 {
|
|
grid-template-columns: minmax(2px,0)
|
|
minmax(1px,0)
|
|
minmax(1px,0)
|
|
1fr;
|
|
min-width:104px;
|
|
}
|
|
|
|
.g5 {
|
|
grid-template-columns: minmax(20px,0)
|
|
minmax(0,0)
|
|
minmax(0,0)
|
|
1fr;
|
|
min-width:104px;
|
|
}
|
|
|
|
.g6 {
|
|
grid-template-columns: minmax(2px,0)
|
|
minmax(1px,0)
|
|
minmax(1px,0)
|
|
20px;
|
|
min-width:124px;
|
|
}
|
|
|
|
.g7 {
|
|
grid-template-columns: minmax(20px,1fr)
|
|
minmax(0,0)
|
|
minmax(0,0)
|
|
20px;
|
|
}
|
|
|
|
.g8 {
|
|
grid-template-columns: minmax(0,1fr)
|
|
minmax(0,0)
|
|
minmax(0,0)
|
|
20px;
|
|
}
|
|
|
|
.g9 {
|
|
grid-template-columns: 20px
|
|
30px
|
|
minmax(0,0)
|
|
10px;
|
|
min-width:114px;
|
|
}
|
|
|
|
.gA {
|
|
grid-template-columns: minmax(0,0)
|
|
minmax(min-content,40px)
|
|
minmax(0,0)
|
|
20px;
|
|
min-width:140px;
|
|
}
|
|
|
|
.gB {
|
|
grid-template-columns: minmax(0,0)
|
|
minmax(auto,40px)
|
|
minmax(0,0)
|
|
20px;
|
|
}
|
|
|
|
.gC {
|
|
grid-template-columns: minmax(0,20px)
|
|
minmax(0,40px)
|
|
minmax(0,0)
|
|
20px;
|
|
min-width:124px;
|
|
}
|
|
|
|
.gD {
|
|
grid-template-columns: minmax(auto,20px)
|
|
minmax(auto,40px)
|
|
minmax(0,0)
|
|
min-content;
|
|
}
|
|
|
|
.gE {
|
|
grid-template-columns: minmax(0,20px)
|
|
minmax(0,40px)
|
|
minmax(0,20px)
|
|
auto;
|
|
min-width:104px;
|
|
}
|
|
|
|
.gF {
|
|
grid-template-columns: minmax(0,20px)
|
|
44px
|
|
minmax(0,40px)
|
|
auto;
|
|
}
|
|
|
|
|
|
.t { grid-column: span 3; border:2px solid; }
|
|
.d1 { grid-column: 1 / span 2; background: grey; }
|
|
.d3 { grid-column: 3 / span 2; background: blue; }
|
|
div { min-width:0; min-height:10px; }
|
|
t { display:inline-block; width:20px; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="g1 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="g2 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="g3 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="g4 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="g5 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<br clear="all" style="margin-top:100px">
|
|
|
|
<div class="g6 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="g7 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="g8 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="g9 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<br clear="all" style="margin-top:100px">
|
|
|
|
<div class="gA grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="gB grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="gC grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="gD grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="gE grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="gF grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<br clear="all" style="margin-top:100px">
|
|
|
|
<span class="fixed">
|
|
<div class="g1 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="g2 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="g3 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="g4 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="g5 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<br clear="all" style="margin-top:100px">
|
|
|
|
<div class="g6 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="g7 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="g8 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="g9 grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<br clear="all" style="margin-top:100px">
|
|
|
|
<div class="gA grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="gB grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="gC grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="gD grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<br clear="all" style="margin-top:100px">
|
|
|
|
<div class="gE grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
<div class="gF grid">
|
|
<div class="t"><t>1 </t><t>2 </t><t>3 </t><t>4 </t><t>5</t></div>
|
|
<div class="d1"></div>
|
|
<div class="d3"></div>
|
|
</div>
|
|
|
|
</span>
|
|
|
|
</body>
|
|
</html>
|