Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-break/break-inside-avoid-min-block-size-1.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: break-inside:avoid min-block-size block</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="match" href="break-inside-avoid-min-block-size-1-ref.html">
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
.columns {
columns: 3;
background: grey;
margin-block-end: 1px;
inline-size: 500px;
}
.fill {
column-fill: auto;
}
.short {
block-size: 30px;
}
.tall {
block-size: 60px;
}
.columns > div {
break-inside: avoid;
min-block-size: 40px;
background: blue;
}
.columns > div:nth-child(2n) { background: lightblue; }
</style>
</head>
<body>
<div class="columns">
<div></div>
<div></div>
</div>
<div class="columns">
<div> <br> </div>
<div> <br> </div>
</div>
<div class="columns short">
<div></div>
<div></div>
</div>
<div class="columns short">
<div> <br> </div>
<div> <br> </div>
</div>
<div class="columns tall">
<div></div>
<div></div>
</div>
<div class="columns tall">
<div> <br> </div>
<div> <br> </div>
</div>
<div class="columns fill short">
<div></div>
<div></div>
</div>
<div class="columns fill short">
<div> <br> </div>
<div> <br> </div>
</div>
<div class="columns fill tall">
<div></div>
<div></div>
</div>
<div class="columns fill tall">
<div> <br> </div>
<div> <br> </div>
</div>
</body>
</html>