| <!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> |
