layout/reftests/font-matching/stretchmapping-all.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <title>font-stretch matching tests</title>
   5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6
   7 <style type="text/css">
   8
   9 body {
  10   margin: 50px;
  11   font-family: Calibri, Verdana, sans-serif;
  12 }
  13
  14 p { margin: 0; padding: 0; }
  15
  16 table {
  17   border-collapse: collapse;
  18 }
  19
  20 th {
  21   font-weight: normal;
  22   background-color: #eee;
  23 }
  24
  25 th, td { width: 3em; text-align: left; }
  26 tr th { text-align: left; }
  27
  28 .fstest-full { font-family: fstest-full; }
  29
  30 @font-face {
  31   font-family: fstest-full;
  32   src: url(../fonts/csstest-widths-wd1.ttf);
  33   font-stretch: ultra-condensed;
  34 }
  35
  36 @font-face {
  37   font-family: fstest-full;
  38   src: url(../fonts/csstest-widths-wd2.ttf);
  39   font-stretch: extra-condensed;
  40 }
  41
  42 @font-face {
  43   font-family: fstest-full;
  44   src: url(../fonts/csstest-widths-wd3.ttf);
  45   font-stretch: condensed;
  46 }
  47
  48 @font-face {
  49   font-family: fstest-full;
  50   src: url(../fonts/csstest-widths-wd4.ttf);
  51   font-stretch: semi-condensed;
  52 }
  53
  54 @font-face {
  55   font-family: fstest-full;
  56   src: url(../fonts/csstest-widths-wd5.ttf);
  57   font-stretch: normal;
  58 }
  59
  60 @font-face {
  61   font-family: fstest-full;
  62   src: url(../fonts/csstest-widths-wd6.ttf);
  63   font-stretch: semi-expanded;
  64 }
  65
  66 @font-face {
  67   font-family: fstest-full;
  68   src: url(../fonts/csstest-widths-wd7.ttf);
  69   font-stretch: expanded;
  70 }
  71
  72 @font-face {
  73   font-family: fstest-full;
  74   src: url(../fonts/csstest-widths-wd8.ttf);
  75   font-stretch: extra-expanded;
  76 }
  77
  78 @font-face {
  79   font-family: fstest-full;
  80   src: url(../fonts/csstest-widths-wd9.ttf);
  81   font-stretch: ultra-expanded;
  82 }
  83
  84 .fstest-1-3 { font-family: fstest-1-3; }
  85
  86 @font-face {
  87   font-family: fstest-1-3;
  88   src: url(../fonts/csstest-widths-wd1.ttf);
  89   font-stretch: ultra-condensed;
  90 }
  91
  92 @font-face {
  93   font-family: fstest-1-3;
  94   src: url(../fonts/csstest-widths-wd3.ttf);
  95   font-stretch: condensed;
  96 }
  97
  98 .fstest-1-4 { font-family: fstest-1-4; }
  99
 100 @font-face {
 101   font-family: fstest-1-4;
 102   src: url(../fonts/csstest-widths-wd1.ttf);
 103   font-stretch: ultra-condensed;
 104 }
 105
 106 @font-face {
 107   font-family: fstest-1-4;
 108   src: url(../fonts/csstest-widths-wd4.ttf);
 109   font-stretch: semi-condensed;
 110 }
 111
 112 .fstest-1-5 { font-family: fstest-1-5; }
 113
 114 @font-face {
 115   font-family: fstest-1-5;
 116   src: url(../fonts/csstest-widths-wd1.ttf);
 117   font-stretch: ultra-condensed;
 118 }
 119
 120 @font-face {
 121   font-family: fstest-1-5;
 122   src: url(../fonts/csstest-widths-wd5.ttf);
 123   font-stretch: normal;
 124 }
 125
 126 .fstest-2-6 { font-family: fstest-2-6; }
 127
 128 @font-face {
 129   font-family: fstest-2-6;
 130   src: url(../fonts/csstest-widths-wd2.ttf);
 131   font-stretch: extra-condensed;
 132 }
 133
 134 @font-face {
 135   font-family: fstest-2-6;
 136   src: url(../fonts/csstest-widths-wd6.ttf);
 137   font-stretch: semi-expanded;
 138 }
 139
 140 .fstest-4-6 { font-family: fstest-4-6; }
 141
 142 @font-face {
 143   font-family: fstest-4-6;
 144   src: url(../fonts/csstest-widths-wd4.ttf);
 145   font-stretch: semi-condensed;
 146 }
 147
 148 @font-face {
 149   font-family: fstest-4-6;
 150   src: url(../fonts/csstest-widths-wd6.ttf);
 151   font-stretch: semi-expanded;
 152 }
 153
 154 .fstest-4-7 { font-family: fstest-4-7; }
 155
 156 @font-face {
 157   font-family: fstest-4-7;
 158   src: url(../fonts/csstest-widths-wd4.ttf);
 159   font-stretch: semi-condensed;
 160 }
 161
 162 @font-face {
 163   font-family: fstest-4-7;
 164   src: url(../fonts/csstest-widths-wd7.ttf);
 165   font-stretch: expanded;
 166 }
 167
 168 .fstest-6-7 { font-family: fstest-6-7; }
 169
 170 @font-face {
 171   font-family: fstest-6-7;
 172   src: url(../fonts/csstest-widths-wd6.ttf);
 173   font-stretch: semi-expanded;
 174 }
 175
 176 @font-face {
 177   font-family: fstest-6-7;
 178   src: url(../fonts/csstest-widths-wd7.ttf);
 179   font-stretch: expanded;
 180 }
 181
 182 .fstest-7-9 { font-family: fstest-7-9; }
 183
 184 @font-face {
 185   font-family: fstest-7-9;
 186   src: url(../fonts/csstest-widths-wd7.ttf);
 187   font-stretch: expanded;
 188 }
 189
 190 @font-face {
 191   font-family: fstest-7-9;
 192   src: url(../fonts/csstest-widths-wd9.ttf);
 193   font-stretch: ultra-expanded;
 194 }
 195
 196 .fstest-8-9 { font-family: fstest-8-9; }
 197
 198 @font-face {
 199   font-family: fstest-8-9;
 200   src: url(../fonts/csstest-widths-wd8.ttf);
 201   font-stretch: extra-expanded;
 202 }
 203
 204 @font-face {
 205   font-family: fstest-8-9;
 206   src: url(../fonts/csstest-widths-wd9.ttf);
 207   font-stretch: ultra-expanded;
 208 }
 209
 210 .fs1 { font-stretch: ultra-condensed; }
 211 .fs2 { font-stretch: extra-condensed; }
 212 .fs3 { font-stretch: condensed; }
 213 .fs4 { font-stretch: semi-condensed; }
 214 .fs5 { font-stretch: normal; }
 215 .fs6 { font-stretch: semi-expanded; }
 216 .fs7 { font-stretch: expanded; }
 217 .fs8 { font-stretch: extra-expanded; }
 218 .fs9 { font-stretch: ultra-expanded; }
 219
 220 </style>
 221
 222 <script type="text/javascript">
 223
 224 </script>
 225
 226 </head>
 227 <body>
 228
 229 <p>font-stretch mapping with different font family sets</p>
 230 <p>(only numbers should appear in the body of the table)</p>
 231
 232 <table>
 233 <thead>
 234 <th>width</th>
 235 <th>full</th>
 236 <th>1-3</th>
 237 <th>1-4</th>
 238 <th>1-5</th>
 239 <th>2-6</th>
 240 <th>4-6</th>
 241 <th>4-7</th>
 242 <th>6-7</th>
 243 <th>7-9</th>
 244 <th>8-9</th>
 245 </thead>
 246 <tr class="fs1">
 247 <th>1</th>
 248 <td class="fstest-full">F</td>
 249 <td class="fstest-1-3">F</td>
 250 <td class="fstest-1-4">F</td>
 251 <td class="fstest-1-5">F</td>
 252 <td class="fstest-2-6">F</td>
 253 <td class="fstest-4-6">F</td>
 254 <td class="fstest-4-7">F</td>
 255 <td class="fstest-6-7">F</td>
 256 <td class="fstest-7-9">F</td>
 257 <td class="fstest-8-9">F</td>
 258 </tr>
 259 <tr class="fs2">
 260 <th>2</th>
 261 <td class="fstest-full">F</td>
 262 <td class="fstest-1-3">F</td>
 263 <td class="fstest-1-4">F</td>
 264 <td class="fstest-1-5">F</td>
 265 <td class="fstest-2-6">F</td>
 266 <td class="fstest-4-6">F</td>
 267 <td class="fstest-4-7">F</td>
 268 <td class="fstest-6-7">F</td>
 269 <td class="fstest-7-9">F</td>
 270 <td class="fstest-8-9">F</td>
 271 </tr>
 272 <tr class="fs3">
 273 <th>3</th>
 274 <td class="fstest-full">F</td>
 275 <td class="fstest-1-3">F</td>
 276 <td class="fstest-1-4">F</td>
 277 <td class="fstest-1-5">F</td>
 278 <td class="fstest-2-6">F</td>
 279 <td class="fstest-4-6">F</td>
 280 <td class="fstest-4-7">F</td>
 281 <td class="fstest-6-7">F</td>
 282 <td class="fstest-7-9">F</td>
 283 <td class="fstest-8-9">F</td>
 284 </tr>
 285 <tr class="fs4">
 286 <th>4</th>
 287 <td class="fstest-full">F</td>
 288 <td class="fstest-1-3">F</td>
 289 <td class="fstest-1-4">F</td>
 290 <td class="fstest-1-5">F</td>
 291 <td class="fstest-2-6">F</td>
 292 <td class="fstest-4-6">F</td>
 293 <td class="fstest-4-7">F</td>
 294 <td class="fstest-6-7">F</td>
 295 <td class="fstest-7-9">F</td>
 296 <td class="fstest-8-9">F</td>
 297 </tr>
 298 <tr class="fs5">
 299 <th>5</th>
 300 <td class="fstest-full">F</td>
 301 <td class="fstest-1-3">F</td>
 302 <td class="fstest-1-4">F</td>
 303 <td class="fstest-1-5">F</td>
 304 <td class="fstest-2-6">F</td>
 305 <td class="fstest-4-6">F</td>
 306 <td class="fstest-4-7">F</td>
 307 <td class="fstest-6-7">F</td>
 308 <td class="fstest-7-9">F</td>
 309 <td class="fstest-8-9">F</td>
 310 </tr>
 311 <tr class="fs6">
 312 <th>6</th>
 313 <td class="fstest-full">F</td>
 314 <td class="fstest-1-3">F</td>
 315 <td class="fstest-1-4">F</td>
 316 <td class="fstest-1-5">F</td>
 317 <td class="fstest-2-6">F</td>
 318 <td class="fstest-4-6">F</td>
 319 <td class="fstest-4-7">F</td>
 320 <td class="fstest-6-7">F</td>
 321 <td class="fstest-7-9">F</td>
 322 <td class="fstest-8-9">F</td>
 323 </tr>
 324 <tr class="fs7">
 325 <th>7</th>
 326 <td class="fstest-full">F</td>
 327 <td class="fstest-1-3">F</td>
 328 <td class="fstest-1-4">F</td>
 329 <td class="fstest-1-5">F</td>
 330 <td class="fstest-2-6">F</td>
 331 <td class="fstest-4-6">F</td>
 332 <td class="fstest-4-7">F</td>
 333 <td class="fstest-6-7">F</td>
 334 <td class="fstest-7-9">F</td>
 335 <td class="fstest-8-9">F</td>
 336 </tr>
 337 <tr class="fs8">
 338 <th>8</th>
 339 <td class="fstest-full">F</td>
 340 <td class="fstest-1-3">F</td>
 341 <td class="fstest-1-4">F</td>
 342 <td class="fstest-1-5">F</td>
 343 <td class="fstest-2-6">F</td>
 344 <td class="fstest-4-6">F</td>
 345 <td class="fstest-4-7">F</td>
 346 <td class="fstest-6-7">F</td>
 347 <td class="fstest-7-9">F</td>
 348 <td class="fstest-8-9">F</td>
 349 </tr>
 350 <tr class="fs9">
 351 <th>9</th>
 352 <td class="fstest-full">F</td>
 353 <td class="fstest-1-3">F</td>
 354 <td class="fstest-1-4">F</td>
 355 <td class="fstest-1-5">F</td>
 356 <td class="fstest-2-6">F</td>
 357 <td class="fstest-4-6">F</td>
 358 <td class="fstest-4-7">F</td>
 359 <td class="fstest-6-7">F</td>
 360 <td class="fstest-7-9">F</td>
 361 <td class="fstest-8-9">F</td>
 362 </tr>
 363 </table>
 364
 365 <!--
 366
 367 <p>Results based on spec logic:</p>
 368
 369 <table>
 370 <thead>
 371 <th>width</th>
 372 <th>full</th>
 373 <th>1-3</th>
 374 <th>1-4</th>
 375 <th>1-5</th>
 376 <th>2-6</th>
 377 <th>4-6</th>
 378 <th>4-7</th>
 379 <th>6-7</th>
 380 <th>7-9</th>
 381 <th>8-9</th>
 382 </thead>
 383 <tr class="fs1">
 384 <th>1</th>
 385 <td class="fstest-full">1</td>
 386 <td class="fstest-1-3">1</td>
 387 <td class="fstest-1-4">1</td>
 388 <td class="fstest-1-5">1</td>
 389 <td class="fstest-2-6">2</td>
 390 <td class="fstest-4-6">4</td>
 391 <td class="fstest-4-7">4</td>
 392 <td class="fstest-6-7">6</td>
 393 <td class="fstest-7-9">7</td>
 394 <td class="fstest-8-9">8</td>
 395 </tr>
 396 <tr class="fs2">
 397 <th>2</th>
 398 <td class="fstest-full">2</td>
 399 <td class="fstest-1-3">1</td>
 400 <td class="fstest-1-4">1</td>
 401 <td class="fstest-1-5">1</td>
 402 <td class="fstest-2-6">2</td>
 403 <td class="fstest-4-6">4</td>
 404 <td class="fstest-4-7">4</td>
 405 <td class="fstest-6-7">6</td>
 406 <td class="fstest-7-9">7</td>
 407 <td class="fstest-8-9">8</td>
 408 </tr>
 409 <tr class="fs3">
 410 <th>3</th>
 411 <td class="fstest-full">3</td>
 412 <td class="fstest-1-3">3</td>
 413 <td class="fstest-1-4">1</td>
 414 <td class="fstest-1-5">1</td>
 415 <td class="fstest-2-6">2</td>
 416 <td class="fstest-4-6">4</td>
 417 <td class="fstest-4-7">4</td>
 418 <td class="fstest-6-7">6</td>
 419 <td class="fstest-7-9">7</td>
 420 <td class="fstest-8-9">8</td>
 421 </tr>
 422 <tr class="fs4">
 423 <th>4</th>
 424 <td class="fstest-full">4</td>
 425 <td class="fstest-1-3">3</td>
 426 <td class="fstest-1-4">4</td>
 427 <td class="fstest-1-5">1</td>
 428 <td class="fstest-2-6">2</td>
 429 <td class="fstest-4-6">4</td>
 430 <td class="fstest-4-7">4</td>
 431 <td class="fstest-6-7">6</td>
 432 <td class="fstest-7-9">7</td>
 433 <td class="fstest-8-9">8</td>
 434 </tr>
 435 <tr class="fs5">
 436 <th>5</th>
 437 <td class="fstest-full">5</td>
 438 <td class="fstest-1-3">3</td>
 439 <td class="fstest-1-4">4</td>
 440 <td class="fstest-1-5">5</td>
 441 <td class="fstest-2-6">2</td>
 442 <td class="fstest-4-6">4</td>
 443 <td class="fstest-4-7">4</td>
 444 <td class="fstest-6-7">6</td>
 445 <td class="fstest-7-9">7</td>
 446 <td class="fstest-8-9">8</td>
 447 </tr>
 448 <tr class="fs6">
 449 <th>6</th>
 450 <td class="fstest-full">6</td>
 451 <td class="fstest-1-3">3</td>
 452 <td class="fstest-1-4">4</td>
 453 <td class="fstest-1-5">5</td>
 454 <td class="fstest-2-6">6</td>
 455 <td class="fstest-4-6">6</td>
 456 <td class="fstest-4-7">7</td>
 457 <td class="fstest-6-7">6</td>
 458 <td class="fstest-7-9">7</td>
 459 <td class="fstest-8-9">8</td>
 460 </tr>
 461 <tr class="fs7">
 462 <th>7</th>
 463 <td class="fstest-full">7</td>
 464 <td class="fstest-1-3">3</td>
 465 <td class="fstest-1-4">4</td>
 466 <td class="fstest-1-5">5</td>
 467 <td class="fstest-2-6">6</td>
 468 <td class="fstest-4-6">6</td>
 469 <td class="fstest-4-7">7</td>
 470 <td class="fstest-6-7">7</td>
 471 <td class="fstest-7-9">7</td>
 472 <td class="fstest-8-9">8</td>
 473 </tr>
 474 <tr class="fs8">
 475 <th>8</th>
 476 <td class="fstest-full">8</td>
 477 <td class="fstest-1-3">3</td>
 478 <td class="fstest-1-4">4</td>
 479 <td class="fstest-1-5">5</td>
 480 <td class="fstest-2-6">6</td>
 481 <td class="fstest-4-6">6</td>
 482 <td class="fstest-4-7">7</td>
 483 <td class="fstest-6-7">7</td>
 484 <td class="fstest-7-9">9</td>
 485 <td class="fstest-8-9">8</td>
 486 </tr>
 487 <tr class="fs9">
 488 <th>9</th>
 489 <td class="fstest-full">9</td>
 490 <td class="fstest-1-3">3</td>
 491 <td class="fstest-1-4">4</td>
 492 <td class="fstest-1-5">5</td>
 493 <td class="fstest-2-6">6</td>
 494 <td class="fstest-4-6">6</td>
 495 <td class="fstest-4-7">7</td>
 496 <td class="fstest-6-7">7</td>
 497 <td class="fstest-7-9">9</td>
 498 <td class="fstest-8-9">9</td>
 499 </tr>
 500 </table>
 501
 502 -->
 503
 504 </body>
 505 </html>