src/third_party/WebKit/LayoutTests/fast/text/font-stretch-variant.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             div { font-family: Arial; }
   6             .narrow { font-family: Arial Narrow; }
   7         </style>
   8     </head>
   9     <body>
  10         <section>
  11             <h2>font-stretch: condensed vs Arial Narrow</h2>
  12             <div style="font-stretch: condensed">Back in June we delivered oxygen equipment of the same size.</div>
  13             <div class="narrow">Back in June we delivered oxygen equipment of the same size.</div>
  14             <div class="narrow" style="font: extra-condensed">Back in June we delivered oxygen equipment of the same size.</div>
  15             <p>
  16                 The three lines above should have the same weight.
  17             </p>
  18         </section>
  19
  20         <section>
  21             <h2>Specific width, Arial</h2>
  22             <div style="font-stretch: ultra-condensed">font-stretch: ultra-condensed - Back in June we delivered oxygen equipment of the same size.</div>
  23             <div style="font-stretch: extra-condensed">font-stretch: extra-condensed - Back in June we delivered oxygen equipment of the same size.</div>
  24             <div style="font-stretch: condensed">font-stretch: condensed - Back in June we delivered oxygen equipment of the same size.</div>
  25             <div style="font-stretch: semi-condensed">font-stretch: semi-condensed - Back in June we delivered oxygen equipment of the same size.</div>
  26             <div style="font-stretch: normal">font-stretch: normal - Back in June we delivered oxygen equipment of the same size.</div>
  27             <div style="font-stretch: semi-expanded">font-stretch: semi-expanded - Back in June we delivered oxygen equipment of the same size.</div>
  28             <div style="font-stretch: expanded">font-stretch: expanded - Back in June we delivered oxygen equipment of the same size.</div>
  29             <div style="font-stretch: extra-expanded">font-stretch: extra-expanded - Back in June we delivered oxygen equipment of the same size.</div>
  30             <div style="font-stretch: ulta-expanded">font-stretch: ulta-expanded - Back in June we delivered oxygen equipment of the same size.</div>
  31         </section>
  32
  33         <section>
  34             <h2>Specific width, Arial Narrow</h2>
  35             <div class="narrow" style="font-stretch: ultra-condensed">font-stretch: ultra-condensed - Back in June we delivered oxygen equipment of the same size.</div>
  36             <div class="narrow" style="font-stretch: extra-condensed">font-stretch: extra-condensed - Back in June we delivered oxygen equipment of the same size.</div>
  37             <div class="narrow" style="font-stretch: condensed">font-stretch: condensed - Back in June we delivered oxygen equipment of the same size.</div>
  38             <div class="narrow" style="font-stretch: semi-condensed">font-stretch: semi-condensed - Back in June we delivered oxygen equipment of the same size.</div>
  39             <div class="narrow" style="font-stretch: normal">font-stretch: normal - Back in June we delivered oxygen equipment of the same size.</div>
  40             <div class="narrow" style="font-stretch: semi-expanded">font-stretch: semi-expanded - Back in June we delivered oxygen equipment of the same size.</div>
  41             <div class="narrow" style="font-stretch: expanded">font-stretch: expanded - Back in June we delivered oxygen equipment of the same size.</div>
  42             <div class="narrow" style="font-stretch: extra-expanded">font-stretch: extra-expanded - Back in June we delivered oxygen equipment of the same size.</div>
  43             <div class="narrow" style="font-stretch: ulta-expanded">font-stretch: ulta-expanded - Back in June we delivered oxygen equipment of the same size.</div>
  44         </section>
  45     </body>
  46 </html>