Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-align/blocks/align-content-block-008.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<title>CSS Box Alignment: align-content style change on large block container with floats</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<style title="Needed for automation; delete to review/debug">
@import "/fonts/ahem.css";
html { font: 10px/1 Ahem; max-width: 800px; }
.label { display: none; }
#manual { display: none; }
</style>
<style id="initial">
/* scramble test styles */
[style$="start" ] { align-content: end !important; }
[style$="center" ] { align-content: unsafe end !important; }
[style$="end" ] { align-content: start !important; }
[style$="baseline" ] { align-content: unsafe end !important; }
[style$="last baseline"] { align-content: start !important; }
[style$="flex-start" ] { align-content: normal !important; }
[style$="flex-end" ] { align-content: start !important; }
[style$="unsafe start" ] { align-content: center !important; }
[style$="unsafe center"] { align-content: baseline !important; }
[style$="unsafe end" ] { align-content: unsafe center !important; }
[style$="safe start" ] { align-content: unsafe end !important; }
[style$="safe center" ] { align-content: normal !important; }
[style$="safe end" ] { align-content: unsafe end !important; }
[style$="space-evenly" ] { align-content: end !important; }
[style$="space-between"] { align-content: unsafe center !important; }
[style$="space-around" ] { align-content: start !important; }
[style$="normal" ] { align-content: unsafe end !important; }
</style>
<script>
function doTest()
{
document.body.offsetHeight; // trigger layout
document.getElementById('initial').type = 'text/plain'; // invalidate stylesheet
checkLayout('.test');
}
window.onload = () => {
requestAnimationFrame(() => {
requestAnimationFrame(doTest);
});
};
window.addEventListener("click", () => { document.getElementById('manual').style.display = "inline"; });
</script>
<style>
html, body { margin: 0; padding: 0; }
.test { height: 5em; margin: 0.5em 1em;
/* show bounds of test box without interfering with margin-collapsing */
background: black; padding-right: 2px; }
/* ensure float is contained */
.float { float: right; background: orange; height: 2em }
/* ensure margin is contained */
.in-flow { margin-top: 1em; 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; }
</style>
<!--
Results should be same as align-content-block-004.html.
-->
<body>
<div class="wrapper">
<div class="test" style="align-content: start" title="start">
<div class="float" data-offset-y="5">FLT</div>
<div class="in-flow" data-offset-y="15"></div>
<div class="in-flow">
<div class="float" data-offset-y="15">FLT</div>
<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="align-content: center" title="center">
<div class="float" data-offset-y="15">FLT</div>
<div class="in-flow" data-offset-y="25"></div>
<div class="in-flow">
<div class="float" data-offset-y="25">FLT</div>
<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="align-content: end" title="end">
<div class="float" data-offset-y="25">FLT</div>
<div class="in-flow" data-offset-y="35"></div>
<div class="in-flow">
<div class="float" data-offset-y="35">FLT</div>
<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="align-content: baseline" title="baseline">
<div class="float" data-offset-y="5">FLT</div>
<div class="in-flow" data-offset-y="15"></div>
<div class="in-flow">
<div class="float" data-offset-y="15">FLT</div>
<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="align-content: last baseline" title="last baseline">
<div class="float" data-offset-y="25">FLT</div>
<div class="in-flow" data-offset-y="35"></div>
<div class="in-flow">
<div class="float" data-offset-y="35">FLT</div>
<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="align-content: flex-start" title="flex-start">
<div class="float" data-offset-y="5">FLT</div>
<div class="in-flow" data-offset-y="15"></div>
<div class="in-flow">
<div class="float" data-offset-y="15">FLT</div>
<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="align-content: flex-end" title="flex-end">
<div class="float" data-offset-y="25">FLT</div>
<div class="in-flow" data-offset-y="35"></div>
<div class="in-flow">
<div class="float" data-offset-y="35">FLT</div>
<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="align-content: unsafe start" title="unsafe start">
<div class="float" data-offset-y="5">FLT</div>
<div class="in-flow" data-offset-y="15"></div>
<div class="in-flow">
<div class="float" data-offset-y="15">FLT</div>
<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="align-content: unsafe center" title="unsafe center">
<div class="float" data-offset-y="15">FLT</div>
<div class="in-flow" data-offset-y="25"></div>
<div class="in-flow">
<div class="float" data-offset-y="25">FLT</div>
<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="align-content: unsafe end" title="unsafe end">
<div class="float" data-offset-y="25">FLT</div>
<div class="in-flow" data-offset-y="35"></div>
<div class="in-flow">
<div class="float" data-offset-y="35">FLT</div>
<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="align-content: safe start" title="safe start">
<div class="float" data-offset-y="5">FLT</div>
<div class="in-flow" data-offset-y="15"></div>
<div class="in-flow">
<div class="float" data-offset-y="15">FLT</div>
<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="align-content: safe center" title="safe center">
<div class="float" data-offset-y="15">FLT</div>
<div class="in-flow" data-offset-y="25"></div>
<div class="in-flow">
<div class="float" data-offset-y="25">FLT</div>
<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="align-content: safe end" title="safe end">
<div class="float" data-offset-y="25">FLT</div>
<div class="in-flow" data-offset-y="35"></div>
<div class="in-flow">
<div class="float" data-offset-y="35">FLT</div>
<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="align-content: space-evenly" title="space-evenly">
<div class="float" data-offset-y="15">FLT</div>
<div class="in-flow" data-offset-y="25"></div>
<div class="in-flow">
<div class="float" data-offset-y="25">FLT</div>
<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="align-content: space-between" title="space-between">
<div class="float" data-offset-y="5">FLT</div>
<div class="in-flow" data-offset-y="15"></div>
<div class="in-flow">
<div class="float" data-offset-y="15">FLT</div>
<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="align-content: space-around" title="space-around">
<div class="float" data-offset-y="15">FLT</div>
<div class="in-flow" data-offset-y="25"></div>
<div class="in-flow">
<div class="float" data-offset-y="25">FLT</div>
<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="align-content: normal" title="normal">
<div class="float" data-offset-y="10">FLT</div>
<div class="in-flow" data-offset-y="10"></div>
<div class="in-flow">
<div class="float" data-offset-y="10">FLT</div>
<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>
</body>