font-display-feature-policy-02.tentative.html (1609B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Test for font-display-late-swap feature policy behavior when set to report-only</title> 4 <link rel="help" href="https://github.com/w3c/webappsec-feature-policy/blob/master/policies/font-display-late-swap.md"> 5 <link rel="match" href="font-display-feature-policy-02.tentative-ref.html"> 6 <style> 7 </style> 8 <p>None of the font-display values should be changed</p> 9 <table id="container"> 10 <tr> 11 <th>not-set</th> 12 <th>auto</th> 13 <th>block</th> 14 <th>swap</th> 15 <th>fallback</th> 16 <th>optional</th> 17 </tr> 18 </table> 19 <script> 20 const fontDisplayValues = ['', 'auto', 'block', 'swap', 'fallback', 'optional']; 21 const table = document.getElementById('container'); 22 23 function makeFontFaceDeclaration(family, display) { 24 url = '/fonts/Ahem.ttf?pipe=trickle(d1)'; // Before the swap period is over 25 return '@font-face { font-family: ' + family + '; src: url("' + url + '"); font-display: ' + display + '; }'; 26 } 27 28 window.onload = () => { 29 let tr = document.createElement('tr'); 30 for (let display of fontDisplayValues) { 31 const family = display + '-face'; 32 const rule = makeFontFaceDeclaration(family, display); 33 document.styleSheets[0].insertRule(rule, 0); 34 let td = document.createElement('td'); 35 td.textContent = 'a'; 36 td.style.fontFamily = family + ', Arial'; 37 tr.appendChild(td); 38 } 39 table.appendChild(tr); 40 const timeoutMilliSec = 1500; // After the font is loaded 41 setTimeout(() => { 42 document.documentElement.classList.remove("reftest-wait"); 43 }, timeoutMilliSec); 44 } 45 </script> 46 </html>