<!DOCTYPE html> <html class="reftest-wait"> <title>Test for font-display-late-swap feature policy behavior when set to report-only</title> <link rel="help" href="https://github.com/w3c/webappsec-feature-policy/blob/master/policies/font-display-late-swap.md"> <link rel="match" href="font-display-feature-policy-02.tentative-ref.html"> <style> </style> <p>None of the font-display values should be changed</p> <table id="container"> <tr> <th>not-set</th> <th>auto</th> <th>block</th> <th>swap</th> <th>fallback</th> <th>optional</th> </tr> </table> <script> const fontDisplayValues = ['', 'auto', 'block', 'swap', 'fallback', 'optional']; const table = document.getElementById('container'); function makeFontFaceDeclaration(family, display) { url = '/fonts/Ahem.ttf?pipe=trickle(d1)'; // Before the swap period is over return '@font-face { font-family: ' + family + '; src: url("' + url + '"); font-display: ' + display + '; }'; } window.onload = () => { let tr = document.createElement('tr'); for (let display of fontDisplayValues) { const family = display + '-face'; const rule = makeFontFaceDeclaration(family, display); document.styleSheets[0].insertRule(rule, 0); let td = document.createElement('td'); td.textContent = 'a'; td.style.fontFamily = family + ', Arial'; tr.appendChild(td); } table.appendChild(tr); const timeoutMilliSec = 1500; // After the font is loaded setTimeout(() => { document.documentElement.classList.remove("reftest-wait"); }, timeoutMilliSec); } </script> </html>