font-display-change-ref.html (2006B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Updating font-display value while loading</title> 4 <script> 5 6 window.onload = () => { 7 const displayValues = [ 'auto', 'block', 'swap', 'fallback', 'optional' ]; 8 9 for (let value of displayValues) { 10 let face = new FontFace(value, 11 'url("/fonts/Ahem.ttf?pipe=trickle(d5)")', 12 {display: value}); 13 document.fonts.add(face); 14 face.load(); 15 } 16 17 setTimeout(() => { 18 document.documentElement.classList.remove("reftest-wait"); 19 }, 200); 20 }; 21 22 </script> 23 <table> 24 <tr> 25 <th>auto</th> 26 <th>block</th> 27 <th>swap</th> 28 <th>fallback</th> 29 <th>optional</th> 30 </tr> 31 <tr> 32 <td>from auto</td> 33 <td style="font-family: auto">a</td> 34 <td style="font-family: block">a</td> 35 <td style="font-family: swap">a</td> 36 <td style="font-family: fallback">a</td> 37 <td style="font-family: optional">a</td> 38 </tr> 39 <tr> 40 <td>from block</td> 41 <td style="font-family: auto">a</td> 42 <td style="font-family: block">a</td> 43 <td style="font-family: swap">a</td> 44 <td style="font-family: fallback">a</td> 45 <td style="font-family: optional">a</td> 46 </tr> 47 <tr> 48 <td>from swap</td> 49 <td style="font-family: auto">a</td> 50 <td style="font-family: block">a</td> 51 <td style="font-family: swap">a</td> 52 <td style="font-family: fallback">a</td> 53 <td style="font-family: optional">a</td> 54 </tr> 55 <tr> 56 <td>from fallback</td> 57 <td style="font-family: auto">a</td> 58 <td style="font-family: block">a</td> 59 <td style="font-family: swap">a</td> 60 <td style="font-family: fallback">a</td> 61 <td style="font-family: optional">a</td> 62 </tr> 63 <tr> 64 <td>from optional</td> 65 <td style="font-family: auto">a</td> 66 <td style="font-family: block">a</td> 67 <td style="font-family: swap">a</td> 68 <td style="font-family: fallback">a</td> 69 <td style="font-family: optional">a</td> 70 </tr> 71 </table> 72 </html>