-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathfirst-available-font-006.html
65 lines (59 loc) · 2.07 KB
/
first-available-font-006.html
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
64
65
<!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.
The fact that that font is used should make no difference.
*/
#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>aa<span></span></div>
<div id=b>aa<span></span></div>