| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <title>Test for font-display @font-face descriptor</title> |
| <meta name="timeout" content="long"> |
| <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-display-desc"> |
| <link rel="match" href="font-display-ref.html"> |
| <link rel="preload" href="/fonts/Ahem.ttf?pipe=trickle(d0)" as="font" crossorigin> |
| <style> |
| .hidden { display: none; } |
| </style> |
| <p>Tests how text with a font that takes <i>delay</i> seconds to load look like after <i>T</i> seconds from load start.</p> |
| <table id="container"> |
| <tr> |
| <th>T[sec]</th> |
| <th>delay[sec]</th> |
| <th>block</th> |
| <th>swap</th> |
| <th>fallback</th> |
| <th>optional</th> |
| </tr> |
| </table> |
| <script> |
| var fontDisplayValues = ['block', 'swap', 'fallback', 'optional']; |
| var configs = [{time: 0, delay: 1000}, |
| {time: 1000, delay: 0}, |
| {time: 1000, delay: 500}, |
| {time: 1000, delay: 3000}, |
| {time: 5000, delay: 2000}, |
| {time: 5000, delay: 4000}, |
| {time: 5000, delay: 8000}]; |
| |
| function makeFontFaceDeclaration(family, config, display) { |
| url = '/fonts/Ahem.ttf?pipe=trickle(d' + config.delay / 1000 + ')'; |
| return '@font-face { font-family: ' + family + '; src: url("' + url + '"); font-display: ' + display + '; }'; |
| } |
| |
| |
| var maxTime = Math.max.apply(null, configs.map((config) => config.time)); |
| var table = document.getElementById('container'); |
| |
| window.onload = function() { |
| for (var config, i = 0; config = configs[i]; i++) { |
| var tr = document.createElement('tr'); |
| tr.classList.add('hidden'); |
| var td1 = document.createElement('td'); |
| td1.textContent = config.time / 1000; |
| tr.appendChild(td1); |
| var td2 = document.createElement('td'); |
| td2.textContent = config.delay / 1000; |
| tr.appendChild(td2); |
| |
| for (var display, j = 0; display = fontDisplayValues[j]; j++) { |
| var family = [display, config.time, config.delay].join('-'); |
| var rule = makeFontFaceDeclaration(family, config, display); |
| document.styleSheets[0].insertRule(rule, 0); |
| var td = document.createElement('td'); |
| td.textContent = 'a'; |
| td.style.fontFamily = family + ', Arial'; |
| tr.appendChild(td); |
| } |
| table.appendChild(tr); |
| if (config.time == 0) { |
| setTimeout((function(tr){ |
| tr.classList.remove('hidden'); |
| document.documentElement.classList.remove("reftest-wait"); |
| }).bind(null, tr), maxTime); |
| } else { |
| setTimeout((function(tr){tr.classList.remove('hidden')}).bind(null, tr), maxTime - config.time); |
| } |
| } |
| } |
| |
| </script> |
| </html> |
