third_party/WebKit/LayoutTests/fast/text/font-ascent-mac.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="UTF-8">
   5     <title>Mac Ascent Adjustment for Courier, Helvetica, Times</title>
   6     <style type="text/css">
   7       body {
   8           font-size: 16px;
   9           line-height: 25px;
  10       }
  11
  12       .MidpointBox {
  13           background: lightgray;
  14           display: -webkit-flex;
  15           display: -ms-flexbox;
  16           display: flex;
  17           -webkit-align-items: center;
  18           -ms-flex-align: center;
  19           align-items: center;
  20           position: relative;
  21           margin: 1em;
  22           padding: .5em 1em;
  23       }
  24
  25       .MidpointBox:before {
  26           content: "";
  27       position: absolute;
  28       height: 1px;
  29       top: 50%;
  30       left: 0;
  31       right: 0;
  32       margin-top: -1px;
  33       background: red;
  34       z-index: 1;
  35       }
  36
  37       .MidpointBox-icon {
  38           height: 1em;
  39           width: 1em;
  40           margin-right: .5em;
  41           background: black;
  42       }
  43     </style>
  44   </head>
  45   <body>
  46     The red line needs to cross the middle of the black square, as well as through half the ascent of the capital
  47     letters and digits, for example the middle horizontal bar of the F or the crossing point of the two diagonals in the
  48     letter X. See also <a href="http://crbug.com/452967">bug 452967</a>.
  49     <div class="MidpointBox">
  50       <span class="MidpointBox-icon"></span>
  51       <span class="MidpointBox-text"><span style="font-family: 'Helvetica Neue';">38FGKX</span></span>
  52     </div>
  53     <div class="MidpointBox">
  54       <span class="MidpointBox-icon"></span>
  55       <span class="MidpointBox-text"><span style="font-family: Helvetica;">38FGKX</span></span>
  56     </div>
  57     <div class="MidpointBox">
  58       <span class="MidpointBox-icon"></span>
  59       <span class="MidpointBox-text"><span style="font-family: Consolas;">38FGKX</span></span>
  60     </div>
  61     <div class="MidpointBox">
  62       <span class="MidpointBox-icon"></span>
  63       <span class="MidpointBox-text"><span style="font-family: Courier;">38FGKX</span></span>
  64     </div>
  65     <div class="MidpointBox">
  66       <span class="MidpointBox-icon"></span>
  67       <span class="MidpointBox-text"><span style="font-family: Times;">38FGKX</span></span>
  68     </div>
  69     <div class="MidpointBox">
  70       <span class="MidpointBox-icon"></span>
  71       <span class="MidpointBox-text"><span style="font-family: Arial;">38FGKX</span></span>
  72     </div>
  73   </body>
  74 </html>
  75