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