<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Normalize OpenType: UI tests</title>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro|Fira+Mono|Fira+Sans&subset=latin,latin-ext" rel="stylesheet" />
<link href="../node_modules/normalize.css/normalize.css" rel="stylesheet" />
<style>
::-moz-selection {
  color: gold;
  background: red;
  text-shadow: 1px 1px 1px blue;
}

::selection {
  color: gold;
  background: red;
  text-shadow: 1px 1px 1px blue;
}

code {
  font-family: "Monaco";
}
</style>
<link href="../normalize-opentype.css" rel="stylesheet" />
<style>

  /*! suit-test v0.1.0 | MIT License | github.com/suitcss */

  .Test {
    background: #fff;
    counter-reset: test-describe;
  }

  .Test-describe:before {
    content: counter(test-describe);
    counter-increment: test-describe;
  }

  .Test-describe {
    counter-reset: test-it;
  }

  .Test-it:before {
    content: counter(test-describe) "." counter(test-it);
    counter-increment: test-it;
  }

  .Test-title {
    font-size: 2em;
    font-family: sans-serif;
    padding: 20px;
    margin: 20px 0;
    background: #eee;
    color: #999;
  }

  .Test-describe,
  .Test-it {
    background: #eee;
    border-left: 5px solid #666;
    color: #666;
    font-family: sans-serif;
    font-weight: bold;
    margin: 20px 0;
    padding: 0.75em 20px;
  }

  .Test-describe {
    font-size: 1.5em;
    margin: 60px 0 20px;
  }

  .Test-describe:before,
  .Test-it:before {
    color: #999;
    display: inline-block;
    margin-right: 10px;
    min-width: 30px;
    text-transform: uppercase;
  }

  /* Custom helpers */

  .Test {
    /* Need to reset all existing font-feature-settings stuff to get clean
       results. Namely, ligatures on FF, IE, and everything on Safari */

    -webkit-font-feature-settings: "kern" 0, "liga" 0, "dlig" 0, "alig" 0, "calt": 0, "salt" 0, "smcp" 0, "c2sc" 0;
       -moz-font-feature-settings: "kern" 0, "liga" 0, "dlig" 0, "alig" 0, "calt": 0, "salt" 0, "smcp" 0, "c2sc" 0;
        -ms-font-feature-settings: "kern" 0, "liga" 0, "dlig" 0, "alig" 0, "calt": 0, "salt" 0, "smcp" 0, "c2sc" 0;
            font-feature-settings: "kern" 0, "liga" 0, "dlig" 0, "alig" 0, "calt": 0, "salt" 0, "smcp" 0, "c2sc" 0;

  }

  .Test-custom--fira {
    font-family: "Fira Sans";
  }

  .Test-custom--firaMono {
    font-family: "Fira Mono";
  }

  .Test-custom--sourceSansPro {
    font-family: "Source Sans Pro";
  }

  .Test-custom--klinicSlab {
    /* TODO Use something on Google Fonts with an “st” ligature */
    font-family: "Klinic Slab";
  }

  .Test-custom--lavanderia {
    /* TODO Use something on Google Fonts with Contextual Alternates */
    font-family: "Lavanderia", cursive;
    font-size: 5em;
    font-weight: 600;
  }

  .Test-custom--ffskern0 {
    -webkit-font-feature-settings: "kern" 0;
       -moz-font-feature-settings: "kern" 0;
        -ms-font-feature-settings: "kern" 0;
            font-feature-settings: "kern" 0;
  }

  .Test-custom--ffstnum {
    -webkit-font-feature-settings: "tnum" 0;
       -moz-font-feature-settings: "tnum" 0;
        -ms-font-feature-settings: "tnum" 0;
            font-feature-settings: "tnum" 0;
  }

  .Test-custom--ffsonum {
    -webkit-font-feature-settings: "lnum" 0, "onum" 1, "pnum" 1, "tnum" 0 !important;
       -moz-font-feature-settings: "lnum" 0, "onum" 1, "pnum" 1, "tnum" 0 !important;
        -ms-font-feature-settings: "lnum" 0, "onum" 1, "pnum" 1, "tnum" 0 !important;
            font-feature-settings: "lnum" 0, "onum" 1, "pnum" 1, "tnum" 0 !important;
  }


 .Test-custom--ffslnum {
    -webkit-font-feature-settings: "lnum" 1, "onum" 0;
       -moz-font-feature-settings: "lnum" 1, "onum" 0;
        -ms-font-feature-settings: "lnum" 1, "onum" 0;
            font-feature-settings: "lnum" 1, "onum" 0;
  }

  .Test-custom--ffsliga0 {
    -webkit-font-feature-settings: "liga" 0, "kern" 0;
       -moz-font-feature-settings: "liga" 0, "kern" 0;
        -ms-font-feature-settings: "liga" 0, "kern" 0;
            font-feature-settings: "liga" 0, "kern" 0;
  }

  .Test-custom--ffscalt0 {
    -webkit-font-feature-settings: "calt" 0;
       -moz-font-feature-settings: "calt" 0;
        -ms-font-feature-settings: "calt" 0;
            font-feature-settings: "calt" 0;
  }


  .Test-custom--mark {
    background: tomato;
  }

