947b68bf40
This check is based on the exact definition in the spec, and ideally would be a superset of the cases where it is currently applied. This also updates some test expectations. It seems that perhaps layout/reftests/css-grid/grid-flex-min-sizing-001.html isn't so useful, as the tests and refs are almost identical now. The layout reftest changes reflect behavior in other browsers, and appear more correct after examination. As noted in the past, these tests depend on known incorrect behavior to begin with. This difference was not caught by the WPT, and a test case will be added to WPT in the next part of this bug. This re-breaks table-grid-item-dynamic-004.html which was fixed by bug 1916849, however I believe this was fixed on accident in that bug. It doesn't seem that those changes should have fixed that test, and likely it was the slightly different handling of this flag that caused it to "work". Differential Revision: https://phabricator.services.mozilla.com/D244447
266 lines
5.5 KiB
HTML
266 lines
5.5 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;
|
|
}
|
|
|
|
.g0 {
|
|
display: grid;
|
|
grid-template-columns: minmax(min-content,min-content);
|
|
border:1px solid;
|
|
float: left;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.g1 {
|
|
grid-template-columns: 24px
|
|
minmax(0,0)
|
|
minmax(0,0)
|
|
1fr;
|
|
min-width: 24px;
|
|
}
|
|
|
|
.g2 {
|
|
grid-template-columns: min-content
|
|
0
|
|
0
|
|
1fr;
|
|
}
|
|
|
|
.g3 {
|
|
grid-template-columns: min-content
|
|
0
|
|
0
|
|
1fr;
|
|
}
|
|
|
|
.g4 {
|
|
grid-template-columns: minmax(2px,0)
|
|
1px
|
|
1px
|
|
0;
|
|
}
|
|
|
|
.g5 {
|
|
grid-template-columns: minmax(20px,0)
|
|
minmax(0,0)
|
|
minmax(0,0)
|
|
0;
|
|
}
|
|
|
|
.g6 {
|
|
grid-template-columns: minmax(1.333333px,0)
|
|
minmax(1.333333px,0)
|
|
minmax(1.333333px,0)
|
|
20px;
|
|
}
|
|
|
|
.g7 {
|
|
grid-template-columns: minmax(20px,1fr)
|
|
minmax(min-content,0)
|
|
minmax(min-content,0)
|
|
20px;
|
|
}
|
|
|
|
.g8 {
|
|
grid-template-columns: minmax(min-content,1fr)
|
|
minmax(min-content,0)
|
|
minmax(min-content,0)
|
|
20px;
|
|
}
|
|
|
|
.g9 {
|
|
grid-template-columns: 20px
|
|
30px
|
|
minmax(min-content,0)
|
|
10px;
|
|
}
|
|
|
|
.gA {
|
|
grid-template-columns: minmax(min-content,0)
|
|
minmax(min-content,40px)
|
|
minmax(min-content,0)
|
|
20px;
|
|
}
|
|
|
|
.gB {
|
|
grid-template-columns: 24px
|
|
0
|
|
0
|
|
20px;
|
|
min-width: 44px;
|
|
}
|
|
|
|
.gC {
|
|
grid-template-columns: minmax(24px,0)
|
|
0
|
|
0
|
|
20px;
|
|
min-width: 44px;
|
|
}
|
|
|
|
.gD {
|
|
grid-template-columns: minmax(24px,0)
|
|
0
|
|
0
|
|
0;
|
|
}
|
|
|
|
.gE {
|
|
grid-template-columns: minmax(8px,0)
|
|
minmax(8px,0)
|
|
minmax(8px,0)
|
|
0px;
|
|
}
|
|
|
|
.gF {
|
|
grid-template-columns: 2px
|
|
20px
|
|
2px
|
|
0;
|
|
}
|
|
|
|
|
|
.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="g0">
|
|
<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>
|
|
|
|
<div class="g0">
|
|
<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>
|
|
|
|
<div class="g0">
|
|
<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>
|
|
|
|
<div class="g0">
|
|
<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>
|
|
|
|
<div class="g0">
|
|
<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>
|
|
</div>
|
|
|
|
<br clear="all" style="margin-top:100px">
|
|
|
|
<div class="g0">
|
|
<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>
|
|
|
|
<div class="g0">
|
|
<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>
|
|
|
|
<div class="g0">
|
|
<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>
|
|
</div>
|
|
|
|
<br clear="all" style="margin-top:100px">
|
|
|
|
<div class="g0">
|
|
<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>
|
|
|
|
<div class="g0">
|
|
<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>
|
|
|
|
<div class="g0">
|
|
<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>
|
|
|
|
<div class="g0">
|
|
<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>
|
|
|
|
<div class="g0">
|
|
<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>
|
|
|
|
<div class="g0">
|
|
<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>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|