Wed, 31 Dec 2014 06:55:50 +0100
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
michael@0 | 1 | <!DOCTYPE HTML> |
michael@0 | 2 | <html> |
michael@0 | 3 | <head> |
michael@0 | 4 | <title>Test for CSS EOF handling</title> |
michael@0 | 5 | <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> |
michael@0 | 6 | <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> |
michael@0 | 7 | </head> |
michael@0 | 8 | <body> |
michael@0 | 9 | <p><a target="_blank" |
michael@0 | 10 | href="https://bugzilla.mozilla.org/show_bug.cgi?id=311616">bug 311616</a>, |
michael@0 | 11 | <a target="_blank" |
michael@0 | 12 | href="https://bugzilla.mozilla.org/show_bug.cgi?id=325064">bug 325064</a></p> |
michael@0 | 13 | <iframe id="display"></iframe> |
michael@0 | 14 | <p id="log"></p> |
michael@0 | 15 | <pre id="test"> |
michael@0 | 16 | <script class="testbody" type="text/javascript"> |
michael@0 | 17 | const tests = [ |
michael@0 | 18 | { |
michael@0 | 19 | name: "basic rule", |
michael@0 | 20 | ref: "#r {background-color : orange}", |
michael@0 | 21 | tst: "#t {background-color : orange", |
michael@0 | 22 | prop: "background-color", pseudo: "" |
michael@0 | 23 | }, |
michael@0 | 24 | { |
michael@0 | 25 | name: "function", |
michael@0 | 26 | ref: "#r {background-color: rgb(0,255,0)}", |
michael@0 | 27 | tst: "#t {background-color: rgb(0,255,0", |
michael@0 | 28 | prop: "background-color", pseudo: "" |
michael@0 | 29 | }, |
michael@0 | 30 | { |
michael@0 | 31 | name: "comment", |
michael@0 | 32 | ref: "#r {background-color: aqua/*marine*/}", |
michael@0 | 33 | tst: "#t {background-color: aqua/*marine", |
michael@0 | 34 | prop: "background-color", pseudo: "" |
michael@0 | 35 | }, |
michael@0 | 36 | { |
michael@0 | 37 | name: "@media 1", |
michael@0 | 38 | ref: "@media all { #r { background-color: yellow } }", |
michael@0 | 39 | tst: "@media all { #t { background-color: yellow }", |
michael@0 | 40 | prop: "background-color", pseudo: "" |
michael@0 | 41 | }, |
michael@0 | 42 | { |
michael@0 | 43 | name: "@media 2", |
michael@0 | 44 | ref: "@media all { #r { background-color: magenta } }", |
michael@0 | 45 | tst: "@media all { #t { background-color: magenta", |
michael@0 | 46 | prop: "background-color", pseudo: "" |
michael@0 | 47 | }, |
michael@0 | 48 | { |
michael@0 | 49 | name: "@import 1", |
michael@0 | 50 | ref: "@import 'data:text/css,%23r%7Bbackground-color%3Agray%7D';", |
michael@0 | 51 | tst: "@import 'data:text/css,%23t%7Bbackground-color%3Agray%7D", |
michael@0 | 52 | prop: "background-color", pseudo: "" |
michael@0 | 53 | }, |
michael@0 | 54 | { |
michael@0 | 55 | name: "@import 2", |
michael@0 | 56 | ref: "@import 'data:text/css,%23r%7Bbackground-color%3Ablack%7D' all;", |
michael@0 | 57 | tst: "@import 'data:text/css,%23t%7Bbackground-color%3Ablack%7D' all", |
michael@0 | 58 | prop: "background-color", pseudo: "" |
michael@0 | 59 | }, |
michael@0 | 60 | { |
michael@0 | 61 | name: "url-token 1", |
michael@0 | 62 | ref: "#r { background-image: url(data:image/png;base64," + |
michael@0 | 63 | "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAADklEQVQI12NI" + |
michael@0 | 64 | "YJgAhAkAB4gB4Ry+pcoAAAAASUVORK5CYII=) }", |
michael@0 | 65 | tst: "#t { background-image: url(data:image/png;base64," + |
michael@0 | 66 | "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAADklEQVQI12NI" + |
michael@0 | 67 | "YJgAhAkAB4gB4Ry+pcoAAAAASUVORK5CYII=", |
michael@0 | 68 | prop: "background-image", pseudo: "" |
michael@0 | 69 | }, |
michael@0 | 70 | { |
michael@0 | 71 | name: "url-token 2", |
michael@0 | 72 | ref: "#r { background-image: url('data:image/png;base64," + |
michael@0 | 73 | "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAAEElEQVQI12Mo" + |
michael@0 | 74 | "YNjAcIHhAQAJ2ALR4kRk1gAAAABJRU5ErkJggg==') }", |
michael@0 | 75 | tst: "#t { background-image: url('data:image/png;base64," + |
michael@0 | 76 | "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAAEElEQVQI12Mo" + |
michael@0 | 77 | "YNjAcIHhAQAJ2ALR4kRk1gAAAABJRU5ErkJggg==", |
michael@0 | 78 | prop: "background-image", pseudo: "" |
michael@0 | 79 | }, |
michael@0 | 80 | { |
michael@0 | 81 | name: "url-token 3", |
michael@0 | 82 | ref: "#r { background-image: url('data:image/png;base64," + |
michael@0 | 83 | "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAAEElEQVQI12N4" + |
michael@0 | 84 | "wHCBYQNDAQAMuALRrGb97AAAAABJRU5ErkJggg==') }", |
michael@0 | 85 | tst: "#t { background-image: url('data:image/png;base64," + |
michael@0 | 86 | "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAAEElEQVQI12N4" + |
michael@0 | 87 | "wHCBYQNDAQAMuALRrGb97AAAAABJRU5ErkJggg=='", |
michael@0 | 88 | prop: "background-image", pseudo: "" |
michael@0 | 89 | }, |
michael@0 | 90 | { |
michael@0 | 91 | name: "counter", |
michael@0 | 92 | ref: "#r::before { content: counter(tr, upper-alpha) }", |
michael@0 | 93 | tst: "#t::before { content: counter(tr, upper-alpha", |
michael@0 | 94 | prop: "content", pseudo: "::before" |
michael@0 | 95 | }, |
michael@0 | 96 | { |
michael@0 | 97 | name: "string", |
michael@0 | 98 | ref: "#r::before { content: 'B' }", |
michael@0 | 99 | tst: "#t::before { content: 'B", |
michael@0 | 100 | prop: "content", pseudo: "::before" |
michael@0 | 101 | }, |
michael@0 | 102 | |
michael@0 | 103 | /* For these tests, there is no visible effect on computed style; |
michael@0 | 104 | instead we have to audit the DOM stylesheet object. */ |
michael@0 | 105 | |
michael@0 | 106 | { |
michael@0 | 107 | todo: 1, /* bug 446226 */ |
michael@0 | 108 | name: "selector 1", |
michael@0 | 109 | ref: "td[colspan='3'] {}", |
michael@0 | 110 | tst: "td[colspan='3" |
michael@0 | 111 | }, |
michael@0 | 112 | { |
michael@0 | 113 | todo: 1, /* bug 446226 */ |
michael@0 | 114 | name: "selector 2", |
michael@0 | 115 | ref: "td[colspan='3'] {}", |
michael@0 | 116 | tst: "td[colspan='3'" |
michael@0 | 117 | }, |
michael@0 | 118 | { |
michael@0 | 119 | todo: 1, /* bug 446226 */ |
michael@0 | 120 | name: "selector 3", |
michael@0 | 121 | ref: "td:lang(en) {}", |
michael@0 | 122 | tst: "td:lang(en" |
michael@0 | 123 | }, |
michael@0 | 124 | |
michael@0 | 125 | { |
michael@0 | 126 | name: "@charset 1", |
michael@0 | 127 | ref: "@charset 'utf-8';", |
michael@0 | 128 | tst: "@charset 'utf-8" |
michael@0 | 129 | }, |
michael@0 | 130 | { |
michael@0 | 131 | name: "@charset 2", |
michael@0 | 132 | ref: "@charset 'utf-8';", |
michael@0 | 133 | tst: "@charset 'utf-8'" |
michael@0 | 134 | }, |
michael@0 | 135 | { |
michael@0 | 136 | name: "@media 3", |
michael@0 | 137 | ref: "@media all {}", |
michael@0 | 138 | tst: "@media all {", |
michael@0 | 139 | }, |
michael@0 | 140 | { |
michael@0 | 141 | name: "@namespace 1a", |
michael@0 | 142 | ref: "@namespace foo url('http://foo.example.com/');", |
michael@0 | 143 | tst: "@namespace foo url('http://foo.example.com/')" |
michael@0 | 144 | }, |
michael@0 | 145 | { |
michael@0 | 146 | name: "@namespace 1b", |
michael@0 | 147 | ref: "@namespace foo url(http://foo.example.com/);", |
michael@0 | 148 | tst: "@namespace foo url(http://foo.example.com/" |
michael@0 | 149 | }, |
michael@0 | 150 | { |
michael@0 | 151 | name: "@namespace 1c", |
michael@0 | 152 | ref: "@namespace foo url('http://foo.example.com/');", |
michael@0 | 153 | tst: "@namespace foo url('http://foo.example.com/" |
michael@0 | 154 | }, |
michael@0 | 155 | { |
michael@0 | 156 | name: "@namespace 1d", |
michael@0 | 157 | ref: "@namespace foo 'http://foo.example.com/';", |
michael@0 | 158 | tst: "@namespace foo 'http://foo.example.com/'" |
michael@0 | 159 | }, |
michael@0 | 160 | { |
michael@0 | 161 | name: "@namespace 1e", |
michael@0 | 162 | ref: "@namespace foo 'http://foo.example.com/';", |
michael@0 | 163 | tst: "@namespace foo 'http://foo.example.com/" |
michael@0 | 164 | }, |
michael@0 | 165 | { |
michael@0 | 166 | name: "@namespace 2a", |
michael@0 | 167 | ref: "@namespace url('http://foo.example.com/');", |
michael@0 | 168 | tst: "@namespace url('http://foo.example.com/')" |
michael@0 | 169 | }, |
michael@0 | 170 | { |
michael@0 | 171 | name: "@namespace 2b", |
michael@0 | 172 | ref: "@namespace url('http://foo.example.com/');", |
michael@0 | 173 | tst: "@namespace url('http://foo.example.com/'" |
michael@0 | 174 | }, |
michael@0 | 175 | { |
michael@0 | 176 | name: "@namespace 2c", |
michael@0 | 177 | ref: "@namespace url('http://foo.example.com/');", |
michael@0 | 178 | tst: "@namespace url('http://foo.example.com/" |
michael@0 | 179 | }, |
michael@0 | 180 | { |
michael@0 | 181 | name: "@namespace 2d", |
michael@0 | 182 | ref: "@namespace 'http://foo.example.com/';", |
michael@0 | 183 | tst: "@namespace 'http://foo.example.com/'" |
michael@0 | 184 | }, |
michael@0 | 185 | { |
michael@0 | 186 | name: "@namespace 2e", |
michael@0 | 187 | ref: "@namespace 'http://foo.example.com/';", |
michael@0 | 188 | tst: "@namespace 'http://foo.example.com/" |
michael@0 | 189 | }, |
michael@0 | 190 | { |
michael@0 | 191 | name: "@-moz-document 1", |
michael@0 | 192 | ref: "@-moz-document domain('example.com') {}", |
michael@0 | 193 | tst: "@-moz-document domain('example.com') {" |
michael@0 | 194 | }, |
michael@0 | 195 | { |
michael@0 | 196 | name: "@-moz-document 2", |
michael@0 | 197 | ref: "@-moz-document domain('example.com') { p {} }", |
michael@0 | 198 | tst: "@-moz-document domain('example.com') { p {" |
michael@0 | 199 | } |
michael@0 | 200 | ]; |
michael@0 | 201 | |
michael@0 | 202 | const basestyle = ("table {\n"+ |
michael@0 | 203 | " border-collapse: collapse;\n"+ |
michael@0 | 204 | "}\n"+ |
michael@0 | 205 | "td {\n"+ |
michael@0 | 206 | " width: 1.5em;\n"+ |
michael@0 | 207 | " height: 1.5em;\n"+ |
michael@0 | 208 | " border: 1px solid black;\n"+ |
michael@0 | 209 | " text-align: center;\n"+ |
michael@0 | 210 | " margin: 0;\n"+ |
michael@0 | 211 | "}\n"+ |
michael@0 | 212 | "tr { counter-increment: tr }\n"); |
michael@0 | 213 | |
michael@0 | 214 | /* This is more complicated than it might look like it needs to be, |
michael@0 | 215 | because for each subtest we have to splat stuff into the iframe, |
michael@0 | 216 | allow the renderer to run, and only then interrogate the computed |
michael@0 | 217 | styles. */ |
michael@0 | 218 | |
michael@0 | 219 | SimpleTest.waitForExplicitFinish(); |
michael@0 | 220 | |
michael@0 | 221 | window.onload = function() { |
michael@0 | 222 | const frame = document.getElementById("display"); |
michael@0 | 223 | var curTest = 0; |
michael@0 | 224 | |
michael@0 | 225 | const prepareTest = function() { |
michael@0 | 226 | var cd = frame.contentDocument; |
michael@0 | 227 | cd.open(); |
michael@0 | 228 | cd.write('<!DOCTYPE HTML><html><head>' + |
michael@0 | 229 | '<style>\n' + basestyle + '</style>\n' + |
michael@0 | 230 | '<style>\n' + tests[curTest].ref + '</style>\n' + |
michael@0 | 231 | '<style>\n' + tests[curTest].tst + '</style>\n' + |
michael@0 | 232 | '</head><body>\n' + |
michael@0 | 233 | '<table><tr><td id="r"><td id="t"></table>' + |
michael@0 | 234 | '</body></html>'); |
michael@0 | 235 | cd.close(); |
michael@0 | 236 | }; |
michael@0 | 237 | |
michael@0 | 238 | const checkTest = function() { |
michael@0 | 239 | var cd = frame.contentDocument; |
michael@0 | 240 | var _is = tests[curTest].todo ? todo_is : is; |
michael@0 | 241 | var _ok = tests[curTest].todo ? todo : ok; |
michael@0 | 242 | |
michael@0 | 243 | if (cd.styleSheets[1].cssRules.length == 1 && |
michael@0 | 244 | cd.styleSheets[2].cssRules.length == 1) { |
michael@0 | 245 | // If we have a .prop for this test, the .cssText of the reference |
michael@0 | 246 | // and test rules will differ in the selector. Change #t to #r |
michael@0 | 247 | // in the test rule. |
michael@0 | 248 | var ref_canon = cd.styleSheets[1].cssRules[0].cssText; |
michael@0 | 249 | var tst_canon = cd.styleSheets[2].cssRules[0].cssText; |
michael@0 | 250 | tst_canon = tst_canon.replace(/(#|%23)t\b/, "$1r"); |
michael@0 | 251 | _is(tst_canon, ref_canon, |
michael@0 | 252 | tests[curTest].name + " (canonicalized rule)"); |
michael@0 | 253 | } else { |
michael@0 | 254 | _ok(false, tests[curTest].name + " (rule missing)"); |
michael@0 | 255 | } |
michael@0 | 256 | if (tests[curTest].prop) { |
michael@0 | 257 | var prop = tests[curTest].prop; |
michael@0 | 258 | var pseudo = tests[curTest].pseudo; |
michael@0 | 259 | |
michael@0 | 260 | var refElt = cd.getElementById("r"); |
michael@0 | 261 | var tstElt = cd.getElementById("t"); |
michael@0 | 262 | var refStyle = cd.defaultView.getComputedStyle(refElt, pseudo); |
michael@0 | 263 | var tstStyle = cd.defaultView.getComputedStyle(tstElt, pseudo); |
michael@0 | 264 | _is(tstStyle.getPropertyValue(prop), |
michael@0 | 265 | refStyle.getPropertyValue(prop), |
michael@0 | 266 | tests[curTest].name + " (computed style)"); |
michael@0 | 267 | } |
michael@0 | 268 | curTest++; |
michael@0 | 269 | if (curTest < tests.length) { |
michael@0 | 270 | prepareTest(); |
michael@0 | 271 | } else { |
michael@0 | 272 | SimpleTest.finish(); |
michael@0 | 273 | } |
michael@0 | 274 | }; |
michael@0 | 275 | |
michael@0 | 276 | frame.onload = function(){setTimeout(checkTest, 0);}; |
michael@0 | 277 | prepareTest(); |
michael@0 | 278 | }; |
michael@0 | 279 | </script> |
michael@0 | 280 | </pre> |
michael@0 | 281 | </body> |
michael@0 | 282 | </html> |