1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_redundant_font_download.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,130 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=879963 -->
1.7 +<head>
1.8 + <meta charset="utf-8">
1.9 + <title>Test for bug 879963</title>
1.10 + <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.11 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
1.12 +</head>
1.13 +
1.14 +<body>
1.15 + <!-- Two <style> elements with identical @font-face rules.
1.16 + Although multiple @font-face at-rules for the same family are legal,
1.17 + and add faces to the family, we should NOT download the same resource
1.18 + twice just because we have a duplicate face entry. -->
1.19 + <style type="text/css">
1.20 + @font-face {
1.21 + font-family: foo;
1.22 + src: url("redundant_font_download.sjs?q=font");
1.23 + }
1.24 + .test {
1.25 + font-family: foo;
1.26 + }
1.27 + </style>
1.28 +
1.29 + <style type="text/css">
1.30 + @font-face {
1.31 + font-family: foo;
1.32 + src: url("redundant_font_download.sjs?q=font");
1.33 + }
1.34 + .test {
1.35 + font-family: foo;
1.36 + }
1.37 + </style>
1.38 +
1.39 + <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=879963">Mozilla Bug 879963</a>
1.40 +
1.41 + <div>
1.42 + <!-- the 'init' request returns an image (just so we can see it's working)
1.43 + and initializes the request logging in our sjs server -->
1.44 + <img src="redundant_font_download.sjs?q=init">
1.45 + </div>
1.46 +
1.47 + <div id="test">
1.48 + Test
1.49 + </div>
1.50 +
1.51 + <div>
1.52 + <img id="image2" src="">
1.53 + </div>
1.54 +
1.55 + <script type="application/javascript">
1.56 + // helper to retrieve the server's request log as text
1.57 + function getRequestLog() {
1.58 + var xmlHttp = new XMLHttpRequest();
1.59 + xmlHttp.open("GET", "redundant_font_download.sjs?q=report", false);
1.60 + xmlHttp.send(null);
1.61 + return xmlHttp.responseText;
1.62 + }
1.63 +
1.64 + // retrieve just the most recent request the server has seen
1.65 + function getLastRequest() {
1.66 + return getRequestLog().split(";").pop();
1.67 + }
1.68 +
1.69 + // poll the server at intervals of 'delay' ms until it has seen a specific request,
1.70 + // or until maxTime ms have passed
1.71 + function waitForRequest(request, delay, maxTime, func) {
1.72 + timeLimit = Date.now() + maxTime;
1.73 + var intervalId = window.setInterval(function() {
1.74 + var req = getLastRequest();
1.75 + if (req == request || Date.now() > timeLimit) {
1.76 + window.clearInterval(intervalId);
1.77 + func();
1.78 + }
1.79 + }.bind(this), delay);
1.80 + }
1.81 +
1.82 + // initially disable the second of the <style> elements,
1.83 + // so we only have a single copy of the font-face
1.84 + document.getElementsByTagName("style")[1].disabled = true;
1.85 +
1.86 + SimpleTest.waitForExplicitFinish();
1.87 +
1.88 + // We perform a series of actions that trigger requests to the .sjs server,
1.89 + // and poll the server's request log at each stage to check that it has
1.90 + // seen the request we expected before we proceed to the next step.
1.91 + function startTest() {
1.92 + is(getRequestLog(), "init", "request log has been initialized");
1.93 +
1.94 + // this should trigger a font download
1.95 + document.getElementById("test").className = "test";
1.96 +
1.97 + // wait to confirm that the server has received the request
1.98 + waitForRequest("font", 10, 5000, continueTest1);
1.99 + }
1.100 +
1.101 + function continueTest1() {
1.102 + is(getRequestLog(), "init;font", "server received font request");
1.103 +
1.104 + // trigger a request for the second image, to provide an explicit
1.105 + // delimiter in the log before we enable the second @font-face rule
1.106 + document.getElementById("image2").src = "redundant_font_download.sjs?q=image";
1.107 +
1.108 + waitForRequest("image", 10, 5000, continueTest2);
1.109 + }
1.110 +
1.111 + function continueTest2() {
1.112 + is(getRequestLog(), "init;font;image", "server received image request");
1.113 +
1.114 + // enable the second <style> element: we should NOT see a second font request,
1.115 + // we expect waitForRequest to time out instead
1.116 + document.getElementsByTagName("style")[1].disabled = false;
1.117 +
1.118 + waitForRequest("font", 10, 1000, continueTest3);
1.119 + }
1.120 +
1.121 + function continueTest3() {
1.122 + is(getRequestLog(), "init;font;image", "should NOT have re-requested the font");
1.123 +
1.124 + SimpleTest.finish();
1.125 + }
1.126 +
1.127 + waitForRequest("init", 10, 5000, startTest);
1.128 +
1.129 + </script>
1.130 +
1.131 +</body>
1.132 +
1.133 +</html>
