flexbox-align-self-baseline-horiz-3-ref.xhtml

Enable keyboard shortcuts

<?xml version="1.0" encoding="UTF-8"?>

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<!-- Reference case for behavior of the 'baseline' value for align-items and

     align-self.

     NOTE: For multi-line 'display: block' flex items in the testcase, we use

     an inline-table here in the reference case, so that we get first-line

     baseline alignment. (If we used an inline-block instead, that would give

     us *last-line* baseline alignment.)

-->

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <style>

      .flexbox {

        display: block;

        border: 1px dashed blue;

        font: 14px sans-serif;

      div, .flexbox > label { display: inline-block; }

      table { display: inline-table; }

      .lime   { background: lime;   }

      .pink   { background: pink;   }

      .aqua   { background: aqua;   }

   </style>

  </head>

  <body>

    <div class="flexbox">

      <div class="lime">text</div

      ><button>btn</button

      ><label class="pink">label</label

      ><table cellspacing="0" cellpadding="0"  class="aqua">

        <label>lab<br/>el</label>

      </table

      ><table cellspacing="0" cellpadding="0">

        <fieldset>field<br/>set</fieldset>

      </table

      ><table cellspacing="0" cellpadding="0">

        <fieldset><legend>leg</legend>field<br/>set</fieldset>

      </table

      ><table cellspacing="0" cellpadding="0">

        <fieldset><legend>leg<br/>end</legend>field<br/>set</fieldset>

      </table>

    </div>

  </body>

</html>