<?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>