stretchmapping-35-ref.html

mozilla-central/layout/reftests/font-matching/stretchmapping-35-ref.html

Enable keyboard shortcuts

Source code

File a bug in Core :: Layout: Text and Fonts

Revision control

Copy as Markdown

Other Tools

<!DOCTYPE HTML>

<html>

<head>

<title>font-stretch mapping tests</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

body {

  margin: 50px;

  font-family: Verdana, sans-serif;

h3, h4 { font-weight: normal; }

table {

  border-collapse: collapse;

  font-size: 28px;

td {

  padding: 0; margin: 0;

  font-family: test;

th {

  font-weight: inherit;

p { width: 300px; }

.red { color: red; }

thead { font-weight: 400; font-size: 75%; }

/* make all the spans blocks to avoid influence of what's outside them

   on line-height calculations */

span { display: block; }

@font-face {

  font-family: test;

  src: url(../fonts/mplus/mplus-1p-light.ttf);

  font-weight: 200;

@font-face {

  font-family: test;

  src: url(../fonts/mplus/mplus-1p-medium.ttf);

  font-weight: 500;

@font-face {

  font-family: test;

  src: url(../fonts/mplus/mplus-1p-thin.ttf);

  font-weight: 100;

  font-stretch: condensed;

@font-face {

  font-family: test;

  src: url(../fonts/mplus/mplus-1p-black.ttf);

  font-weight: 900;

  font-stretch: condensed;

@font-face {

  font-family: test100;

  src: url(../fonts/mplus/mplus-1p-thin.ttf);

  font-weight: 100;

@font-face {

  font-family: test200;

  src: url(../fonts/mplus/mplus-1p-light.ttf);

  font-weight: 200;

@font-face {

  font-family: test500;

  src: url(../fonts/mplus/mplus-1p-medium.ttf);

  font-weight: 500;

@font-face {

  font-family: test900;

  src: url(../fonts/mplus/mplus-1p-black.ttf);

  font-weight: 900;

.w1 { font-weight: 100; }

.w2 { font-weight: 200; }

.w3 { font-weight: 300; }

.w4 { font-weight: 400; }

.w5 { font-weight: 500; }

.w6 { font-weight: 600; }

.w7 { font-weight: 700; }

.w8 { font-weight: 800; }

.w9 { font-weight: 900; }

.w1 .fs1 { font-family: test100; }

.w2 .fs1 { font-family: test100; }

.w3 .fs1 { font-family: test100; }

.w4 .fs1 { font-family: test100; }

.w5 .fs1 { font-family: test100; }

.w6 .fs1 { font-family: test900; }

.w7 .fs1 { font-family: test900; }

.w8 .fs1 { font-family: test900; }

.w9 .fs1 { font-family: test900; }

.w1 .fs2 { font-family: test100; }

.w2 .fs2 { font-family: test100; }

.w3 .fs2 { font-family: test100; }

.w4 .fs2 { font-family: test100; }

.w5 .fs2 { font-family: test100; }

.w6 .fs2 { font-family: test900; }

.w7 .fs2 { font-family: test900; }

.w8 .fs2 { font-family: test900; }

.w9 .fs2 { font-family: test900; }

.w1 .fs3 { font-family: test100; }

.w2 .fs3 { font-family: test100; }

.w3 .fs3 { font-family: test100; }

.w4 .fs3 { font-family: test100; }

.w5 .fs3 { font-family: test100; }

.w6 .fs3 { font-family: test900; }

.w7 .fs3 { font-family: test900; }

.w8 .fs3 { font-family: test900; }

.w9 .fs3 { font-family: test900; }

.w1 .fs4 { font-family: test100; }

.w2 .fs4 { font-family: test100; }

.w3 .fs4 { font-family: test100; }

.w4 .fs4 { font-family: test100; }

.w5 .fs4 { font-family: test100; }

.w6 .fs4 { font-family: test900; }

.w7 .fs4 { font-family: test900; }

.w8 .fs4 { font-family: test900; }

.w9 .fs4 { font-family: test900; }

.w1 .fs5 { font-family: test200; }

.w2 .fs5 { font-family: test200; }

.w3 .fs5 { font-family: test200; }

.w4 .fs5 { font-family: test500; }

.w5 .fs5 { font-family: test500; }

.w6 .fs5 { font-family: test500; }

.w7 .fs5 { font-family: test500; }

.w8 .fs5 { font-family: test500; }

.w9 .fs5 { font-family: test500; }

.w1 .fs6 { font-family: test200; }

.w2 .fs6 { font-family: test200; }

.w3 .fs6 { font-family: test200; }

.w4 .fs6 { font-family: test500; }

.w5 .fs6 { font-family: test500; }

.w6 .fs6 { font-family: test500; }

.w7 .fs6 { font-family: test500; }

.w8 .fs6 { font-family: test500; }

.w9 .fs6 { font-family: test500; }

.w1 .fs7 { font-family: test200; }

.w2 .fs7 { font-family: test200; }

.w3 .fs7 { font-family: test200; }

.w4 .fs7 { font-family: test500; }

.w5 .fs7 { font-family: test500; }

.w6 .fs7 { font-family: test500; }

.w7 .fs7 { font-family: test500; }

.w8 .fs7 { font-family: test500; }

.w9 .fs7 { font-family: test500; }

.w1 .fs8 { font-family: test200; }

.w2 .fs8 { font-family: test200; }

.w3 .fs8 { font-family: test200; }

.w4 .fs8 { font-family: test500; }

.w5 .fs8 { font-family: test500; }

.w6 .fs8 { font-family: test500; }

.w7 .fs8 { font-family: test500; }

.w8 .fs8 { font-family: test500; }

.w9 .fs8 { font-family: test500; }

.w1 .fs9 { font-family: test200; }

.w2 .fs9 { font-family: test200; }

.w3 .fs9 { font-family: test200; }

.w4 .fs9 { font-family: test500; }

.w5 .fs9 { font-family: test500; }

.w6 .fs9 { font-family: test500; }

.w7 .fs9 { font-family: test500; }

.w8 .fs9 { font-family: test500; }

.w9 .fs9 { font-family: test500; }

</style>

</head>

<body>

<p>Font family with normal width 200, 500 and condensed 100, 900</p>

<table>

<thead>

<th></th>

<th>1</th>

<th>2</th>

<th class="red">3</th>

<th>4</th>

<th class="red">5</th>

<th>6</th>

<th>7</th>

<th>8</th>

<th>9</th>

</thead>

<tr class="w1">

<th>100</th>

<td class="fs1"><span>あ</span></td>

<td class="fs2"><span>あ</span></td>

<td class="fs3"><span>あ</span></td>

<td class="fs4"><span>あ</span></td>

<td class="fs5"><span>あ</span></td>

<td class="fs6"><span>あ</span></td>

<td class="fs7"><span>あ</span></td>

<td class="fs8"><span>あ</span></td>

<td class="fs9"><span>あ</span></td>

</tr>

<tr class="w2">

<th>200</th>

<td class="fs1"><span>あ</span></td>

<td class="fs2"><span>あ</span></td>

<td class="fs3"><span>あ</span></td>

<td class="fs4"><span>あ</span></td>

<td class="fs5"><span>あ</span></td>

<td class="fs6"><span>あ</span></td>

<td class="fs7"><span>あ</span></td>

<td class="fs8"><span>あ</span></td>

<td class="fs9"><span>あ</span></td>

</tr>

<tr class="w3">

<th>300</th>

<td class="fs1"><span>あ</span></td>

<td class="fs2"><span>あ</span></td>

<td class="fs3"><span>あ</span></td>

<td class="fs4"><span>あ</span></td>

<td class="fs5"><span>あ</span></td>

<td class="fs6"><span>あ</span></td>

<td class="fs7"><span>あ</span></td>

<td class="fs8"><span>あ</span></td>

<td class="fs9"><span>あ</span></td>

</tr>

<tr class="w4">

<th>400</th>

<td class="fs1"><span>あ</span></td>

<td class="fs2"><span>あ</span></td>

<td class="fs3"><span>あ</span></td>

<td class="fs4"><span>あ</span></td>

<td class="fs5"><span>あ</span></td>

<td class="fs6"><span>あ</span></td>

<td class="fs7"><span>あ</span></td>

<td class="fs8"><span>あ</span></td>

<td class="fs9"><span>あ</span></td>

</tr>

<tr class="w5">

<th>500</th>

<td class="fs1"><span>あ</span></td>

<td class="fs2"><span>あ</span></td>

<td class="fs3"><span>あ</span></td>

<td class="fs4"><span>あ</span></td>

<td class="fs5"><span>あ</span></td>

<td class="fs6"><span>あ</span></td>

<td class="fs7"><span>あ</span></td>

<td class="fs8"><span>あ</span></td>

<td class="fs9"><span>あ</span></td>

</tr>

<tr class="w6">

<th>600</th>

<td class="fs1"><span>あ</span></td>

<td class="fs2"><span>あ</span></td>

<td class="fs3"><span>あ</span></td>

<td class="fs4"><span>あ</span></td>

<td class="fs5"><span>あ</span></td>

<td class="fs6"><span>あ</span></td>

<td class="fs7"><span>あ</span></td>

<td class="fs8"><span>あ</span></td>

<td class="fs9"><span>あ</span></td>

</tr>

<tr class="w7">

<th>700</th>

<td class="fs1"><span>あ</span></td>

<td class="fs2"><span>あ</span></td>

<td class="fs3"><span>あ</span></td>

<td class="fs4"><span>あ</span></td>

<td class="fs5"><span>あ</span></td>

<td class="fs6"><span>あ</span></td>

<td class="fs7"><span>あ</span></td>

<td class="fs8"><span>あ</span></td>

<td class="fs9"><span>あ</span></td>

</tr>

<tr class="w8">

<th>800</th>

<td class="fs1"><span>あ</span></td>

<td class="fs2"><span>あ</span></td>

<td class="fs3"><span>あ</span></td>

<td class="fs4"><span>あ</span></td>

<td class="fs5"><span>あ</span></td>

<td class="fs6"><span>あ</span></td>

<td class="fs7"><span>あ</span></td>

<td class="fs8"><span>あ</span></td>

<td class="fs9"><span>あ</span></td>

</tr>

<tr class="w9">

<th>900</th>

<td class="fs1"><span>あ</span></td>

<td class="fs2"><span>あ</span></td>

<td class="fs3"><span>あ</span></td>

<td class="fs4"><span>あ</span></td>

<td class="fs5"><span>あ</span></td>

<td class="fs6"><span>あ</span></td>

<td class="fs7"><span>あ</span></td>

<td class="fs8"><span>あ</span></td>

<td class="fs9"><span>あ</span></td>

</tr>

</table>

</body>

</html>