-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Expand file tree
/
Copy pathfirst-available-font-005.html
More file actions
63 lines (57 loc) · 2.01 KB
/
first-available-font-005.html
File metadata and controls
63 lines (57 loc) · 2.01 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS fonts test: baseline position with explicit sizing, no space in first font</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
<link rel="help" href="https://drafts.csswg.org/css-fonts-3/#first-available-font">
<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#first-available-font">
<link rel="match" href="first-available-font-005-ref.html">
<meta name="assert" content="The position of the baseline in an inline-level box whose height is determined by a non-normal value of line-height
does depend on the primary font, which is the first that contains U+0020.">
<style>
@font-face {
font-family: 'A-no-space';
font-style: normal;
font-weight: 400;
src: url(/fonts/Revalia.woff) format('woff');
unicode-range: U+0061;
}
@font-face {
font-family: 'B-no-space';
font-style: normal;
font-weight: 400;
src: url(/fonts/AD.woff) format('woff');
unicode-range: U+0061;
}
@font-face {
font-family: 'B';
font-style: normal;
font-weight: 400;
src: url(/fonts/AD.woff) format('woff');
}
div {
position: absolute;
line-height: 100px;
font-size: 100px;
width: 300px; /* plenty of room for the (invisible) text */
text-align: right;
color: transparent;
outline: solid;
}
span { /* visible thing aligned to the baseline, and small enough to not influence its position */
display: inline-block;
width: 20px;
height: 20px;
}
/* white #a is on top of red #b,
The first font in their respective lists do no contain U+0020,
and therfore the first available font should be the next one, which is the same.
Since the baseline should be based on the primary font,
their baselines should line up and red #b should be invisible.*/
#a { font-family: A-no-space, B; }
#a span { background: red; }
#b { font-family: B-no-space, B; }
#b span { background: white; }
</style>
<p>Test passes if there is <strong>no red</strong> below.
<div id=a>bb<span></span></div>
<div id=b>bb<span></span></div>