| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <title>Test for no-font-display-late-swap document policy behavior</title> |
| <link rel="help" href="https://github.com/w3c/webappsec-feature-policy/blob/master/policies/font-display-late-swap.md"> |
| <link rel="match" href="override-to-optional.tentative-ref.html"> |
| <style> |
| </style> |
| <p>Tests if font-display is set to optional for each option except for when it is set to fallback</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> |