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
131
|
<!DOCTYPE HTML>
<html>
<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=879963 -->
<head>
<meta charset="utf-8">
<title>Test for bug 879963</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<!-- Two <style> elements with identical @font-face rules.
Although multiple @font-face at-rules for the same family are legal,
and add faces to the family, we should NOT download the same resource
twice just because we have a duplicate face entry. -->
<style type="text/css">
@font-face {
font-family: foo;
src: url("redundant_font_download.sjs?q=font");
}
.test {
font-family: foo;
}
</style>
<style type="text/css">
@font-face {
font-family: foo;
src: url("redundant_font_download.sjs?q=font");
}
.test {
font-family: foo;
}
</style>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=879963">Mozilla Bug 879963</a>
<div>
<!-- the 'init' request returns an image (just so we can see it's working)
and initializes the request logging in our sjs server -->
<img src="redundant_font_download.sjs?q=init">
</div>
<div id="test">
Test
</div>
<div>
<img id="image2" src="">
</div>
<script type="application/javascript">
// helper to retrieve the server's request log as text, synchronously
function getRequestLog() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "redundant_font_download.sjs?q=report", false);
xmlHttp.send(null);
return xmlHttp.responseText;
}
// retrieve just the most recent request the server has seen
function getLastRequest() {
return getRequestLog().split(";").pop();
}
// poll the server at intervals of animation frame callback until it has
// seen a specific request, or until maxTime ms have passed
function waitForRequest(request, maxTime, func) {
timeLimit = Date.now() + maxTime;
requestAnimationFrame(function rAF() {
var req = getLastRequest();
if (req == request || Date.now() > timeLimit) {
func();
return;
}
requestAnimationFrame(rAF);
});
}
// initially disable the second of the <style> elements,
// so we only have a single copy of the font-face
document.getElementsByTagName("style")[1].disabled = true;
SimpleTest.waitForExplicitFinish();
// We perform a series of actions that trigger requests to the .sjs server,
// and poll the server's request log at each stage to check that it has
// seen the request we expected before we proceed to the next step.
function startTest() {
is(getRequestLog(), "init", "request log has been initialized");
// this should trigger a font download
document.getElementById("test").className = "test";
// wait to confirm that the server has received the request
waitForRequest("font", 5000, continueTest1);
}
function continueTest1() {
is(getRequestLog(), "init;font", "server received font request");
// trigger a request for the second image, to provide an explicit
// delimiter in the log before we enable the second @font-face rule
document.getElementById("image2").src = "redundant_font_download.sjs?q=image";
waitForRequest("image", 5000, continueTest2);
}
function continueTest2() {
is(getRequestLog(), "init;font;image", "server received image request");
// enable the second <style> element: we should NOT see a second font request,
// we expect waitForRequest to time out instead
document.getElementsByTagName("style")[1].disabled = false;
waitForRequest("font", 1000, continueTest3);
}
function continueTest3() {
is(getRequestLog(), "init;font;image", "should NOT have re-requested the font");
SimpleTest.finish();
}
waitForRequest("init", 5000, startTest);
</script>
</body>
</html>
|
