<!DOCTYPE HTML>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
  <meta charset=utf-8>
  <title>Reference baseline alignment of inline-grid with an INPUT type=text item</title>
  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
  <style>

.grid {
  display: inline-block;
  line-height: 0;
  border: 5px solid;
  padding: 1px 0 3px 0;
  margin: 11px 0;
}

input { -webkit-appearance:none; inline-size:4ch; }

.big {
 font-size: 4em;
}

.small {
  font-size: 0.2em;
}

.vlr { writing-mode: vertical-lr; }
  </style>
</head>
<body>

<div>
  <span class="big">B</span>
  <div class="grid"><input value="9"></div>
  <span class="small">B</span>
</div>

<div>
  <span>B</span>
  <div class="grid"><input class="big" value="9"></div>
  <span class="small">B</span>
</div>

<div class="vlr">
<div>
  <span class="big">B</span>
  <div class="grid"><input value="9"></div>
  <span class="small">B</span>
</div>

<div>
  <span>B</span>
  <div class="grid"><input class="big" value="9"></div>
  <span class="small">B</span>
</div>
</div>

</body>
</html>
