mirror of
https://github.com/servo/servo.git
synced 2025-06-06 16:45:39 +00:00
58d1969c5a
The test picks a font and makes a table asking for that font at every possible weight/stretch combination. One should expect the table entries to get bolder from right to left and wider from top to bottom.
85 lines
2.7 KiB
HTML
85 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- for testing font selection (based on font-stretch, font-weight, etc) -->
|
|
<style>
|
|
body {
|
|
font-size: 20pt;
|
|
font-family: "DejaVu Sans", "Helvetica Neue", sans;
|
|
}
|
|
table { border-collapse: collapse; }
|
|
td {
|
|
border: 1px solid #bbb;
|
|
padding: 2pt;
|
|
text-align: center;
|
|
}
|
|
td:nth-child(1) { font-weight: 100; }
|
|
td:nth-child(2) { font-weight: 200; }
|
|
td:nth-child(3) { font-weight: 300; }
|
|
td:nth-child(4) { font-weight: 400; }
|
|
td:nth-child(5) { font-weight: 500; }
|
|
td:nth-child(6) { font-weight: 600; }
|
|
td:nth-child(7) { font-weight: 700; }
|
|
td:nth-child(8) { font-weight: 800; }
|
|
td:nth-child(9) { font-weight: 900; }
|
|
.s1 { font-stretch: ultra-condensed; }
|
|
.s2 { font-stretch: extra-condensed; }
|
|
.s3 { font-stretch: semi-condensed; }
|
|
.s4 { font-stretch: condensed; }
|
|
.s5 { font-stretch: normal; }
|
|
.s6 { font-stretch: semi-expanded; }
|
|
.s7 { font-stretch: expanded; }
|
|
.s8 { font-stretch: extra-expanded; }
|
|
.s9 { font-stretch: ultra-expanded; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<table>
|
|
<tr class="s1">
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
</tr>
|
|
<tr class="s2">
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
</tr>
|
|
<tr class="s3">
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
</tr>
|
|
<tr class="s4">
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
</tr>
|
|
<tr class="s5">
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
</tr>
|
|
<tr class="s6">
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
</tr>
|
|
<tr class="s7">
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
</tr>
|
|
<tr class="s8">
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
</tr>
|
|
<tr class="s9">
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
<td>two words</td><td>two words</td><td>two words</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</htlm>
|