| <!DOCTYPE html> |
| <title>Test for font-display @font-face descriptor</title> |
| <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>auto</th> |
| <th>block</th> |
| <th>swap</th> |
| <th>fallback</th> |
| <th>optional</th> |
| </tr> |
| </table> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| var fontDisplayValues = ['auto', '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) { |
| var url = '/resources/Ahem.ttf'; |
| if (config.delay > 0) |
| url = 'slow-ahem-loading.cgi?delay=' + config.delay + '&t=' + config.time; |
| 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'); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }).bind(null, tr), maxTime); |
| } else { |
| setTimeout((function(tr){tr.classList.remove('hidden')}).bind(null, tr), maxTime - config.time); |
| } |
| } |
| } |
| |
| </script> |
