215 lines
4.4 KiB
HTML
215 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Box Alignment: align-content block fragmentation: complex block content</title>
|
|
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
|
<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block">
|
|
|
|
<style title="Needed for automation; delete to review/debug">
|
|
@import "/fonts/ahem.css";
|
|
html { font: 10px/1 Ahem; max-width: 800px; }
|
|
</style>
|
|
|
|
<style>
|
|
.pager {
|
|
column-fill: auto;
|
|
column-width: 15em;
|
|
height: 5em;
|
|
}
|
|
.test {
|
|
height: 5em;
|
|
break-inside: avoid;
|
|
/* show bounds of test box without interfering with margin-collapsing */
|
|
border-left: solid black 1em;
|
|
}
|
|
.test:last-child {
|
|
height: 4.5em;
|
|
}
|
|
.large, .float {
|
|
height: 2.5em;
|
|
break-inside: avoid;
|
|
background: orange;
|
|
}
|
|
.float {
|
|
float: right;
|
|
}
|
|
.margin {
|
|
padding: 0.2em; /* using padding because of margin handling bugs
|
|
margin-block: 0.5em;
|
|
}
|
|
.margin > * {
|
|
margin-block: -0.3em;
|
|
switch back once fixed */
|
|
}
|
|
hr {
|
|
border: solid 1px;
|
|
margin: 0.5em;
|
|
}
|
|
|
|
/* readability */
|
|
.pager { border: solid 2px gray; margin: 0.5em 0; }
|
|
.test { color: #8888; text-align: center; }
|
|
.label { color: black; font-weight: bold; }
|
|
|
|
/* reference */
|
|
/* margins are truncated by unforced breaks, so mimic that */
|
|
.margin:first-child { margin-top: 0; padding-top: 0; }
|
|
.margin:last-child { margin-bottom: 0; padding-bottom: 0; }
|
|
|
|
</style>
|
|
|
|
<!--
|
|
This test creates breaks in overflow:
|
|
* between two blocks with collapsing negative margins
|
|
* through the middle of a float
|
|
* through some nested text
|
|
* after a nested float
|
|
-->
|
|
|
|
<div class="pager">
|
|
<div class="test">
|
|
<span class="label">CENTER</span>
|
|
<div class="margin">
|
|
<div class="large"></div>
|
|
</div>
|
|
</div>
|
|
<div class="test">
|
|
<div class="margin">
|
|
<div class="large"></div>
|
|
</div>
|
|
LINE 1<br>LINE 2
|
|
</div>
|
|
<div class="test">
|
|
<div class="float">FLT</div>
|
|
LINE 3
|
|
<hr>
|
|
LINE 4<br>LINE 5
|
|
</div>
|
|
<div class="test">
|
|
<div class="float">FLT</div>
|
|
LINE 6<br>LINE 7
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pager">
|
|
<div class="test">
|
|
<span class="label">END</span>
|
|
<div class="margin">
|
|
<div class="large"></div>
|
|
</div>
|
|
</div>
|
|
<div class="test">
|
|
<div class="margin">
|
|
<div class="large"></div>
|
|
</div>
|
|
LINE 1<br>LINE 2
|
|
</div>
|
|
<div class="test">
|
|
<div class="float">FLT</div>
|
|
LINE 3
|
|
<hr>
|
|
LINE 4<br>LINE 5
|
|
</div>
|
|
<div class="test">
|
|
<div class="float">FLT</div>
|
|
LINE 6<br>LINE 7
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pager">
|
|
<div class="test">
|
|
<span class="label">BASELINE</span>
|
|
<div class="margin">
|
|
<div class="large"></div>
|
|
</div>
|
|
</div>
|
|
<div class="test">
|
|
<div class="margin">
|
|
<div class="large"></div>
|
|
</div>
|
|
LINE 1<br>LINE 2
|
|
</div>
|
|
<div class="test">
|
|
<div class="float">FLT</div>
|
|
LINE 3
|
|
<hr>
|
|
LINE 4<br>LINE 5
|
|
</div>
|
|
<div class="test">
|
|
<div class="float">FLT</div>
|
|
LINE 6<br>LINE 7
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pager">
|
|
<div class="test">
|
|
<span class="label">LAST BASELINE</span>
|
|
<div class="margin">
|
|
<div class="large"></div>
|
|
</div>
|
|
</div>
|
|
<div class="test">
|
|
<div class="margin">
|
|
<div class="large"></div>
|
|
</div>
|
|
LINE 1<br>LINE 2
|
|
</div>
|
|
<div class="test">
|
|
<div class="float">FLT</div>
|
|
LINE 3
|
|
<hr>
|
|
LINE 4<br>LINE 5
|
|
</div>
|
|
<div class="test">
|
|
<div class="float">FLT</div>
|
|
LINE 6<br>LINE 7
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pager">
|
|
<div class="test">
|
|
<span class="label">UNSAFE CENTER</span>
|
|
<div class="margin">
|
|
<div class="large"></div>
|
|
</div>
|
|
</div>
|
|
<div class="test">
|
|
<div class="margin">
|
|
<div class="large"></div>
|
|
</div>
|
|
LINE 1<br>LINE 2
|
|
</div>
|
|
<div class="test">
|
|
<div class="float">FLT</div>
|
|
LINE 3
|
|
<hr>
|
|
LINE 4<br>LINE 5
|
|
</div>
|
|
<div class="test">
|
|
<div class="float">FLT</div>
|
|
LINE 6<br>LINE 7
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pager">
|
|
<div class="test">
|
|
<span class="label">UNSAFE END</span>
|
|
<div class="margin">
|
|
<div class="large"></div>
|
|
</div>
|
|
</div>
|
|
<div class="test">
|
|
<div class="margin">
|
|
<div class="large"></div>
|
|
</div>
|
|
LINE 1<br>LINE 2
|
|
</div>
|
|
<div class="test">
|
|
<div class="float">FLT</div>
|
|
LINE 3
|
|
<hr>
|
|
LINE 4<br>LINE 5
|
|
</div>
|
|
<div class="test">
|
|
<div class="float">FLT</div>
|
|
LINE 6<br>LINE 7
|
|
</div>
|
|
</div>
|