<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>
<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>
Messung V0.5
¤ Dauer der Verarbeitung: 0.23 Sekunden
(vorverarbeitet)
¤
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.