</style>

<div class="Test">
  .

  <h1 class="Test-title"><a href="https://github.com/kennethormandy/normalize-opentype.css">Normalize-OpenType.css</a>: UI tests</h1>

  <h2 class="Test-describe"><code>html, body</code></h2>

  <h3 class="Test-it">should have basic ligatures</h3>
  <div class="Test-run">
    <p class="Test-custom--fira"><span class="Test-custom--mark">fl</span>uent <span class="Test-custom--mark">fl</span>owers</p>
  </div>

  <h3 class="Test-it">should not have discretionary ligatures</h3>
  <div class="Test-run">
    <p class="Test-custom--sourceSansPro">Different Ga<span class="Test-custom--mark">st</span>own flowers</p>
  </div>

  <h3 class="Test-it">should have kerning turned on</h3>
  <div class="Test-run">
    <p class="Test-custom--fira"><span class="Test-custom--ffskern0" style="border-right: 1px solid tomato">control<br/>AVATAR LT.</span><br/><span style="border-right: 1px solid tomato">AVATAR LT.</span></p>
  </div>

  <h3 class="Test-it">should have oldstyle numbers turned on (opinionated)</h3>
  <div class="Test-run">
    <p class="Test-custom--fira"><span class="Test-custom--ffskern0 Test-custom--ffslnum">control 1990<span style="color: tomato">■</span>.</span> 1990<span style="color: tomato">■</span>.</p>
  </div>

  <h3 class="Test-it">should have proportional numbers turned on</h3>
  <div class="Test-run">
    <p class="Test-custom--fira"><span class="Test-custom--ffstnum Test-custom-firaMono">control<br/><span style="border-right: 1px solid tomato">1990</span>.</span><br/><span style="border-right: 1px solid tomato">1990</span>.</p>
  </div>

  <h3 class="Test-it">should have contextual alternates turned on</h3>
  <div class="Test-run">
    <p class="Test-custom--lavanderia">control<br/><span style="border-right: 1px solid tomato" class="Test-custom--ffscalt0">aaaa</span>.</span><br/><span style="border-right: 1px solid tomato">aaaa</span>.</p>
  </div>

  <!-- This test doesn’t really help right now other than through documentation -->
  <h3 class="Test-it">should not have an opinion on <code>text-rendering</code></h3>
  <div class="Test-run">
    <p class="Test-custom--fira" style="letter-spacing: 10px;">
      <span style="text-rendering: optimizeLegibility">control<br/>fl.</span><br/>
      fl.
      </p>
  </div>

  <h2 class="Test-describe"><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>, <code>h6</code></h2>
  <h3 class="Test-it"><code>h1</code>, <code>h2</code>, <code>h3</code> should have discretionary ligatures in headings (opinionated)</h3>
  <div class="Test-run">
    <h1 class="Test-custom--klinicSlab">di<span class="Test-custom--mark">st</span></h1>
    <h2 class="Test-custom--klinicSlab">di<span class="Test-custom--mark">st</span></h2>
    <h3 class="Test-custom--klinicSlab">di<span class="Test-custom--mark">st</span></h3>
  </div>

  <h3 class="Test-it"><code>h4</code>, <code>h5</code>, <code>h6</code> should not have discretionary ligatures in headings</h3>
  <div class="Test-run">
    <h4 class="Test-custom--klinicSlab">di<span class="Test-custom--mark">st</span></h4>
    <h5 class="Test-custom--klinicSlab">di<span class="Test-custom--mark">st</span></h5>
    <h6 class="Test-custom--klinicSlab">di<span class="Test-custom--mark">st</span></h6>
  </div>

  <h2 class="Test-describe"><code>abbr</code></h2>
  <h3 class="Test-it">should sub lowercase letters for small caps</h3>
  <div class="Test-run">
    <p class="Test-custom--fira">control. <abbr>abbr.</abbr></p>
  </div>

  <h3 class="Test-it">should sub capitals for small caps</h3>
  <div class="Test-run">
    <p class="Test-custom--fira">CONTROL. <abbr>ABBR.</abbr></p>
  </div>

  <h3 class="Test-it">should not use faux small</h3>
  <div class="Test-run">
    <p style="font-family: Georgia">CONTROL. <abbr>ABBR.</abbr></p>
  </div>

  <h2 class="Test-describe"><code>time</code></h2>
  <h3 class="Test-it">should use oldstyle figures</h3>
  <div class="Test-run">
    <p class="Test-custom--fira"><span class="Test-custom--ffslnum">control June 24 2014, 19:00<span style="color: tomato">■</span>.</span> <time datetime="2014-06-24T19:00:00Z">June 24 2014, 19:00<span style="color: tomato">■</span>.</time></p>
  </div>

  <h3 class="Test-it">should use proportional figures</h3>
  <div class="Test-run">
    <p class="Test-custom--fira">control<br/><span class="Test-custom--ffstnum" style="border-right: 1px solid tomato">June 24 2014, 19:00.</span><br/>
    <time datetime="2014-06-24T19:00:00Z" style="border-right: 1px solid tomato">June 24 2014, 19:00.</time></p>
  </div>

  <!-- <h2 class="Test-describe"><code>mark</code></h2>
  <h3 class="Test-it">should …?</h3>
  <div class="Test-run">
    <p class="Test-custom--fira">control. <mark>mark</mark></p>
  </div> -->

  <!-- <h2 class="Test-describe"><code>cite</code></h2>
  <h3 class="Test-it">should …?</h3>
  <div class="Test-run">
    <p class="Test-custom--fira">control. <cite>cite</cite></p>
  </div> -->

  <!-- <h2 class="Test-describe"><code>blockquote</code>, <code>q</code></h2>
  <h3 class="Test-it">should …?</h3>
  <div class="Test-run">
    <p class="Test-custom--fira">control. <q>It always comes back to type.</q></p>
    <p class="Test-custom--fira">control. <blockquote>It always comes back to type.</blockquote></p>
  </div> -->

  <!-- This test is insufficient. Should make sub and sup chars the same size and compare -->
  <h2 class="Test-describe"><code>sub</code> and <code>sup</code></h2>
  <h3 class="Test-it">should use proper superscript and subscript characters</h3>
  <div class="Test-run Test-run--highlightEl">
    <p class="Test-custom--fira">control.</p>
    <p class="Test-custom--fira">control. <sub>sub.</sub></p>
    <p class="Test-custom--fira">control. <sup>sup.</sup></p>
  </div>

  <!-- <h2 class="Test-describe"><code>figcaption</code></h2>
  <h3 class="Test-it">should …?</h3>
  <div class="Test-run" style="outline:1px solid #ADD8E6; overflow:hidden;">
    <figure>
      <img style="background-color:#ADD8E6" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="400" height="200">
    </figure>
    <figcaption class="Test-custom--fira">
      A blue shape. The quick brown fox and all that.
      <p>Hello, this is some other stuff inside a paragraph.</p>
    </figcaption>
  </div> -->

  <h2 class="Test-describe"><code>code</code>, <code>kbd</code>, <code>pre</code>, <code>samp</code></h2>
  <h3 class="Test-it">should not use kerning</h3>
  <div class="Test-run">
    <span class="Test-custom--firaMono" style="border-right: 1px solid green">span: abcdefghijklmnopqrstuvwxyz.</span><br/>
    <code class="Test-custom--firaMono" style="border-right: 1px solid green">code: abcdefghijklmnopqrstuvwxyz.</code><br/>
    <kbd class="Test-custom--firaMono" style="border-right: 1px solid green">kbd: &nbsp;abcdefghijklmnopqrstuvwxyz.</kbd><br/>
    <samp class="Test-custom--firaMono" style="border-right: 1px solid green">samp: abcdefghijklmnopqrstuvwxyz.</samp><br/>
    <pre class="Test-custom--firaMono" style="display: inline; border-right: 1px solid green">pre:  abcdefghijklmnopqrstuvwxyz.</pre>
  </div>

  <h3 class="Test-it">should not use ligatures</h3>
  <div class="Test-run">
    <span class="Test-custom--firaMono" style="border-right: 1px solid green">span: ffl fl fk st.</span><br/>
    <code class="Test-custom--firaMono" style="border-right: 1px solid green">code: ffl fl fk st.</code><br/>
    <kbd class="Test-custom--firaMono" style="border-right: 1px solid green">kbd: &nbsp;ffl fl fk st.</kbd><br/>
    <samp class="Test-custom--firaMono" style="border-right: 1px solid green">samp: ffl fl fk st.</samp><br/>
    <pre class="Test-custom--firaMono" style="display: inline; border-right: 1px solid green">pre:  ffl fl fk st.</pre>
  </div>

  <h2 class="Test-describe"><code>ol</code></h2>
  <h3 class="Test-it">should use oldstyle numbers on ordered list items</h3>
  <div class="Test-run">
    <ol class="Test-custom--fira">
      <li>Dude Hank Pro</li>
      <li>Fairview</li>
      <li>Klinic Slab</li>
    </ol>
  </div>

  <h3 class="Test-it">should use tabular numbers on ordered list items</h3>
  <div class="Test-run">
    <ol class="Test-custom--fira">
      <li>Dude Hank Pro</li>
      <li>Fairview</li>
      <li>Klinic Slab</li>
    </ol>
  </div>

  <!-- <h2 class="Test-describe"><code>ul</code></h2>
  <h3 class="Test-it">should …?</h3>
  <div class="Test-run">
    <ul class="Test-custom--fira">
      <li>Matthew</li>
      <li>Sarah</li>
      <li>Kenneth</li>
    </ul>
  </li> -->

  <!-- <h2 class="Test-describe"><code>dfn</code></h2> -->
  <!-- research -->

  <h2 class="Test-describe"><code>inputs</code></h2>
  <h3 class="Test-it">should use lining, proportional numerals for color input fallbacks</h3>
  <div class="Test-run">
    <!-- This is only relevant in browsers that support font-feature-settings but not the colour input type -->
    <label>Control<input type="color" value="#339966" class="Test-custom--fira Test-custom--ffsonum" />.</label><br/>
    <label><input type="color" value="#339966" class="Test-custom--fira" />.</label>
  </div>

  <h3 class="Test-it">should use lining, proportional numerals on date inputs</h3>
  <div class="Test-run">
    <label>Control<input type="date" value="2014-07-03" class="Test-custom--fira Test-custom--ffsonum" />.</label><br/>
    <label><input type="date" value="2014-07-03" class="Test-custom--fira" />.</label>
    <br/>
    <label>Control<input type="datetime" value="2014-07-03" class="Test-custom--fira Test-custom--ffsonum" />.</label><br/>
    <label><input type="datetime" value="2014-07-03" class="Test-custom--fira" />.</label>
    <br/>
    <label>Control<input type="datetime-local" value="2014-07-03" class="Test-custom--fira Test-custom--ffsonum" />.</label><br/>
    <label><input type="datetime-local" value="2014-07-03" class="Test-custom--fira" />.</label>
  </div>

  <h3 class="Test-it">should use lining, proportional numerals on number inputs</h3>
  <div class="Test-run">
    <label>Control<input type="date" value="55-604" class="Test-custom--fira Test-custom--ffsonum" />.</label><br/>
    <label><input type="date" value="55-604" class="Test-custom--fira" />.</label>
  </div>

  <!-- Need to check this in IE10+ still -->
  <h3 class="Test-it">should use lining, proportional numerals on range inputs’ tooltip</h3>
  <div class="Test-run">
    <label>Control<input type="range" value="50" class="Test-custom--fira Test-custom--ffsonum" />.</label><br/>
    <label><input type="range" value="50" class="Test-custom--fira" />.</label>
  </div>

  <h3 class="Test-it">should use lining, proportional numerals on telephone inputs</h3>
  <div class="Test-run">
    <label>Control<input type="tel" value="+1 234 567 8910" class="Test-custom--fira Test-custom--ffsonum" />.</label><br/>
    <label><input type="tel" value="+1 234 567 8910" class="Test-custom--fira" />.</label>
  </div>

  <h3 class="Test-it">should use lining, proportional numerals on week inputs</h3>
  <div class="Test-run">
    <label>Control<input type="tel" value="23" class="Test-custom--fira Test-custom--ffsonum" />.</label><br/>
    <label><input type="tel" value="23" class="Test-custom--fira" />.</label>
  </div>

  <h2 class="Test-describe"><code>table</code></h2>
  <h3 class="Test-it">should use lining, tabular numerals</h3>
  <div class="Test-run">
    <table class="Test-custom--fira">
      <caption>Blur – albums</caption>
      <thead>
        <tr>
          <th>Album</th>
          <th>Year</th>
          <th>Price</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Album</th>
          <th>Year</th>
          <th>Price</th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Leisure</td>
          <td>1991</td>
          <td>$10.00</td>
        </tr>
        <tr>
          <td>Modern Life Is Rubbish</td>
          <td>1993</td>
          <td>$12.00</td>
        </tr>
        <tr>
          <td>Parklife</td>
          <td>1994</td>
          <td>$10.00</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h2 class="Test-describe"><code>::selection</code></h2>
  <h3 class="Test-it"></h3>
  <div class="Test-run">
    <h3 class="Test-custom--fira Test-custom--selection">different flowers. Try selecting this text using the cursor (Command + A won’t cut it).</h3>
  </div>

</div>
