wpt / css / css-align / blocks / align-content-block-overflow-000.html

Status: FAIL | Duration: 19ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/css-align/blocks/align-content-block-overflow-000.html

<!DOCTYPE html>
<html>
<title>CSS Box Alignment: align-content + overflow:hidden 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">
<link rel="match" href="align-content-block-overflow-000-ref.html">

<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: 1.8em; margin: 0.5em 2em; overflow: hidden;
          /* 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>

<div class="wrapper">
  <div class="test" style="align-content: start">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div class="in-flow"></div>
    <div class="in-flow">
      <div class="float">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: 10px/1 sans-serif; }'">Show Text</button>

/css/css-align/blocks/align-content-block-overflow-000-ref.html

<!DOCTYPE html>
<title>CSS Box Alignment: align-content on small block container with floats</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: 1.8em; margin: 0.5em 2em; overflow: hidden;
          /* 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>

<div class="wrapper">
  <div class="test">
    <div class="float">FLT</div>
    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float" style="margin-top: -0.6em">FLT</div>
    <div style="margin-bottom: -0.6em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div style="margin-bottom: -1.2em"></div>
    <div class="in-flow">
      <div class="float" style="margin-top: -1em">FLT</div>
      <div class="float">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">
    <div class="float">FLT</div>
    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div style="padding-top: 0.5em; margin-bottom: -0.5em"></div>
    <div class="in-flow">
      <div class="float">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">
    <div class="float">FLT</div>
    <div></div>
    <div class="in-flow">
      <div class="float">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: 10px/1 sans-serif; }'">Show Text</button>