84 lines
2.6 KiB
HTML
84 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait">
|
|
<title>Updating font-display value while loading</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-display-desc">
|
|
<link rel="match" href="font-display-change-ref.html">
|
|
<script>
|
|
|
|
window.onload = () => {
|
|
const displayValues = [ 'auto', 'block', 'swap', 'fallback', 'optional' ];
|
|
|
|
let updateFuncs = [];
|
|
|
|
for (let initialValue of displayValues) {
|
|
for (let targetValue of displayValues) {
|
|
let face = new FontFace(initialValue + '-' + targetValue,
|
|
'url("/fonts/Ahem.ttf?pipe=trickle(d5)")',
|
|
{display: initialValue});
|
|
document.fonts.add(face);
|
|
face.load();
|
|
updateFuncs.push(() => {
|
|
face.display = targetValue;
|
|
});
|
|
}
|
|
}
|
|
|
|
setTimeout(() => {
|
|
for (let update of updateFuncs) {
|
|
update();
|
|
}
|
|
document.documentElement.classList.remove("reftest-wait");
|
|
}, 200);
|
|
};
|
|
|
|
</script>
|
|
<table>
|
|
<tr>
|
|
<th>auto</th>
|
|
<th>block</th>
|
|
<th>swap</th>
|
|
<th>fallback</th>
|
|
<th>optional</th>
|
|
</tr>
|
|
<tr>
|
|
<td>from auto</td>
|
|
<td style="font-family: auto-auto">a</td>
|
|
<td style="font-family: auto-block">a</td>
|
|
<td style="font-family: auto-swap">a</td>
|
|
<td style="font-family: auto-fallback">a</td>
|
|
<td style="font-family: auto-optional">a</td>
|
|
</tr>
|
|
<tr>
|
|
<td>from block</td>
|
|
<td style="font-family: block-auto">a</td>
|
|
<td style="font-family: block-block">a</td>
|
|
<td style="font-family: block-swap">a</td>
|
|
<td style="font-family: block-fallback">a</td>
|
|
<td style="font-family: block-optional">a</td>
|
|
</tr>
|
|
<tr>
|
|
<td>from swap</td>
|
|
<td style="font-family: swap-auto">a</td>
|
|
<td style="font-family: swap-block">a</td>
|
|
<td style="font-family: swap-swap">a</td>
|
|
<td style="font-family: swap-fallback">a</td>
|
|
<td style="font-family: swap-optional">a</td>
|
|
</tr>
|
|
<tr>
|
|
<td>from fallback</td>
|
|
<td style="font-family: fallback-auto">a</td>
|
|
<td style="font-family: fallback-block">a</td>
|
|
<td style="font-family: fallback-swap">a</td>
|
|
<td style="font-family: fallback-fallback">a</td>
|
|
<td style="font-family: fallback-optional">a</td>
|
|
</tr>
|
|
<tr>
|
|
<td>from optional</td>
|
|
<td style="font-family: optional-auto">a</td>
|
|
<td style="font-family: optional-block">a</td>
|
|
<td style="font-family: optional-swap">a</td>
|
|
<td style="font-family: optional-fallback">a</td>
|
|
<td style="font-family: optional-optional">a</td>
|
|
</tr>
|
|
</table>
|
|
</html>
|