Blitz - WPT: align-content-block-break-content-010.html

wpt / css / css-align / blocks / align-content-block-break-content-010.html

/css/css-align/blocks/align-content-block-break-content-010.html

<!DOCTYPE html>
<title>CSS Box Alignment: align-content block fragmentation: simple 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">
<meta name="flags" content="may">
<!-- fragmented alignment is underdefined; these are two possibilities -->
<link rel="match" href="align-content-block-break-content-010-aligned-ref.html">
<link rel="match" href="align-content-block-break-content-010-unaligned-ref.html">

<style title="Needed for automation; delete to review/debug">
  @import "/fonts/ahem.css";
  html { font: 10px/1 Ahem; max-width: 780px; }
</style>

<style>
  .pager {
    column-fill: auto;
    column-width: 15em;
    height: 5em;
  }
  .test {
    height: 19em;
    /* show bounds of test box without interfering with margin-collapsing */
    border-inline: solid black 1em;
  }
  .large, .float {
    height: 2.5em;
    break-inside: avoid;
    padding: 2px; /* using padding because of margin handling bugs
    margin: 2px;
switch back once fixed */
    background: orange;
  }
  .float {
    float: right;
  }
  .nobr {
    break-inside: avoid;
  }

  /* readability */
  .pager { border: solid 2px gray; margin: 0.5em 0; }
  .test  { color: #8888; text-align: center; }
  .label { color: black; font-weight: bold; }
</style>

<!--
   This test creates breaks:
     * after some directly-contained text
     * after a fixed-height block
     * through some nested text
     * after a block containing text
-->

<div class="pager">
  <div class="test" style="align-content: center">
      <span class="label">CENTER</span><br>LINE 2<br>LINE 3
      <div class="large"></div>
      <div class="large"></div>
      <div>
        LINE 4
        <div class="nobr">LINE 5<br>LINE 6</div>
      </div>
    </div>
  </div>
</div>


<div class="pager">
  <div class="test" style="align-content: end">
      <span class="label">END</span><br>LINE 2<br>LINE 3
      <div class="large"></div>
      <div class="large"></div>
      <div>
        LINE 4
        <div class="nobr">LINE 5<br>LINE 6</div>
      </div>
    </div>
  </div>
</div>

<div class="pager">
  <div class="test" style="align-content: baseline">
      <span class="label">BASELINE</span><br>LINE 2<br>LINE 3
      <div class="large"></div>
      <div class="large"></div>
      <div>
        LINE 4
        <div class="nobr">LINE 5<br>LINE 6</div>
      </div>
    </div>
  </div>
</div>

<div class="pager">
  <div class="test" style="align-content: last baseline">
      <span class="label">LAST BASELINE</span><br>LINE 2<br>LINE 3
      <div class="large"></div>
      <div class="large"></div>
      <div>
        LINE 4
        <div class="nobr">LINE 5<br>LINE 6</div>
      </div>
    </div>
  </div>
</div>

<div class="pager">
  <div class="test" style="align-content: unsafe center">
      <span class="label">UNSAFE CENTER</span><br>LINE 2<br>LINE 3
      <div class="large"></div>
      <div class="large"></div>
      <div>
        LINE 4
        <div class="nobr">LINE 5<br>LINE 6</div>
      </div>
    </div>
  </div>
</div>


<div class="pager">
  <div class="test" style="align-content: unsafe end">
      <span class="label">UNSAFE END</span><br>LINE 2<br>LINE 3
      <div class="large"></div>
      <div class="large"></div>
      <div>
        LINE 4
        <div class="nobr">LINE 5<br>LINE 6</div>
      </div>
    </div>
  </div>
</div>

/css/css-align/blocks/align-content-block-break-content-010-aligned-ref.html

<!DOCTYPE html>
<title>CSS Box Alignment: align-content block fragmentation: simple 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: 780px; }
</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-inline: solid black 1em;
  }
  .test:last-child {
    height: 4em;
  }
  .large, .float {
    height: 2.5em;
    break-inside: avoid;
    padding: 2px; /* using padding because of margin handling bugs
    margin: 2px;
switch back once fixed */
    background: orange;
  }
  .float {
    float: right;
  }
  .nobr {
    break-inside: avoid;
  }

  /* readability */
  .pager { border: solid 2px gray; margin: 0.5em 0; }
  .test  { color: #8888; text-align: center; }
  .label { color: black; font-weight: bold; }

  /* reference */
  .center .test { align-content: center; }
  .end    .test { align-content: end; }
  /* margins are truncated by unforced breaks, so mimic that */
  .test .large:first-child { margin-top: 0; }
  .test .large:last-child  { margin-bottom: 0; }
</style>

<!--
   This test creates breaks:
     * after some directly-contained text
     * after a fixed-height block
     * through some nested text
     * after a block containing text
-->

<div class="pager center">
  <div class="test">
      <span class="label">CENTER</span><br>LINE 2<br>LINE 3
  </div>
  <div class="test">
      <div class="large"></div>
  </div>
  <div class="test">
      <div class="large"></div>
      <div>
        LINE 4
      </div>
  </div>
  <div class="test">
      <div>
        <div class="nobr">LINE 5<br>LINE 6</div>
      </div>
    </div>
  </div>
</div>


<div class="pager end">
  <div class="test">
      <span class="label">END</span><br>LINE 2<br>LINE 3
  </div>
  <div class="test">
      <div class="large"></div>
  </div>
  <div class="test">
      <div class="large"></div>
      <div>
        LINE 4
      </div>
  </div>
  <div class="test">
      <div>
        <div class="nobr">LINE 5<br>LINE 6</div>
      </div>
    </div>
  </div>
</div>

<div class="pager">
  <div class="test">
      <span class="label">BASELINE</span><br>LINE 2<br>LINE 3
  </div>
  <div class="test">
      <div class="large"></div>
  </div>
  <div class="test">
      <div class="large"></div>
      <div>
        LINE 4
      </div>
  </div>
  <div class="test">
      <div>
        <div class="nobr">LINE 5<br>LINE 6</div>
      </div>
    </div>
  </div>
</div>

<div class="pager">
  <div class="test">
      <span class="label">LAST BASELINE</span><br>LINE 2<br>LINE 3
  </div>
  <div class="test">
      <div class="large"></div>
  </div>
  <div class="test">
      <div class="large"></div>
      <div>
        LINE 4
      </div>
  </div>
  <div class="test">
      <div>
        <div class="nobr">LINE 5<br>LINE 6</div>
      </div>
    </div>
  </div>
</div>

<div class="pager center">
  <div class="test">
      <span class="label">UNSAFE CENTER</span><br>LINE 2<br>LINE 3
  </div>
  <div class="test">
      <div class="large"></div>
  </div>
  <div class="test">
      <div class="large"></div>
      <div>
        LINE 4
      </div>
  </div>
  <div class="test">
      <div>
        <div class="nobr">LINE 5<br>LINE 6</div>
      </div>
    </div>
  </div>
</div>

<div class="pager end">
  <div class="test">
      <span class="label">UNSAFE END</span><br>LINE 2<br>LINE 3
  </div>
  <div class="test">
      <div class="large"></div>
  </div>
  <div class="test">
      <div class="large"></div>
      <div>
        LINE 4
      </div>
  </div>
  <div class="test">
      <div>
        <div class="nobr">LINE 5<br>LINE 6</div>
      </div>
    </div>
  </div>
</div>