<?xml version="1.0" encoding="UTF-8"?>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- Testcase for behavior of the 'baseline' value for align-items (and
     align-self, implicitly). This test baseline-aligns various types of
     content, and the flexbox's vertical size depends on the aggregate
     post-alignment height of its children.

     This test checks baseline-alignment for a text <input> field, a
     <textarea>, and a <button> with a multi-line label.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style>
      .flexbox {
        display: flex;
        align-items: baseline;
        border: 1px dashed blue;
        font: 14px sans-serif;
      }

      input { height: 30px; }

      textarea {
        width: 30px;
        height: 50px;
      }

      button.multilinebutton {
        font: 20px sans-serif;
        color: black;
        padding: 0;
        height: 50px;
        width: 20px;
        box-sizing: content-box;
      }

      .lime   { background: lime;   }
      .orange { background: orange; }
      .pink   { background: pink;   }
      .aqua   { background: aqua;   }
      .violet { background: violet; }
      .tan    { background: tan;    }
   </style>
  </head>
  <body>
    <div class="flexbox">
      <div class="lime">text</div>
      <input type="text" style="width: 20px; min-width: 0;" value="input"/>
      <textarea style="width: 30px">t e x t a r e a </textarea>
      <button class="multilinebutton">b<br/>t<br/>n</button>
    </div>
  </body>
</html>