layout/style/test/test_css_eof_handling.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 <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>

mercurial