Update font selection algorithm to match latest CSS spec
[WebKit-https.git] / LayoutTests / fast / text / variations / font-selection-font-weight-expected.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 .namespace {
6     display: inline-block;
7     height: 48px;
8     width: 48px;
9     border: 0px;
10 }
11 #container {
12     line-height: 48px;
13 }
14 </style>
15 </head>
16 <body>
17 <p>This test makes sure that that font selection distance function is correctly honored when selecting for font-weight. The test passes if you only see black rectangles below.</p>
18
19
20 <div id="container">
21 <iframe class="namespace" srcdoc="<!DOCTYPE html>
22 <html>
23 <head>
24 <style>
25 .test {
26     font-synthesis: none;
27 }
28 @font-face {
29     font-family: 'WebFont';
30     src: local('Ahem');
31 }
32 </style>
33 </head>
34 <body style='margin: 0px;'>
35 <div class='test' style='font: 300 48px WebFont;'>A</div>
36 </body>
37 </html>"></iframe>
38
39
40 <iframe class="namespace" srcdoc="<!DOCTYPE html>
41 <html>
42 <head>
43 <style>
44 .test {
45     font-synthesis: none;
46 }
47 @font-face {
48     font-family: 'WebFont';
49     src: local('Ahem');
50 }
51 </style>
52 </head>
53 <body style='margin: 0px;'>
54 <div class='test' style='font: 300 48px WebFont;'>A</div>
55 </body>
56 </html>"></iframe>
57
58
59 <iframe class="namespace" srcdoc="<!DOCTYPE html>
60 <html>
61 <head>
62 <style>
63 .test {
64     font-synthesis: none;
65 }
66 @font-face {
67     font-family: 'WebFont';
68     src: local('Ahem');
69 }
70 </style>
71 </head>
72 <body style='margin: 0px;'>
73 <div class='test' style='font: 300 48px WebFont;'>A</div>
74 </body>
75 </html>"></iframe>
76
77
78 <iframe class="namespace" srcdoc="<!DOCTYPE html>
79 <html>
80 <head>
81 <style>
82 .test {
83     font-synthesis: none;
84 }
85 @font-face {
86     font-family: 'WebFont';
87     src: local('Ahem');
88 }
89 </style>
90 </head>
91 <body style='margin: 0px;'>
92 <div class='test' style='font: 400 48px WebFont;'>A</div>
93 </body>
94 </html>"></iframe>
95
96
97 <iframe class="namespace" srcdoc="<!DOCTYPE html>
98 <html>
99 <head>
100 <style>
101 .test {
102     font-synthesis: none;
103 }
104 @font-face {
105     font-family: 'WebFont';
106     src: local('Ahem');
107 }
108 </style>
109 </head>
110 <body style='margin: 0px;'>
111 <div class='test' style='font: 400 48px WebFont;'>A</div>
112 </body>
113 </html>"></iframe>
114
115
116 <iframe class="namespace" srcdoc="<!DOCTYPE html>
117 <html>
118 <head>
119 <style>
120 .test {
121     font-synthesis: none;
122 }
123 @font-face {
124     font-family: 'WebFont';
125     src: local('Ahem');
126 }
127 </style>
128 </head>
129 <body style='margin: 0px;'>
130 <div class='test' style='font: 400 48px WebFont;'>A</div>
131 </body>
132 </html>"></iframe>
133
134
135 <iframe class="namespace" srcdoc="<!DOCTYPE html>
136 <html>
137 <head>
138 <style>
139 .test {
140     font-synthesis: none;
141 }
142 @font-face {
143     font-family: 'WebFont';
144     src: local('Ahem');
145 }
146 </style>
147 </head>
148 <body style='margin: 0px;'>
149 <div class='test' style='font: 400 48px WebFont;'>A</div>
150 </body>
151 </html>"></iframe>
152
153
154 <iframe class="namespace" srcdoc="<!DOCTYPE html>
155 <html>
156 <head>
157 <style>
158 .test {
159     font-synthesis: none;
160 }
161 @font-face {
162     font-family: 'WebFont';
163     src: local('Ahem');
164 }
165 </style>
166 </head>
167 <body style='margin: 0px;'>
168 <div class='test' style='font: 400 48px WebFont;'>A</div>
169 </body>
170 </html>"></iframe>
171
172
173 <iframe class="namespace" srcdoc="<!DOCTYPE html>
174 <html>
175 <head>
176 <style>
177 .test {
178     font-synthesis: none;
179 }
180 @font-face {
181     font-family: 'WebFont';
182     src: local('Ahem');
183 }
184 </style>
185 </head>
186 <body style='margin: 0px;'>
187 <div class='test' style='font: 400 48px WebFont;'>A</div>
188 </body>
189 </html>"></iframe>
190
191
192 <iframe class="namespace" srcdoc="<!DOCTYPE html>
193 <html>
194 <head>
195 <style>
196 .test {
197     font-synthesis: none;
198 }
199 @font-face {
200     font-family: 'WebFont';
201     src: local('Ahem');
202 }
203 </style>
204 </head>
205 <body style='margin: 0px;'>
206 <div class='test' style='font: 450 48px WebFont;'>A</div>
207 </body>
208 </html>"></iframe>
209
210
211 <iframe class="namespace" srcdoc="<!DOCTYPE html>
212 <html>
213 <head>
214 <style>
215 .test {
216     font-synthesis: none;
217 }
218 @font-face {
219     font-family: 'WebFont';
220     src: local('Ahem');
221 }
222 </style>
223 </head>
224 <body style='margin: 0px;'>
225 <div class='test' style='font: 450 48px WebFont;'>A</div>
226 </body>
227 </html>"></iframe>
228
229
230 <iframe class="namespace" srcdoc="<!DOCTYPE html>
231 <html>
232 <head>
233 <style>
234 .test {
235     font-synthesis: none;
236 }
237 @font-face {
238     font-family: 'WebFont';
239     src: local('Ahem');
240 }
241 </style>
242 </head>
243 <body style='margin: 0px;'>
244 <div class='test' style='font: 450 48px WebFont;'>A</div>
245 </body>
246 </html>"></iframe>
247
248
249 <iframe class="namespace" srcdoc="<!DOCTYPE html>
250 <html>
251 <head>
252 <style>
253 .test {
254     font-synthesis: none;
255 }
256 @font-face {
257     font-family: 'WebFont';
258     src: local('Ahem');
259 }
260 </style>
261 </head>
262 <body style='margin: 0px;'>
263 <div class='test' style='font: 450 48px WebFont;'>A</div>
264 </body>
265 </html>"></iframe>
266
267
268 <iframe class="namespace" srcdoc="<!DOCTYPE html>
269 <html>
270 <head>
271 <style>
272 .test {
273     font-synthesis: none;
274 }
275 @font-face {
276     font-family: 'WebFont';
277     src: local('Ahem');
278 }
279 </style>
280 </head>
281 <body style='margin: 0px;'>
282 <div class='test' style='font: 450 48px WebFont;'>A</div>
283 </body>
284 </html>"></iframe>
285
286
287 <iframe class="namespace" srcdoc="<!DOCTYPE html>
288 <html>
289 <head>
290 <style>
291 .test {
292     font-synthesis: none;
293 }
294 @font-face {
295     font-family: 'WebFont';
296     src: local('Ahem');
297 }
298 </style>
299 </head>
300 <body style='margin: 0px;'>
301 <div class='test' style='font: 450 48px WebFont;'>A</div>
302 </body>
303 </html>"></iframe>
304
305
306 <iframe class="namespace" srcdoc="<!DOCTYPE html>
307 <html>
308 <head>
309 <style>
310 .test {
311     font-synthesis: none;
312 }
313 @font-face {
314     font-family: 'WebFont';
315     src: local('Ahem');
316 }
317 </style>
318 </head>
319 <body style='margin: 0px;'>
320 <div class='test' style='font: 500 48px WebFont;'>A</div>
321 </body>
322 </html>"></iframe>
323
324
325 <iframe class="namespace" srcdoc="<!DOCTYPE html>
326 <html>
327 <head>
328 <style>
329 .test {
330     font-synthesis: none;
331 }
332 @font-face {
333     font-family: 'WebFont';
334     src: local('Ahem');
335 }
336 </style>
337 </head>
338 <body style='margin: 0px;'>
339 <div class='test' style='font: 500 48px WebFont;'>A</div>
340 </body>
341 </html>"></iframe>
342
343
344 <iframe class="namespace" srcdoc="<!DOCTYPE html>
345 <html>
346 <head>
347 <style>
348 .test {
349     font-synthesis: none;
350 }
351 @font-face {
352     font-family: 'WebFont';
353     src: local('Ahem');
354 }
355 </style>
356 </head>
357 <body style='margin: 0px;'>
358 <div class='test' style='font: 500 48px WebFont;'>A</div>
359 </body>
360 </html>"></iframe>
361
362
363 <iframe class="namespace" srcdoc="<!DOCTYPE html>
364 <html>
365 <head>
366 <style>
367 .test {
368     font-synthesis: none;
369 }
370 @font-face {
371     font-family: 'WebFont';
372     src: local('Ahem');
373 }
374 </style>
375 </head>
376 <body style='margin: 0px;'>
377 <div class='test' style='font: 500 48px WebFont;'>A</div>
378 </body>
379 </html>"></iframe>
380
381
382 <iframe class="namespace" srcdoc="<!DOCTYPE html>
383 <html>
384 <head>
385 <style>
386 .test {
387     font-synthesis: none;
388 }
389 @font-face {
390     font-family: 'WebFont';
391     src: local('Ahem');
392 }
393 </style>
394 </head>
395 <body style='margin: 0px;'>
396 <div class='test' style='font: 500 48px WebFont;'>A</div>
397 </body>
398 </html>"></iframe>
399
400
401 <iframe class="namespace" srcdoc="<!DOCTYPE html>
402 <html>
403 <head>
404 <style>
405 .test {
406     font-synthesis: none;
407 }
408 @font-face {
409     font-family: 'WebFont';
410     src: local('Ahem');
411 }
412 </style>
413 </head>
414 <body style='margin: 0px;'>
415 <div class='test' style='font: 500 48px WebFont;'>A</div>
416 </body>
417 </html>"></iframe>
418
419
420 <iframe class="namespace" srcdoc="<!DOCTYPE html>
421 <html>
422 <head>
423 <style>
424 .test {
425     font-synthesis: none;
426 }
427 @font-face {
428     font-family: 'WebFont';
429     src: local('Ahem');
430 }
431 </style>
432 </head>
433 <body style='margin: 0px;'>
434 <div class='test' style='font: 600 48px WebFont;'>A</div>
435 </body>
436 </html>"></iframe>
437
438
439 <iframe class="namespace" srcdoc="<!DOCTYPE html>
440 <html>
441 <head>
442 <style>
443 .test {
444     font-synthesis: none;
445 }
446 @font-face {
447     font-family: 'WebFont';
448     src: local('Ahem');
449 }
450 </style>
451 </head>
452 <body style='margin: 0px;'>
453 <div class='test' style='font: 600 48px WebFont;'>A</div>
454 </body>
455 </html>"></iframe>
456
457
458 <iframe class="namespace" srcdoc="<!DOCTYPE html>
459 <html>
460 <head>
461 <style>
462 .test {
463     font-synthesis: none;
464 }
465 @font-face {
466     font-family: 'WebFont';
467     src: local('Ahem');
468 }
469 </style>
470 </head>
471 <body style='margin: 0px;'>
472 <div class='test' style='font: 600 48px WebFont;'>A</div>
473 </body>
474 </html>"></iframe>
475
476
477 <iframe class="namespace" srcdoc="<!DOCTYPE html>
478 <html>
479 <head>
480 <style>
481 .test {
482     font-synthesis: none;
483 }
484 @font-face {
485     font-family: 'WebFont';
486     src: local('Ahem');
487 }
488 </style>
489 </head>
490 <body style='margin: 0px;'>
491 <div class='test' style='font: 600 48px WebFont;'>A</div>
492 </body>
493 </html>"></iframe>
494
495
496 <iframe class="namespace" srcdoc="<!DOCTYPE html>
497 <html>
498 <head>
499 <style>
500 .test {
501     font-synthesis: none;
502 }
503 @font-face {
504     font-family: 'WebFont';
505     src: local('Ahem');
506 }
507 </style>
508 </head>
509 <body style='margin: 0px;'>
510 <div class='test' style='font: 600 48px WebFont;'>A</div>
511 </body>
512 </html>"></iframe>
513
514
515 <iframe class="namespace" srcdoc="<!DOCTYPE html>
516 <html>
517 <head>
518 <style>
519 .test {
520     font-synthesis: none;
521 }
522 @font-face {
523     font-family: 'WebFont';
524     src: local('Ahem');
525 }
526 </style>
527 </head>
528 <body style='margin: 0px;'>
529 <div class='test' style='font: 600 48px WebFont;'>A</div>
530 </body>
531 </html>"></iframe>
532
533
534 <iframe class="namespace" srcdoc="<!DOCTYPE html>
535 <html>
536 <head>
537 <style>
538 .test {
539     font-synthesis: none;
540 }
541 @font-face {
542     font-family: 'WebFont';
543     src: local('Ahem');
544 }
545 </style>
546 </head>
547 <body style='margin: 0px;'>
548 <div class='test' style='font: 600 48px WebFont;'>A</div>
549 </body>
550 </html>"></iframe>
551
552 </div>
553 </body>
554 <html>