align-content-block-005.html

mozilla-central/testing/web-platform/tests/css/css-align/blocks/align-content-block-005.html

Enable keyboard shortcuts

Source code

File a bug in Core :: Layout: Block and Inline

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-005.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>CSS Box Alignment: align-content on small block container with floats</title>

<link rel="help" href="https://www.w3.org/TR/css-align-3/#align-block">

<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">

<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; }

</style>

<style>

  html, body { margin: 0; padding: 0; }

  .test { height: 1em; margin: 0.5em 2em;

          /* 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; padding: 3em 0; }

  /* readability */

  .test > * { color: #8888; }

  .label { color: black; font-weight: bold; }

</style>

<body onload="checkLayout('.test');">

<div class="wrapper">

  <div class="test" style="align-content: start" title="start">

    <div class="float" data-offset-y="35">FLT</div>

    <div class="in-flow" data-offset-y="45"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="45">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="35">FLT</div>

    <div class="in-flow" data-offset-y="45"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="45">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="35">FLT</div>

    <div class="in-flow" data-offset-y="45"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="45">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="35">FLT</div>

    <div class="in-flow" data-offset-y="45"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="45">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="35">FLT</div>

    <div class="in-flow" data-offset-y="45"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="45">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="35">FLT</div>

    <div class="in-flow" data-offset-y="45"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="45">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="35">FLT</div>

    <div class="in-flow" data-offset-y="45"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="45">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="35">FLT</div>

    <div class="in-flow" data-offset-y="45"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="45">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="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 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="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 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="35">FLT</div>

    <div class="in-flow" data-offset-y="45"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="45">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="35">FLT</div>

    <div class="in-flow" data-offset-y="45"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="45">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="35">FLT</div>

    <div class="in-flow" data-offset-y="45"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="45">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="35">FLT</div>

    <div class="in-flow" data-offset-y="45"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="45">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="35">FLT</div>

    <div class="in-flow" data-offset-y="45"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="45">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="35">FLT</div>

    <div class="in-flow" data-offset-y="45"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="45">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="40">FLT</div>

    <div class="in-flow" data-offset-y="40"></div>

    <div class="in-flow">

      <div class="float" data-offset-y="40">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>