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