| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <title>Test for font-display @font-face descriptor</title> | |
| 3 <style> | |
| 4 .hidden { display: none; } | |
| 5 </style> | |
| 6 <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> | |
| 7 <table id="container"> | |
| 8 <tr> | |
| 9 <th>T[sec]</th> | |
| 10 <th>delay[sec]</th> | |
| 11 <th>auto</th> | |
| 12 <th>block</th> | |
| 13 <th>swap</th> | |
| 14 <th>fallback</th> | |
| 15 <th>optional</th> | |
| 16 </tr> | |
| 17 </table> | |
| 18 <script> | |
| 19 if (window.testRunner) | |
| 20 testRunner.waitUntilDone(); | |
| 21 | |
| 22 var fontDisplayValues = ['auto', 'block', 'swap', 'fallback', 'optional']; | |
| 23 var configs = [{time: 0, delay: 1000}, | |
| 24 {time: 1000, delay: 0}, | |
| 25 {time: 1000, delay: 500}, | |
| 26 {time: 1000, delay: 3000}, | |
| 27 {time: 5000, delay: 2000}, | |
| 28 {time: 5000, delay: 4000}, | |
| 29 {time: 5000, delay: 8000}]; | |
| 30 | |
| 31 function makeFontFaceDeclaration(family, config, display) { | |
| 32 var url = '/resources/Ahem.ttf'; | |
| 33 if (config.delay > 0) | |
| 34 url = 'slow-ahem-loading.cgi?delay=' + config.delay + '&t=' + config.tim
e; | |
| 35 return '@font-face { font-family: ' + family + '; src: url(' + url + '); fon
t-display: ' + display + '; }'; | |
| 36 } | |
| 37 | |
| 38 | |
| 39 var maxTime = Math.max.apply(null, configs.map((config) => config.time)); | |
| 40 var table = document.getElementById('container'); | |
| 41 | |
| 42 window.onload = function() { | |
| 43 for (var config, i = 0; config = configs[i]; i++) { | |
| 44 var tr = document.createElement('tr'); | |
| 45 tr.classList.add('hidden'); | |
| 46 var td1 = document.createElement('td'); | |
| 47 td1.textContent = config.time / 1000; | |
| 48 tr.appendChild(td1); | |
| 49 var td2 = document.createElement('td'); | |
| 50 td2.textContent = config.delay / 1000; | |
| 51 tr.appendChild(td2); | |
| 52 | |
| 53 for (var display, j = 0; display = fontDisplayValues[j]; j++) { | |
| 54 var family = [display, config.time, config.delay].join('-'); | |
| 55 var rule = makeFontFaceDeclaration(family, config, display); | |
| 56 document.styleSheets[0].insertRule(rule, 0); | |
| 57 var td = document.createElement('td'); | |
| 58 td.textContent = 'a'; | |
| 59 td.style.fontFamily = family + ', Arial'; | |
| 60 tr.appendChild(td); | |
| 61 } | |
| 62 table.appendChild(tr); | |
| 63 if (config.time == 0) { | |
| 64 setTimeout((function(tr){ | |
| 65 tr.classList.remove('hidden'); | |
| 66 if (window.testRunner) | |
| 67 testRunner.notifyDone(); | |
| 68 }).bind(null, tr), maxTime); | |
| 69 } else { | |
| 70 setTimeout((function(tr){tr.classList.remove('hidden')}).bind(null,
tr), maxTime - config.time); | |
| 71 } | |
| 72 } | |
| 73 } | |
| 74 | |
| 75 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2895123002:
Convert CSS font-display test to wpt (Closed)
