| 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 for (var config, i = 0; config = configs[i]; i++) { |
| 43 var tr = document.createElement('tr'); |
| 44 tr.classList.add('hidden'); |
| 45 var td1 = document.createElement('td'); |
| 46 td1.textContent = config.time / 1000; |
| 47 tr.appendChild(td1); |
| 48 var td2 = document.createElement('td'); |
| 49 td2.textContent = config.delay / 1000; |
| 50 tr.appendChild(td2); |
| 51 |
| 52 for (var display, j = 0; display = fontDisplayValues[j]; j++) { |
| 53 var family = [display, config.time, config.delay].join('-'); |
| 54 var rule = makeFontFaceDeclaration(family, config, display); |
| 55 document.styleSheets[0].insertRule(rule, 0); |
| 56 var td = document.createElement('td'); |
| 57 td.textContent = 'a'; |
| 58 td.style.fontFamily = family + ', Arial'; |
| 59 tr.appendChild(td); |
| 60 } |
| 61 table.appendChild(tr); |
| 62 setTimeout((function(tr){tr.classList.remove('hidden')}).bind(null, tr), max
Time - config.time); |
| 63 } |
| 64 |
| 65 if (window.testRunner) |
| 66 setTimeout(function() { testRunner.notifyDone(); }, maxTime); |
| 67 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1429713004:
Implement CSS font-display (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master