/
events-variations.html
130 lines (126 loc) · 4.38 KB
/
events-variations.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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!doctype html>
<html>
<head>
<script type="text/javascript" src="/webfont.js"></script>
<script type="text/javascript">
function progress(message) {
var output = document.getElementById('events');
if (output) {
var e = document.createElement('li');
e.innerHTML = message;
output.appendChild(e);
}
if (window.console && window.console.log) {
window.console.log(message);
}
}
WebFont.load({
google: {
families: ['Droid Serif:r,i,b,bi']
},
loading: function() {
progress('loading');
},
active: function() {
progress('active');
},
inactive: function() {
progress('inactive');
},
fontloading: function(fontFamily, fontDescription) {
progress('fontloading: ' + fontFamily + ' (' + fontDescription + ')');
},
fontactive: function(fontFamily, fontDescription) {
progress('fontactive: ' + fontFamily + ' (' + fontDescription + ')');
},
fontinactive: function(fontFamily, fontDescription) {
progress('fontinactive: ' + fontFamily + ' (' + fontDescription + ')');
}
});
</script>
<style type="text/css">
.droid p {
font-family: 'Droid Serif';
font-size: 2em;
margin-bottom: 0;
visibility: hidden;
}
.wf-droidserif-n4-active #droidregular {
visibility: visible;
}
.wf-droidserif-i4-active #droiditalic {
visibility: visible;
}
.wf-droidserif-n7-active #droidbold {
visibility: visible;
}
.wf-droidserif-i7-active #droidbolditalic {
visibility: visible;
}
/* All Class hooks */
#classes { color: #ddd; }
html.wf-loading #classes .Loading,
html.wf-active #classes .Active,
html.wf-inactive #classes .Inactive,
html.wf-droidserif-n4-loading #classes #DroidSerifRegularLoading,
html.wf-droidserif-n4-active #classes #DroidSerifRegularActive,
html.wf-droidserif-n4-inactive #classes #DroidSerifRegularInactive,
html.wf-droidserif-i4-loading #classes #DroidSerifItalicLoading,
html.wf-droidserif-i4-active #classes #DroidSerifItalicActive,
html.wf-droidserif-i4-inactive #classes #DroidSerifItalicInactive,
html.wf-droidserif-n7-loading #classes #DroidSerifBoldLoading,
html.wf-droidserif-n7-active #classes #DroidSerifBoldActive,
html.wf-droidserif-n7-inactive #classes #DroidSerifBoldInactive,
html.wf-droidserif-i7-loading #classes #DroidSerifBoldItalicLoading,
html.wf-droidserif-i7-active #classes #DroidSerifBoldItalicActive,
html.wf-droidserif-i7-inactive #classes #DroidSerifBoldItalicInactive {
color: #000;
}
</style>
</head>
<body>
<div class="droid">
<p id="droidregular">
Droid Serif Regular
</p>
<p id="droiditalic">
<em>Droid Serif Italic</em>
</p>
<p id="droidbold">
<strong>Droid Serif Bold</strong>
</p>
<p id="droidbolditalic">
<strong><em>Droid Serif Bold Italic</em></strong>
</p>
</div>
<hr>
<p>
<a href="#" onclick="document.getElementsByTagName('body')[0].style.color = '#fff';return false;">Hide Page</a> |
<a href="/events-variations.html">Reload Cached</a>
</p>
<p>
The goal of this page is to show all of the font loading event callbacks when using
multiple weights and styles of one typeface.
</p>
<h2>CSS Hook Status</h2>
<ul id="classes">
<li class="Loading">Loading</li>
<li class="Active">Active</li>
<li class="Inactive">Inactive</li>
<li id="DroidSerifRegularLoading">Droid Serif Regular Loading</li>
<li id="DroidSerifRegularActive">Droid Serif Regular Active</li>
<li id="DroidSerifRegularInactive">Droid Serif Regular Inactive</li>
<li id="DroidSerifItalicLoading">Droid Serif Italic Loading</li>
<li id="DroidSerifItalicActive">Droid Serif Italic Active</li>
<li id="DroidSerifItalicInactive">Droid Serif Italic Inactive</li>
<li id="DroidSerifBoldLoading">Droid Serif Bold Loading</li>
<li id="DroidSerifBoldActive">Droid Serif Bold Active</li>
<li id="DroidSerifBoldInactive">Droid Serif Bold Inactive</li>
<li id="DroidSerifBoldItalicLoading">Droid Serif Bold Italic Loading</li>
<li id="DroidSerifBoldItalicActive">Droid Serif Bold Italic Active</li>
<li id="DroidSerifBoldItalicInactive">Droid Serif Bold Italic Inactive</li>
</ul>
<h2>JavaScript Event Progress</h2>
<ol id="events"></ol>
</body>
</html>