layout/reftests/flexbox/flexbox-align-self-baseline-horiz-2.xhtml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <!-- Testcase for behavior of the 'baseline' value for align-items (and
   7      align-self, implicitly). This test baseline-aligns various types of
   8      content, and the flexbox's vertical size depends on the aggregate
   9      post-alignment height of its children.
  10
  11      This test checks baseline-alignment for a text <input> field, a
  12      <textarea>, and a <button> with a multi-line label.
  13 -->
  14 <html xmlns="http://www.w3.org/1999/xhtml">
  15   <head>
  16     <style>
  17       .flexbox {
  18         display: flex;
  19         align-items: baseline;
  20         border: 1px dashed blue;
  21         font: 14px sans-serif;
  22       }
  23
  24       input { height: 30px; }
  25
  26       textarea {
  27         width: 30px;
  28         height: 50px;
  29       }
  30
  31       button.multilinebutton {
  32         font: 20px sans-serif;
  33         color: black;
  34         padding: 0;
  35         height: 50px;
  36         width: 20px;
  37         box-sizing: content-box;
  38       }
  39
  40       .lime   { background: lime;   }
  41       .orange { background: orange; }
  42       .pink   { background: pink;   }
  43       .aqua   { background: aqua;   }
  44       .violet { background: violet; }
  45       .tan    { background: tan;    }
  46    </style>
  47   </head>
  48   <body>
  49     <div class="flexbox">
  50       <div class="lime">text</div>
  51       <input type="text" style="width: 20px; min-width: 0;" value="input"/>
  52       <textarea style="width: 30px">t e x t a r e a </textarea>
  53       <button class="multilinebutton">b<br/>t<br/>n</button>
  54     </div>
  55   </body>
  56 </html>