layout/reftests/font-matching/stretchmapping-137-ref.html

Wed, 31 Dec 2014 07:16:47 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 07:16:47 +0100
branch
TOR_BUG_9701
changeset 3
141e0f1194b1
permissions
-rw-r--r--

Revert simplistic fix pending revisit of Mozilla integration attempt.

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <title>font-stretch 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: Verdana, sans-serif;
    12 }
    14 h3, h4 { font-weight: normal; }
    16 table {
    17   border-collapse: collapse;
    18   font-size: 28px;
    19 }
    21 td {
    22   padding: 0; margin: 0;
    23   font-family: test;
    24 }
    26 th {
    27   font-weight: inherit;
    28 }
    30 p { width: 300px; }
    32 .red { color: red; }
    34 thead { font-weight: 400; font-size: 75%; }
    36 /* make all the spans blocks to avoid influence of what's outside them
    37    on line-height calculations */
    38 span { display: block; }
    40 @font-face {
    41   font-family: test;
    42   src: url(../fonts/mplus/mplus-1p-thin.ttf);
    43   font-weight: 100;
    44   font-stretch: ultra-condensed;
    45 }
    47 @font-face {
    48   font-family: test;
    49   src: url(../fonts/mplus/mplus-1p-regular.ttf);
    50   font-weight: 400;
    51   font-stretch: ultra-condensed;
    52 }
    54 @font-face {
    55   font-family: test;
    56   src: url(../fonts/mplus/mplus-1p-light.ttf);
    57   font-weight: 200;
    58   font-stretch: condensed;
    59 }
    61 @font-face {
    62   font-family: test;
    63   src: url(../fonts/mplus/mplus-1p-heavy.ttf);
    64   font-weight: 800;
    65   font-stretch: condensed;
    66 }
    68 @font-face {
    69   font-family: test;
    70   src: url(../fonts/mplus/mplus-1p-medium.ttf);
    71   font-weight: 500;
    72   font-stretch: expanded;
    73 }
    75 @font-face {
    76   font-family: test;
    77   src: url(../fonts/mplus/mplus-1p-black.ttf);
    78   font-weight: 900;
    79   font-stretch: expanded;
    80 }
    82 @font-face {
    83   font-family: test100;
    84   src: url(../fonts/mplus/mplus-1p-thin.ttf);
    85   font-weight: 100;
    86 }
    88 @font-face {
    89   font-family: test200;
    90   src: url(../fonts/mplus/mplus-1p-light.ttf);
    91   font-weight: 200;
    92 }
    94 @font-face {
    95   font-family: test400;
    96   src: url(../fonts/mplus/mplus-1p-regular.ttf);
    97   font-weight: 400;
    98 }
   100 @font-face {
   101   font-family: test500;
   102   src: url(../fonts/mplus/mplus-1p-medium.ttf);
   103   font-weight: 500;
   104 }
   106 @font-face {
   107   font-family: test800;
   108   src: url(../fonts/mplus/mplus-1p-heavy.ttf);
   109   font-weight: 800;
   110 }
   112 @font-face {
   113   font-family: test900;
   114   src: url(../fonts/mplus/mplus-1p-black.ttf);
   115   font-weight: 900;
   116 }
   118 .w1 { font-weight: 100; }
   119 .w2 { font-weight: 200; }
   120 .w3 { font-weight: 300; }
   121 .w4 { font-weight: 400; }
   122 .w5 { font-weight: 500; }
   123 .w6 { font-weight: 600; }
   124 .w7 { font-weight: 700; }
   125 .w8 { font-weight: 800; }
   126 .w9 { font-weight: 900; }
   128 .w1 .fs1 { font-family: test100; }
   129 .w2 .fs1 { font-family: test100; }
   130 .w3 .fs1 { font-family: test100; }
   131 .w4 .fs1 { font-family: test400; }
   132 .w5 .fs1 { font-family: test400; }
   133 .w6 .fs1 { font-family: test400; }
   134 .w7 .fs1 { font-family: test400; }
   135 .w8 .fs1 { font-family: test400; }
   136 .w9 .fs1 { font-family: test400; }
   138 .w1 .fs2 { font-family: test100; }
   139 .w2 .fs2 { font-family: test100; }
   140 .w3 .fs2 { font-family: test100; }
   141 .w4 .fs2 { font-family: test400; }
   142 .w5 .fs2 { font-family: test400; }
   143 .w6 .fs2 { font-family: test400; }
   144 .w7 .fs2 { font-family: test400; }
   145 .w8 .fs2 { font-family: test400; }
   146 .w9 .fs2 { font-family: test400; }
   148 .w1 .fs3 { font-family: test200; }
   149 .w2 .fs3 { font-family: test200; }
   150 .w3 .fs3 { font-family: test200; }
   151 .w4 .fs3 { font-family: test200; }
   152 .w5 .fs3 { font-family: test200; }
   153 .w6 .fs3 { font-family: test800; }
   154 .w7 .fs3 { font-family: test800; }
   155 .w8 .fs3 { font-family: test800; }
   156 .w9 .fs3 { font-family: test800; }
   158 .w1 .fs4 { font-family: test200; }
   159 .w2 .fs4 { font-family: test200; }
   160 .w3 .fs4 { font-family: test200; }
   161 .w4 .fs4 { font-family: test200; }
   162 .w5 .fs4 { font-family: test200; }
   163 .w6 .fs4 { font-family: test800; }
   164 .w7 .fs4 { font-family: test800; }
   165 .w8 .fs4 { font-family: test800; }
   166 .w9 .fs4 { font-family: test800; }
   168 .w1 .fs5 { font-family: test200; }
   169 .w2 .fs5 { font-family: test200; }
   170 .w3 .fs5 { font-family: test200; }
   171 .w4 .fs5 { font-family: test200; }
   172 .w5 .fs5 { font-family: test200; }
   173 .w6 .fs5 { font-family: test800; }
   174 .w7 .fs5 { font-family: test800; }
   175 .w8 .fs5 { font-family: test800; }
   176 .w9 .fs5 { font-family: test800; }
   178 .w1 .fs6 { font-family: test500; }
   179 .w2 .fs6 { font-family: test500; }
   180 .w3 .fs6 { font-family: test500; }
   181 .w4 .fs6 { font-family: test500; }
   182 .w5 .fs6 { font-family: test500; }
   183 .w6 .fs6 { font-family: test900; }
   184 .w7 .fs6 { font-family: test900; }
   185 .w8 .fs6 { font-family: test900; }
   186 .w9 .fs6 { font-family: test900; }
   188 .w1 .fs7 { font-family: test500; }
   189 .w2 .fs7 { font-family: test500; }
   190 .w3 .fs7 { font-family: test500; }
   191 .w4 .fs7 { font-family: test500; }
   192 .w5 .fs7 { font-family: test500; }
   193 .w6 .fs7 { font-family: test900; }
   194 .w7 .fs7 { font-family: test900; }
   195 .w8 .fs7 { font-family: test900; }
   196 .w9 .fs7 { font-family: test900; }
   198 .w1 .fs8 { font-family: test500; }
   199 .w2 .fs8 { font-family: test500; }
   200 .w3 .fs8 { font-family: test500; }
   201 .w4 .fs8 { font-family: test500; }
   202 .w5 .fs8 { font-family: test500; }
   203 .w6 .fs8 { font-family: test900; }
   204 .w7 .fs8 { font-family: test900; }
   205 .w8 .fs8 { font-family: test900; }
   206 .w9 .fs8 { font-family: test900; }
   208 .w1 .fs9 { font-family: test500; }
   209 .w2 .fs9 { font-family: test500; }
   210 .w3 .fs9 { font-family: test500; }
   211 .w4 .fs9 { font-family: test500; }
   212 .w5 .fs9 { font-family: test500; }
   213 .w6 .fs9 { font-family: test900; }
   214 .w7 .fs9 { font-family: test900; }
   215 .w8 .fs9 { font-family: test900; }
   216 .w9 .fs9 { font-family: test900; }
   218 </style>
   219 </head>
   220 <body>
   222 <p>Font family with ultra-condensed 100, 400, condensed 200, 800 and expanded 500, 900</p>
   224 <table>
   225 <thead>
   226 <th></th>
   227 <th class="red">1</th>
   228 <th>2</th>
   229 <th class="red">3</th>
   230 <th>4</th>
   231 <th>5</th>
   232 <th>6</th>
   233 <th class="red">7</th>
   234 <th>8</th>
   235 <th>9</th>
   236 </thead>
   237 <tr class="w1">
   238 <th>100</th>
   239 <td class="fs1"><span>か</span></td>
   240 <td class="fs2"><span>か</span></td>
   241 <td class="fs3"><span>か</span></td>
   242 <td class="fs4"><span>か</span></td>
   243 <td class="fs5"><span>か</span></td>
   244 <td class="fs6"><span>か</span></td>
   245 <td class="fs7"><span>か</span></td>
   246 <td class="fs8"><span>か</span></td>
   247 <td class="fs9"><span>か</span></td>
   248 </tr>
   249 <tr class="w2">
   250 <th>200</th>
   251 <td class="fs1"><span>か</span></td>
   252 <td class="fs2"><span>か</span></td>
   253 <td class="fs3"><span>か</span></td>
   254 <td class="fs4"><span>か</span></td>
   255 <td class="fs5"><span>か</span></td>
   256 <td class="fs6"><span>か</span></td>
   257 <td class="fs7"><span>か</span></td>
   258 <td class="fs8"><span>か</span></td>
   259 <td class="fs9"><span>か</span></td>
   260 </tr>
   261 <tr class="w3">
   262 <th>300</th>
   263 <td class="fs1"><span>か</span></td>
   264 <td class="fs2"><span>か</span></td>
   265 <td class="fs3"><span>か</span></td>
   266 <td class="fs4"><span>か</span></td>
   267 <td class="fs5"><span>か</span></td>
   268 <td class="fs6"><span>か</span></td>
   269 <td class="fs7"><span>か</span></td>
   270 <td class="fs8"><span>か</span></td>
   271 <td class="fs9"><span>か</span></td>
   272 </tr>
   273 <tr class="w4">
   274 <th>400</th>
   275 <td class="fs1"><span>か</span></td>
   276 <td class="fs2"><span>か</span></td>
   277 <td class="fs3"><span>か</span></td>
   278 <td class="fs4"><span>か</span></td>
   279 <td class="fs5"><span>か</span></td>
   280 <td class="fs6"><span>か</span></td>
   281 <td class="fs7"><span>か</span></td>
   282 <td class="fs8"><span>か</span></td>
   283 <td class="fs9"><span>か</span></td>
   284 </tr>
   285 <tr class="w5">
   286 <th>500</th>
   287 <td class="fs1"><span>か</span></td>
   288 <td class="fs2"><span>か</span></td>
   289 <td class="fs3"><span>か</span></td>
   290 <td class="fs4"><span>か</span></td>
   291 <td class="fs5"><span>か</span></td>
   292 <td class="fs6"><span>か</span></td>
   293 <td class="fs7"><span>か</span></td>
   294 <td class="fs8"><span>か</span></td>
   295 <td class="fs9"><span>か</span></td>
   296 </tr>
   297 <tr class="w6">
   298 <th>600</th>
   299 <td class="fs1"><span>か</span></td>
   300 <td class="fs2"><span>か</span></td>
   301 <td class="fs3"><span>か</span></td>
   302 <td class="fs4"><span>か</span></td>
   303 <td class="fs5"><span>か</span></td>
   304 <td class="fs6"><span>か</span></td>
   305 <td class="fs7"><span>か</span></td>
   306 <td class="fs8"><span>か</span></td>
   307 <td class="fs9"><span>か</span></td>
   308 </tr>
   309 <tr class="w7">
   310 <th>700</th>
   311 <td class="fs1"><span>か</span></td>
   312 <td class="fs2"><span>か</span></td>
   313 <td class="fs3"><span>か</span></td>
   314 <td class="fs4"><span>か</span></td>
   315 <td class="fs5"><span>か</span></td>
   316 <td class="fs6"><span>か</span></td>
   317 <td class="fs7"><span>か</span></td>
   318 <td class="fs8"><span>か</span></td>
   319 <td class="fs9"><span>か</span></td>
   320 </tr>
   321 <tr class="w8">
   322 <th>800</th>
   323 <td class="fs1"><span>か</span></td>
   324 <td class="fs2"><span>か</span></td>
   325 <td class="fs3"><span>か</span></td>
   326 <td class="fs4"><span>か</span></td>
   327 <td class="fs5"><span>か</span></td>
   328 <td class="fs6"><span>か</span></td>
   329 <td class="fs7"><span>か</span></td>
   330 <td class="fs8"><span>か</span></td>
   331 <td class="fs9"><span>か</span></td>
   332 </tr>
   333 <tr class="w9">
   334 <th>900</th>
   335 <td class="fs1"><span>か</span></td>
   336 <td class="fs2"><span>か</span></td>
   337 <td class="fs3"><span>か</span></td>
   338 <td class="fs4"><span>か</span></td>
   339 <td class="fs5"><span>か</span></td>
   340 <td class="fs6"><span>か</span></td>
   341 <td class="fs7"><span>か</span></td>
   342 <td class="fs8"><span>か</span></td>
   343 <td class="fs9"><span>か</span></td>
   344 </tr>
   345 </table>
   347 </body>
   348 </html>

mercurial