Google Git
Sign in
chromium/external/github.com/web-platform-tests/wpt/refs/heads/add-comment/./css/css-align/blocks/align-content-block-002-ref.html
blob: d7bde74e9eb000fc20174fda459b59b919df08d3 [file] [edit]
<!DOCTYPE html>
<title>CSS Box Alignment: align-content on large block container</title>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<style title="Needed for automation; delete to review/debug">
@import "/fonts/ahem.css";
html { font: 10px/1 Ahem; max-width: 800px; }
.label { display: none; }
</style>
<style>
html, body { margin: 0; padding: 0; }
.test { height: 5em; margin: 0.5em 2em;
/* show bounds of test box without interfering with margin-collapsing */
background: black; padding-right: 2px;
/* ensure bullet follows first line */
display: list-item; }
/* ensure margin is contained */
.in-flow { margin: 1em 0 0.4em; background: orange }
/* ensure relpos is ignored */
.relpos { position: relative; top: -1.5em; }
/* ensure abspos static position follows alignment */
.wrapper { position: relative; }
.abspos { position: absolute; right: 0; margin-top: -1.5em; }
/* ensure overflow is not counted */
.overflow { height: 0; }
/* cram into 800x600 */
html { max-height: 600px; columns: 3 }
.wrapper { break-inside: avoid; border: solid 2px gray; }
/* readability */
.test > * { color: #8888; }
.label { color: black; font-weight: bold; }
/* reference code */
.test { box-sizing: border-box; }
.in-flow { margin: 0; }
</style>
<div class="wrapper">
<div class="test" style="padding-top: 1em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">START</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 2.3em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">CENTER</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 3.6em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">END</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 1em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">BASELINE</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 3.6em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">LAST BASELINE</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 1em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">FLEX-START</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 3.6em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">FLEX-END</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 1em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">UNSAFE START</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 2.3em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">UNSAFE CENTER</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 3.6em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">UNSAFE END</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 1em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">SAFE START</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 2.3em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">SAFE CENTER</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 3.6em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">SAFE END</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 2.3em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">SPACE-EVENLY</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 1em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">SPACE-BETWEEN</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 2.3em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">SPACE-AROUND</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="margin-top: 1em">
<div class="in-flow"></div>
<div class="in-flow">
<span class="label">NORMAL</span>
<span class="abspos">ABS</span>
<span class="relpos">REL</span>
<div class="overflow">OVERFLOW</div>
</div>
</div>
</div>
<p>
<button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>