layout/reftests/font-matching/weightmapping-458-ref.html

Fri, 16 Jan 2015 18:13:44 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Fri, 16 Jan 2015 18:13:44 +0100
branch
TOR_BUG_9701
changeset 14
925c144e1f1f
permissions
-rw-r--r--

Integrate suggestion from review to improve consistency with existing code.

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <title>Weight mapping tests</title>
     5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     7 <style type="text/css">
     9 body {
    10   margin: 50px;
    11   font-family: Futura, Verdana, sans-serif;
    12 }
    14 h3, h4 { font-weight: normal; }
    16 /* make all the spans blocks to avoid influence of what's outside them
    17    on line-height calculations */
    18 span { display: block; }
    20 @font-face {
    21   font-family: test;
    22   src: url(../fonts/mplus/mplus-1p-regular.ttf);
    23   font-weight: normal;
    24 }
    26 @font-face {
    27   font-family: test;
    28   src: url(../fonts/mplus/mplus-1p-medium.ttf);
    29   font-weight: 500;
    30 }
    32 @font-face {
    33   font-family: test;
    34   src: url(../fonts/mplus/mplus-1p-heavy.ttf);
    35   font-weight: 800;
    36 }
    38 @font-face {
    39   font-family: test400;
    40   src: url(../fonts/mplus/mplus-1p-regular.ttf);
    41 }
    43 @font-face {
    44   font-family: test500;
    45   src: url(../fonts/mplus/mplus-1p-medium.ttf);
    46 }
    48 @font-face {
    49   font-family: test800;
    50   src: url(../fonts/mplus/mplus-1p-heavy.ttf);
    51 }
    53 table {
    54   border-collapse: collapse;
    55   font-family: test;
    56   font-size: 20px;
    57 }
    59 td {
    60   padding: 0; margin: 0;
    61 }
    63 th {
    64   font-weight: inherit;
    65 }
    67 .red { color: red; }
    69 th.cnor { font-weight: inherit; }
    70 th.cbo { font-weight: bolder; }
    71 th.cbobo, th.cbobo span { font-weight: bolder; }
    72 th.cli { font-weight: lighter; }
    73 th.clili, th.clili span { font-weight: lighter; }
    75 thead { font-weight: 400; font-size: 75%; }
    77 .w1 .clili { font-family: test400; }
    78 .w1 .cli { font-family: test400; }
    79 .w1 .cnor { font-family: test400; }
    80 .w1 .cbo { font-family: test400; }
    81 .w1 .cbobo { font-family: test800; }
    83 .w2 .clili { font-family: test400; }
    84 .w2 .cli { font-family: test400; }
    85 .w2 .cnor { font-family: test400; }
    86 .w2 .cbo { font-family: test400; }
    87 .w2 .cbobo { font-family: test800; }
    89 .w3 .clili { font-family: test400; }
    90 .w3 .cli { font-family: test400; }
    91 .w3 .cnor { font-family: test400; }
    92 .w3 .cbo { font-family: test400; }
    93 .w3 .cbobo { font-family: test800; }
    95 .w4 .clili { font-family: test400; }
    96 .w4 .cli { font-family: test400; }
    97 .w4 .cnor { font-family: test400; }
    98 .w4 .cbo { font-family: test800; }
    99 .w4 .cbobo { font-family: test800; }
   101 .w5 .clili { font-family: test400; }
   102 .w5 .cli { font-family: test400; }
   103 .w5 .cnor { font-family: test500; }
   104 .w5 .cbo { font-family: test800; }
   105 .w5 .cbobo { font-family: test800; }
   107 .w6 .clili { font-family: test400; }
   108 .w6 .cli { font-family: test400; }
   109 .w6 .cnor { font-family: test800; }
   110 .w6 .cbo { font-family: test800; }
   111 .w6 .cbobo { font-family: test800; }
   113 .w7 .clili { font-family: test400; }
   114 .w7 .cli { font-family: test400; }
   115 .w7 .cnor { font-family: test800; }
   116 .w7 .cbo { font-family: test800; }
   117 .w7 .cbobo { font-family: test800; }
   119 .w8 .clili { font-family: test400; }
   120 .w8 .cli { font-family: test800; }
   121 .w8 .cnor { font-family: test800; }
   122 .w8 .cbo { font-family: test800; }
   123 .w8 .cbobo { font-family: test800; }
   125 .w9 .clili { font-family: test400; }
   126 .w9 .cli { font-family: test800; }
   127 .w9 .cnor { font-family: test800; }
   128 .w9 .cbo { font-family: test800; }
   129 .w9 .cbobo { font-family: test800; }
   131 .w1 th { font-weight: 100; }
   132 .w2 th { font-weight: 200; }
   133 .w3 th { font-weight: 300; }
   134 .w4 th { font-weight: 400; }
   135 .w5 th { font-weight: 500; }
   136 .w6 th { font-weight: 600; }
   137 .w7 th { font-weight: 700; }
   138 .w8 th { font-weight: 800; }
   139 .w9 th { font-weight: 900; }
   141 </style>
   142 </head>
   143 <body>
   145 <h3>Font family with 400, 500, 800 weights</h3>
   147 <table>
   148 <thead>
   149 <th></th>
   150 <th class="clili"><span>lighter lighter</span></th>
   151 <th class="cli"><span>lighter</span></th>
   152 <th class="cnor"><span>normal</span></th>
   153 <th class="cbo"><span>bolder</span></th>
   154 <th class="cbobo"><span>bolder bolder</span></th>
   155 </thead>
   156 <tr class="w1">
   157 <th>100</th>
   158 <td class="clili"><span>東京特許許可局</span></td>
   159 <td class="cli"><span>東京特許許可局</span></td>
   160 <td class="cnor"><span>東京特許許可局</span></td>
   161 <td class="cbo"><span>東京特許許可局</span></td>
   162 <td class="cbobo"><span>東京特許許可局</span></td>
   163 </tr>
   164 <tr class="w2">
   165 <th>200</th>
   166 <td class="clili"><span>東京特許許可局</span></td>
   167 <td class="cli"><span>東京特許許可局</span></td>
   168 <td class="cnor"><span>東京特許許可局</span></td>
   169 <td class="cbo"><span>東京特許許可局</span></td>
   170 <td class="cbobo"><span>東京特許許可局</span></td>
   171 </tr>
   172 <tr class="w3">
   173 <th>300</th>
   174 <td class="clili"><span>東京特許許可局</span></td>
   175 <td class="cli"><span>東京特許許可局</span></td>
   176 <td class="cnor"><span>東京特許許可局</span></td>
   177 <td class="cbo"><span>東京特許許可局</span></td>
   178 <td class="cbobo"><span>東京特許許可局</span></td>
   179 </tr>
   180 <tr class="w4">
   181 <th class="red">400</th>
   182 <td class="clili"><span>東京特許許可局</span></td>
   183 <td class="cli"><span>東京特許許可局</span></td>
   184 <td class="cnor"><span>東京特許許可局</span></td>
   185 <td class="cbo"><span>東京特許許可局</span></td>
   186 <td class="cbobo"><span>東京特許許可局</span></td>
   187 </tr>
   188 <tr class="w5">
   189 <th class="red">500</th>
   190 <td class="clili"><span>東京特許許可局</span></td>
   191 <td class="cli"><span>東京特許許可局</span></td>
   192 <td class="cnor"><span>東京特許許可局</span></td>
   193 <td class="cbo"><span>東京特許許可局</span></td>
   194 <td class="cbobo"><span>東京特許許可局</span></td>
   195 </tr>
   196 <tr class="w6">
   197 <th>600</th>
   198 <td class="clili"><span>東京特許許可局</span></td>
   199 <td class="cli"><span>東京特許許可局</span></td>
   200 <td class="cnor"><span>東京特許許可局</span></td>
   201 <td class="cbo"><span>東京特許許可局</span></td>
   202 <td class="cbobo"><span>東京特許許可局</span></td>
   203 </tr>
   204 <tr class="w7">
   205 <th>700</th>
   206 <td class="clili"><span>東京特許許可局</span></td>
   207 <td class="cli"><span>東京特許許可局</span></td>
   208 <td class="cnor"><span>東京特許許可局</span></td>
   209 <td class="cbo"><span>東京特許許可局</span></td>
   210 <td class="cbobo"><span>東京特許許可局</span></td>
   211 </tr>
   212 <tr class="w8">
   213 <th class="red">800</th>
   214 <td class="clili"><span>東京特許許可局</span></td>
   215 <td class="cli"><span>東京特許許可局</span></td>
   216 <td class="cnor"><span>東京特許許可局</span></td>
   217 <td class="cbo"><span>東京特許許可局</span></td>
   218 <td class="cbobo"><span>東京特許許可局</span></td>
   219 </tr>
   220 <tr class="w9">
   221 <th>900</th>
   222 <td class="clili"><span>東京特許許可局</span></td>
   223 <td class="cli"><span>東京特許許可局</span></td>
   224 <td class="cnor"><span>東京特許許可局</span></td>
   225 <td class="cbo"><span>東京特許許可局</span></td>
   226 <td class="cbobo"><span>東京特許許可局</span></td>
   227 </tr>
   228 </table>
   230 <p>tokyotokkyokyokakyoku</p>
   232 </body>
   233 </html>

mercurial