third_party/WebKit/LayoutTests/css3/fonts/font-style-matching.html

   1 <!DOCTYPE html>
   2 <html>
   3 <meta charset="UTF-8">
   4 <head>
   5     <script type="text/javascript" src="../../http/tests/inspector-protocol/inspector-protocol-test.js"></script>
   6     <script type="text/javascript" src="../../http/tests/inspector-protocol/css-protocol-test.js"></script>
   7     <script type="text/javascript" src="../../http/tests/inspector-protocol/dom-protocol-test.js"></script>
   8     <script type="text/javascript" src="resources/style-matching-test.js"></script>
   9     <!-- available fonts --->
  10     <style type="text/css">
  11     </style>
  12     <!-- Applied styles -->
  13     <style type="text/css">
  14       body {
  15         font-size: 24px;
  16         line-height: 110%;
  17         text-rendering: optimizeLegibility;
  18         font-feature-settings: "liga" 1;
  19       }
  20
  21       #condensed_normal_100 {
  22           font-family: CSSMatchingTest;
  23           font-stretch: condensed;
  24           font-style: normal;
  25           font-weight: 100;
  26       }
  27
  28       #condensed_normal_900 {
  29           font-family: CSSMatchingTest;
  30           font-stretch: condensed;
  31           font-style: normal;
  32           font-weight: 900;
  33       }
  34
  35       #condensed_italic_100 {
  36           font-family: CSSMatchingTest;
  37           font-stretch: condensed;
  38           font-style: italic;
  39           font-weight: 100;
  40       }
  41
  42       #condensed_italic_900 {
  43           font-family: CSSMatchingTest;
  44           font-stretch: condensed;
  45           font-style: italic;
  46           font-weight: 900;
  47       }
  48
  49       #expanded_normal_100 {
  50           font-family: CSSMatchingTest;
  51           font-stretch: expanded;
  52           font-style: normal;
  53           font-weight: 100;
  54       }
  55
  56       #expanded_normal_900 {
  57           font-family: CSSMatchingTest;
  58           font-stretch: expanded;
  59           font-style: normal;
  60           font-weight: 900;
  61       }
  62
  63       #expanded_italic_100 {
  64           font-family: CSSMatchingTest;
  65           font-stretch: expanded;
  66           font-style: italic;
  67           font-weight: 100;
  68       }
  69
  70       #expanded_italic_900 {
  71           font-family: CSSMatchingTest;
  72           font-stretch: expanded;
  73           font-style: italic;
  74           font-weight: 900;
  75       }
  76     </style>
  77 </head>
  78 <body>
  79 <pre>According to the CSS3 Fonts Module, Step 4 or the Font Style Matching Algorithm
  80 ( https://drafts.csswg.org/css-fonts-3/#font-style-matching ) must narrow down the
  81 available font faces by finding the nearest match in the following order of
  82 precedence: stretch, style, weight.
  83 </pre>
  84     <div class="test">
  85         <div id="condensed_normal_100">abcdefg</div>
  86         <div id="condensed_normal_900">abcdefg</div>
  87         <div id="condensed_italic_100">abcdefg</div>
  88         <div id="condensed_italic_900">abcdefg</div>
  89         <div id="expanded_normal_100">abcdefg</div>
  90         <div id="expanded_normal_900">abcdefg</div>
  91         <div id="expanded_italic_100">abcdefg</div>
  92         <div id="expanded_italic_900">abcdefg</div>
  93     </div>
  94 </body>
  95 </html>