layout/style/test/test_redundant_font_download.html@8bccb770b82d (annotated)
layout/style/test/test_redundant_font_download.html
Wed, 31 Dec 2014 13:27:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 13:27:57 +0100
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
- permissions
- -rw-r--r--
Ignore runtime configuration files generated during quality assurance.
| michael@0 | 1 | <!DOCTYPE HTML> |
| michael@0 | 2 | <html> |
| michael@0 | 3 | <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=879963 --> |
| michael@0 | 4 | <head> |
| michael@0 | 5 | <meta charset="utf-8"> |
| michael@0 | 6 | <title>Test for bug 879963</title> |
| michael@0 | 7 | <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> |
| michael@0 | 8 | <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> |
| michael@0 | 9 | </head> |
| michael@0 | 10 | |
| michael@0 | 11 | <body> |
| michael@0 | 12 | <!-- Two <style> elements with identical @font-face rules. |
| michael@0 | 13 | Although multiple @font-face at-rules for the same family are legal, |
| michael@0 | 14 | and add faces to the family, we should NOT download the same resource |
| michael@0 | 15 | twice just because we have a duplicate face entry. --> |
| michael@0 | 16 | <style type="text/css"> |
| michael@0 | 17 | @font-face { |
| michael@0 | 18 | font-family: foo; |
| michael@0 | 19 | src: url("redundant_font_download.sjs?q=font"); |
| michael@0 | 20 | } |
| michael@0 | 21 | .test { |
| michael@0 | 22 | font-family: foo; |
| michael@0 | 23 | } |
| michael@0 | 24 | </style> |
| michael@0 | 25 | |
| michael@0 | 26 | <style type="text/css"> |
| michael@0 | 27 | @font-face { |
| michael@0 | 28 | font-family: foo; |
| michael@0 | 29 | src: url("redundant_font_download.sjs?q=font"); |
| michael@0 | 30 | } |
| michael@0 | 31 | .test { |
| michael@0 | 32 | font-family: foo; |
| michael@0 | 33 | } |
| michael@0 | 34 | </style> |
| michael@0 | 35 | |
| michael@0 | 36 | <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=879963">Mozilla Bug 879963</a> |
| michael@0 | 37 | |
| michael@0 | 38 | <div> |
| michael@0 | 39 | <!-- the 'init' request returns an image (just so we can see it's working) |
| michael@0 | 40 | and initializes the request logging in our sjs server --> |
| michael@0 | 41 | <img src="redundant_font_download.sjs?q=init"> |
| michael@0 | 42 | </div> |
| michael@0 | 43 | |
| michael@0 | 44 | <div id="test"> |
| michael@0 | 45 | Test |
| michael@0 | 46 | </div> |
| michael@0 | 47 | |
| michael@0 | 48 | <div> |
| michael@0 | 49 | <img id="image2" src=""> |
| michael@0 | 50 | </div> |
| michael@0 | 51 | |
| michael@0 | 52 | <script type="application/javascript"> |
| michael@0 | 53 | // helper to retrieve the server's request log as text |
| michael@0 | 54 | function getRequestLog() { |
| michael@0 | 55 | var xmlHttp = new XMLHttpRequest(); |
| michael@0 | 56 | xmlHttp.open("GET", "redundant_font_download.sjs?q=report", false); |
| michael@0 | 57 | xmlHttp.send(null); |
| michael@0 | 58 | return xmlHttp.responseText; |
| michael@0 | 59 | } |
| michael@0 | 60 | |
| michael@0 | 61 | // retrieve just the most recent request the server has seen |
| michael@0 | 62 | function getLastRequest() { |
| michael@0 | 63 | return getRequestLog().split(";").pop(); |
| michael@0 | 64 | } |
| michael@0 | 65 | |
| michael@0 | 66 | // poll the server at intervals of 'delay' ms until it has seen a specific request, |
| michael@0 | 67 | // or until maxTime ms have passed |
| michael@0 | 68 | function waitForRequest(request, delay, maxTime, func) { |
| michael@0 | 69 | timeLimit = Date.now() + maxTime; |
| michael@0 | 70 | var intervalId = window.setInterval(function() { |
| michael@0 | 71 | var req = getLastRequest(); |
| michael@0 | 72 | if (req == request || Date.now() > timeLimit) { |
| michael@0 | 73 | window.clearInterval(intervalId); |
| michael@0 | 74 | func(); |
| michael@0 | 75 | } |
| michael@0 | 76 | }.bind(this), delay); |
| michael@0 | 77 | } |
| michael@0 | 78 | |
| michael@0 | 79 | // initially disable the second of the <style> elements, |
| michael@0 | 80 | // so we only have a single copy of the font-face |
| michael@0 | 81 | document.getElementsByTagName("style")[1].disabled = true; |
| michael@0 | 82 | |
| michael@0 | 83 | SimpleTest.waitForExplicitFinish(); |
| michael@0 | 84 | |
| michael@0 | 85 | // We perform a series of actions that trigger requests to the .sjs server, |
| michael@0 | 86 | // and poll the server's request log at each stage to check that it has |
| michael@0 | 87 | // seen the request we expected before we proceed to the next step. |
| michael@0 | 88 | function startTest() { |
| michael@0 | 89 | is(getRequestLog(), "init", "request log has been initialized"); |
| michael@0 | 90 | |
| michael@0 | 91 | // this should trigger a font download |
| michael@0 | 92 | document.getElementById("test").className = "test"; |
| michael@0 | 93 | |
| michael@0 | 94 | // wait to confirm that the server has received the request |
| michael@0 | 95 | waitForRequest("font", 10, 5000, continueTest1); |
| michael@0 | 96 | } |
| michael@0 | 97 | |
| michael@0 | 98 | function continueTest1() { |
| michael@0 | 99 | is(getRequestLog(), "init;font", "server received font request"); |
| michael@0 | 100 | |
| michael@0 | 101 | // trigger a request for the second image, to provide an explicit |
| michael@0 | 102 | // delimiter in the log before we enable the second @font-face rule |
| michael@0 | 103 | document.getElementById("image2").src = "redundant_font_download.sjs?q=image"; |
| michael@0 | 104 | |
| michael@0 | 105 | waitForRequest("image", 10, 5000, continueTest2); |
| michael@0 | 106 | } |
| michael@0 | 107 | |
| michael@0 | 108 | function continueTest2() { |
| michael@0 | 109 | is(getRequestLog(), "init;font;image", "server received image request"); |
| michael@0 | 110 | |
| michael@0 | 111 | // enable the second <style> element: we should NOT see a second font request, |
| michael@0 | 112 | // we expect waitForRequest to time out instead |
| michael@0 | 113 | document.getElementsByTagName("style")[1].disabled = false; |
| michael@0 | 114 | |
| michael@0 | 115 | waitForRequest("font", 10, 1000, continueTest3); |
| michael@0 | 116 | } |
| michael@0 | 117 | |
| michael@0 | 118 | function continueTest3() { |
| michael@0 | 119 | is(getRequestLog(), "init;font;image", "should NOT have re-requested the font"); |
| michael@0 | 120 | |
| michael@0 | 121 | SimpleTest.finish(); |
| michael@0 | 122 | } |
| michael@0 | 123 | |
| michael@0 | 124 | waitForRequest("init", 10, 5000, startTest); |
| michael@0 | 125 | |
| michael@0 | 126 | </script> |
| michael@0 | 127 | |
| michael@0 | 128 | </body> |
| michael@0 | 129 | |
| michael@0 | 130 | </html> |
