third_party/WebKit/LayoutTests/fast/css/font-weight-1.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     @font-face {
   6       font-family: 'WebKit WeightWatcher';
   7       font-weight: 100;
   8       src:  url('../../resources/WebKitWeightWatcher100.ttf');
   9     }
  10     @font-face {
  11       font-family: 'WebKit WeightWatcher';
  12       font-weight: 200;
  13       src:  url('../../resources/WebKitWeightWatcher200.ttf');
  14     }
  15     @font-face {
  16       font-family: 'WebKit WeightWatcher';
  17       font-weight: 300;
  18       src:  url('../../resources/WebKitWeightWatcher300.ttf');
  19     }
  20     @font-face {
  21       font-family: 'WebKit WeightWatcher';
  22       font-weight: 400;
  23       src:  url('../../resources/WebKitWeightWatcher400.ttf');
  24     }
  25     @font-face {
  26       font-family: 'WebKit WeightWatcher';
  27       font-weight: 500;
  28       src:  url('../../resources/WebKitWeightWatcher500.ttf');
  29     }
  30     @font-face {
  31       font-family: 'WebKit WeightWatcher';
  32       font-weight: 600;
  33       src:  url('../../resources/WebKitWeightWatcher600.ttf');
  34     }
  35     @font-face {
  36       font-family: 'WebKit WeightWatcher';
  37       font-weight: 700;
  38       src:  url('../../resources/WebKitWeightWatcher700.ttf');
  39     }
  40     @font-face {
  41       font-family: 'WebKit WeightWatcher';
  42       font-weight: 800;
  43       src:  url('../../resources/WebKitWeightWatcher800.ttf');
  44     }
  45     @font-face {
  46       font-family: 'WebKit WeightWatcher';
  47       font-weight: 900;
  48       src:  url('../../resources/WebKitWeightWatcher900.ttf');
  49     }
  50     div { font-family: 'WebKit WeightWatcher'; font-size: 48px; }
  51     .w1 { font-weight: 100; font-weight: 500.4; font-weight: 500px; font-weigth: 500.4px; }
  52     .w2 { font-weight: 200; }
  53     .w3 { font-weight: 300; }
  54     .w4 { font-weight: 400; }
  55     .w5 { font-weight: 500; }
  56     .w6 { font-weight: 600; }
  57     .w7 { font-weight: 700; }
  58     .w8 { font-weight: 800; }
  59     .w9 { font-weight: 900; }
  60 </style>
  61 </head>
  62 <body>
  63 <p>
  64     You should see the numbers 1 to 9 below.
  65 </p>
  66 <div class="w1">
  67     A
  68 </div>
  69 <div class="w2">
  70     A
  71 </div>
  72 <div class="w3">
  73     A
  74 </div>
  75 <div class="w4">
  76     A
  77 </div>
  78 <div class="w5">
  79     A
  80 </div>
  81 <div class="w6">
  82     A
  83 </div>
  84 <div class="w7">
  85     A
  86 </div>
  87 <div class="w8">
  88     A
  89 </div>
  90 <div class="w9">
  91     A
  92 </div>
  93
  94 <script>
  95     if (window.testRunner) {
  96         testRunner.waitUntilDone();
  97         document.fonts.ready.then(function () { testRunner.notifyDone(); });
  98     }
  99 </script>
 100 </body>
 101 </html>