third_party/WebKit/LayoutTests/http/tests/webfont/font-display.html - Issue 1429713004: Implement CSS font-display

Side by Side Diff: third_party/WebKit/LayoutTests/http/tests/webfont/font-display.html

Issue 1429713004: Implement CSS font-display (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 5 years, 1 month ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/http/tests/webfont/font-display-expected.html » ('j') | third_party/WebKit/Source/core/fetch/FontResource.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>
	Yoav Weiss 2015/10/30 17:22:30 It would have been great if this test could have b It would have been great if this test could have been testharness based (so exportable to other browsers and web-platform-tests). Also - as far as I understand, you're only testing the final state here, and not the transition times. Could you observe the font changes from JS snd test it that way?(e.g. using the font load API or something like https://github.com/bramstein/fontfaceobserver/blob/master/src/observer.js) On that note, maybe we need a first class "font loaded and applied" event (AFAIU, the font loading API's promises require you to load the font through the API as well). Kunihiko Sakamoto 2015/11/02 05:30:16 Ah sorry, I didn't write a high level description Show quoted text On 2015/10/30 17:22:30, Yoav Weiss wrote: > It would have been great if this test could have been testharness based (so > exportable to other browsers and web-platform-tests). > Also - as far as I understand, you're only testing the final state here, and not > the transition times. > > Could you observe the font changes from JS snd test it that way?(e.g. using the > font load API or something like > https://github.com/bramstein/fontfaceobserver/blob/master/src/observer.js) > > On that note, maybe we need a first class "font loaded and applied" event > (AFAIU, the font loading API's promises require you to load the font through the > API as well). Ah sorry, I didn't write a high level description for this test. This isn't testing only the final state. The meaning of test config is, delay: The time it takes to load the font time: Elapsed time since load start So, the row for {time: 1000, delay: 3000} tests how text with a font that takes 3 sec to load look like after 1 sec from the load start. (This is done by starting the load at T=4s, and taking snapshot for the reftest at T=5s.) Can we write a reftest in cross-browser way? I wanted this to be a test for actual rendering results, testharness isn't a great fit for this purpose.
	2 <style>

	3 .hidden { display: none; }

	4 </style>

	5 <table id="container">

	6 <tr>

	7 <th>T[sec]</th>

	8 <th>delay[sec]</th>

	9 <th>auto</th>

	10 <th>block</th>

	11 <th>swap</th>

	12 <th>fallback</th>

	13 <th>optional</th>

	14 </tr>

	15 </table>

	16 <script>

	17 if (window.testRunner)

	18 testRunner.waitUntilDone();

	19

	20 var fontDisplayValues = ['auto', 'block', 'swap', 'fallback', 'optional'];

	21 var configs = [{time: 0, delay: 1000},

	22 {time: 1000, delay: 0},

	23 {time: 1000, delay: 500},

	24 {time: 1000, delay: 3000},

	25 {time: 5000, delay: 2000},

	26 {time: 5000, delay: 4000},

	27 {time: 5000, delay: 8000}];

	28

	29 function makeFontFaceDeclaration(family, config, display) {

	30 var url = '/resources/Ahem.ttf';

	31 if (config.delay > 0)

	32 url = 'slow-ahem-loading.cgi?delay=' + config.delay + '&t=' + config.tim e;

	33 return '@font-face { font-family: ' + family + '; src: url(' + url + '); fon t-display: ' + display + '; }';

	34 }

	35

	36

	37 var maxTime = Math.max.apply(null, configs.map((config) => config.time));

	38 var table = document.getElementById('container');

	39

	40 for (var config of configs) {
	eae 2015/11/02 00:56:22 Don't use for in loops for arrays (as per js style Don't use for in loops for arrays (as per js style guide). for (var config, i = 0; config = configs[i]; i++) is better Kunihiko Sakamoto 2015/11/02 05:30:16 Done. Show quoted text On 2015/11/02 00:56:22, eae wrote: > Don't use for in loops for arrays (as per js style guide). > > for (var config, i = 0; config = configs[i]; i++) is better Done.
	41 var tr = document.createElement('tr');

	42 tr.classList.add('hidden');

	43 var td1 = document.createElement('td');

	44 td1.textContent = config.time / 1000;

	45 tr.appendChild(td1);

	46 var td2 = document.createElement('td');

	47 td2.textContent = config.delay / 1000;

	48 tr.appendChild(td2);

	49

	50 for (var display of fontDisplayValues) {

	51 var family = [display, config.time, config.delay].join('-');

	52 var rule = makeFontFaceDeclaration(family, config, display);

	53 document.styleSheets[0].insertRule(rule, 0);

	54 var td = document.createElement('td');

	55 td.textContent = 'a';

	56 td.style.fontFamily = family + ', Arial';

	57 tr.appendChild(td);

	58 }

	59 table.appendChild(tr);

	60 setTimeout((function(tr){tr.classList.remove('hidden')}).bind(null, tr), max Time - config.time);

	61 }

	62

	63 if (window.testRunner)

	64 setTimeout(function() { testRunner.notifyDone(); }, maxTime);

	65 </script>

OLD	NEW