third_party/WebKit/LayoutTests/fast/css/font-face-weight-matching.html

   1 <style>
   2     @font-face {
   3         font-family: f1;
   4         font-weight: 100;
   5         src: url(../../resources/Ahem.ttf);
   6     }
   7     @font-face {
   8         font-family: f1;
   9         font-weight: 600;
  10         src: local(Times);
  11     }
  12
  13     @font-face {
  14         font-family: f2;
  15         font-weight: 600;
  16         src: url(../../resources/Ahem.ttf);
  17     }
  18     @font-face {
  19         font-family: f2;
  20         font-weight: 700;
  21         src: local(Times);
  22     }
  23
  24     @font-face {
  25         font-family: f3;
  26         font-weight: 300;
  27         src: local(Times);
  28     }
  29     @font-face {
  30         font-family: f3;
  31         font-weight: 900;
  32         src: url(../../resources/Ahem.ttf);
  33     }
  34
  35     @font-face {
  36         font-family: f4;
  37         font-weight: 200;
  38         src: local(Times);
  39     }
  40     @font-face {
  41         font-family: f4;
  42         font-weight: 300;
  43         src: url(../../resources/Ahem.ttf);
  44     }
  45
  46     @font-face {
  47         font-family: f5;
  48         font-weight: 300;
  49         src: local(Times);
  50     }
  51     @font-face {
  52         font-family: f5;
  53         font-weight: 500;
  54         src: url(../../resources/Ahem.ttf);
  55     }
  56
  57     @font-face {
  58         font-family: f6;
  59         font-weight: 400;
  60         src: url(../../resources/Ahem.ttf);
  61     }
  62     @font-face {
  63         font-family: f6;
  64         font-weight: 600;
  65         src: local(Times);
  66     }
  67 </style>
  68 <p>
  69     Test for <i><a href="https://bugs.webkit.org/show_bug.cgi?id=34147">https://bugs.webkit.org/show_bug.cgi?id=34147</a> If @font-face does not provide an explicit italic/bold variant, regular is used</i>.
  70 </p>
  71
  72 <p>Checks if WebKit font matching algorithm matches <a href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/#font-matching-algorithm">the latest CSS3 Fonts WD</a>.
  73 If the test passes, all 14 glyphs below should be black squares:</p>
  74 <!-- Exact match -->
  75 <span style="font-family: f1; font-weight: 100">A</span>
  76 <span style="font-family: f2; font-weight: 600">A</span>
  77 <span style="font-family: f3; font-weight: 900">A</span>
  78 <span style="font-family: f4; font-weight: 300">A</span>
  79 <span style="font-family: f5; font-weight: 500">A</span>
  80 <span style="font-family: f6; font-weight: 400">A</span>
  81 <!-- "If the desired weight is less than 400, weights below the desired weight are checked in descending order followed by weights above the desired weight in ascending order until a match is found." -->
  82 <span style="font-family: f1; font-weight: 300">A</span>
  83 <span style="font-family: f2; font-weight: 300">A</span>
  84 <!-- "If the desired weight is greater than 500, weights above the desired weight are checked in ascending order followed by weights below the desired weight in descending order until a match is found." -->
  85 <span style="font-family: f3; font-weight: 600">A</span>
  86 <span style="font-family: f4; font-weight: 600">A</span>
  87 <!-- "If the desired weight is 400, 500 is checked first and then the rule for desired weights less than 400 is used." -->
  88 <span style="font-family: f5; font-weight: 400">A</span>
  89 <span style="font-family: f1; font-weight: 400">A</span>
  90 <!-- "If the desired weight is 500, 400 is checked first and then the rule for desired weights less than 400 is used." -->
  91 <span style="font-family: f6; font-weight: 500">A</span>
  92 <span style="font-family: f1; font-weight: 500">A</span>
  93
  94 <script>
  95     if (window.testRunner) {
  96         testRunner.waitUntilDone();
  97         document.body.offsetTop;
  98         setTimeout(function() { testRunner.notifyDone(); }, 100);
  99     }
 100 </script>