| <!DOCTYPE html> | |
| <title>Test for font-display @font-face descriptor</title> | |
| <style> | |
| .ahem { | |
| font-family: Ahem; | |
| } | |
| .arial { | |
| font-family: Arial; | |
| } | |
| </style> | |
| <p>Tests how text with a font that takes <i>delay</i> seconds to load look like after <i>T</i> seconds from load start.</p> | |
| <table> | |
| <tr> | |
| <th>T[sec]</th> | |
| <th>delay[sec]</th> | |
| <th>auto</th> | |
| <th>block</th> | |
| <th>swap</th> | |
| <th>fallback</th> | |
| <th>optional</th> | |
| </tr> | |
| <tr> | |
| <td>0</td> | |
| <td>1</td> | |
| <td></td> | |
| <td></td> | |
| <td class="arial">a</td> | |
| <td></td> | |
| <td></td> | |
| </tr> | |
| <tr> | |
| <td>1</td> | |
| <td>0</td> | |
| <td class="ahem">a</td> | |
| <td class="ahem">a</td> | |
| <td class="ahem">a</td> | |
| <td class="ahem">a</td> | |
| <td class="ahem">a</td> | |
| </tr> | |
| <tr> | |
| <td>1</td> | |
| <td>0.5</td> | |
| <td class="ahem">a</td> | |
| <td class="ahem">a</td> | |
| <td class="ahem">a</td> | |
| <td class="ahem">a</td> | |
| <td class="arial">a</td> | |
| </tr> | |
| <tr> | |
| <td>1</td> | |
| <td>3</td> | |
| <td></td> | |
| <td></td> | |
| <td class="arial">a</td> | |
| <td class="arial">a</td> | |
| <td class="arial">a</td> | |
| </tr> | |
| <tr> | |
| <td>5</td> | |
| <td>2</td> | |
| <td class="ahem">a</td> | |
| <td class="ahem">a</td> | |
| <td class="ahem">a</td> | |
| <td class="ahem">a</td> | |
| <td class="arial">a</td> | |
| </tr> | |
| <tr> | |
| <td>5</td> | |
| <td>4</td> | |
| <td class="ahem">a</td> | |
| <td class="ahem">a</td> | |
| <td class="ahem">a</td> | |
| <td class="arial">a</td> | |
| <td class="arial">a</td> | |
| </tr> | |
| <tr> | |
| <td>5</td> | |
| <td>8</td> | |
| <td class="arial">a</td> | |
| <td class="arial">a</td> | |
| <td class="arial">a</td> | |
| <td class="arial">a</td> | |
| <td class="arial">a</td> | |
| </tr> | |
| </table> |