forked from mirrors/gecko-dev
75 lines
1.7 KiB
HTML
75 lines
1.7 KiB
HTML
<!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">
|
|
<style>
|
|
html,body {
|
|
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
|
|
writing-mode: vertical-rl;
|
|
}
|
|
.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 {
|
|
block-size: 40px;
|
|
background: blue;
|
|
}
|
|
.columns > div:nth-child(2n) { background: lightblue; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="columns fill" style="block-size:40px">
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="columns fill" style="block-size:40px">
|
|
<div> <br> </div>
|
|
<div> <br> </div>
|
|
</div>
|
|
<div class="columns short">
|
|
<div style="margin-block-end:20px"></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="columns short">
|
|
<div style="margin-block-end:20px"> <br> </div>
|
|
<div> <br> </div>
|
|
</div>
|
|
<div class="columns tall">
|
|
<div style="margin-block-end:40px"></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="columns tall">
|
|
<div style="margin-block-end:40px"> <br> </div>
|
|
<div> <br> </div>
|
|
</div>
|
|
<div class="columns fill short">
|
|
<div style="margin-block-end:20px"></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="columns fill short">
|
|
<div style="margin-block-end:20px"> <br> </div>
|
|
<div> <br> </div>
|
|
</div>
|
|
<div class="columns fill tall">
|
|
<div style="margin-block-end:40px"></div>
|
|
<div></div>
|
|
</div>
|
|
<div class="columns fill tall">
|
|
<div style="margin-block-end:40px"> <br> </div>
|
|
<div> <br> </div>
|
|
</div>
|
|
</body>
|
|
</html>
|