1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_css_eof_handling.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,282 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<head>
1.7 + <title>Test for CSS EOF handling</title>
1.8 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.9 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.10 +</head>
1.11 +<body>
1.12 +<p><a target="_blank"
1.13 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=311616">bug 311616</a>,
1.14 +<a target="_blank"
1.15 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=325064">bug 325064</a></p>
1.16 +<iframe id="display"></iframe>
1.17 +<p id="log"></p>
1.18 +<pre id="test">
1.19 +<script class="testbody" type="text/javascript">
1.20 +const tests = [
1.21 + {
1.22 + name: "basic rule",
1.23 + ref: "#r {background-color : orange}",
1.24 + tst: "#t {background-color : orange",
1.25 + prop: "background-color", pseudo: ""
1.26 + },
1.27 + {
1.28 + name: "function",
1.29 + ref: "#r {background-color: rgb(0,255,0)}",
1.30 + tst: "#t {background-color: rgb(0,255,0",
1.31 + prop: "background-color", pseudo: ""
1.32 + },
1.33 + {
1.34 + name: "comment",
1.35 + ref: "#r {background-color: aqua/*marine*/}",
1.36 + tst: "#t {background-color: aqua/*marine",
1.37 + prop: "background-color", pseudo: ""
1.38 + },
1.39 + {
1.40 + name: "@media 1",
1.41 + ref: "@media all { #r { background-color: yellow } }",
1.42 + tst: "@media all { #t { background-color: yellow }",
1.43 + prop: "background-color", pseudo: ""
1.44 + },
1.45 + {
1.46 + name: "@media 2",
1.47 + ref: "@media all { #r { background-color: magenta } }",
1.48 + tst: "@media all { #t { background-color: magenta",
1.49 + prop: "background-color", pseudo: ""
1.50 + },
1.51 + {
1.52 + name: "@import 1",
1.53 + ref: "@import 'data:text/css,%23r%7Bbackground-color%3Agray%7D';",
1.54 + tst: "@import 'data:text/css,%23t%7Bbackground-color%3Agray%7D",
1.55 + prop: "background-color", pseudo: ""
1.56 + },
1.57 + {
1.58 + name: "@import 2",
1.59 + ref: "@import 'data:text/css,%23r%7Bbackground-color%3Ablack%7D' all;",
1.60 + tst: "@import 'data:text/css,%23t%7Bbackground-color%3Ablack%7D' all",
1.61 + prop: "background-color", pseudo: ""
1.62 + },
1.63 + {
1.64 + name: "url-token 1",
1.65 + ref: "#r { background-image: url(data:image/png;base64," +
1.66 + "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAADklEQVQI12NI" +
1.67 + "YJgAhAkAB4gB4Ry+pcoAAAAASUVORK5CYII=) }",
1.68 + tst: "#t { background-image: url(data:image/png;base64," +
1.69 + "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAADklEQVQI12NI" +
1.70 + "YJgAhAkAB4gB4Ry+pcoAAAAASUVORK5CYII=",
1.71 + prop: "background-image", pseudo: ""
1.72 + },
1.73 + {
1.74 + name: "url-token 2",
1.75 + ref: "#r { background-image: url('data:image/png;base64," +
1.76 + "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAAEElEQVQI12Mo" +
1.77 + "YNjAcIHhAQAJ2ALR4kRk1gAAAABJRU5ErkJggg==') }",
1.78 + tst: "#t { background-image: url('data:image/png;base64," +
1.79 + "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAAEElEQVQI12Mo" +
1.80 + "YNjAcIHhAQAJ2ALR4kRk1gAAAABJRU5ErkJggg==",
1.81 + prop: "background-image", pseudo: ""
1.82 + },
1.83 + {
1.84 + name: "url-token 3",
1.85 + ref: "#r { background-image: url('data:image/png;base64," +
1.86 + "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAAEElEQVQI12N4" +
1.87 + "wHCBYQNDAQAMuALRrGb97AAAAABJRU5ErkJggg==') }",
1.88 + tst: "#t { background-image: url('data:image/png;base64," +
1.89 + "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQAAAACBiqPTAAAAEElEQVQI12N4" +
1.90 + "wHCBYQNDAQAMuALRrGb97AAAAABJRU5ErkJggg=='",
1.91 + prop: "background-image", pseudo: ""
1.92 + },
1.93 + {
1.94 + name: "counter",
1.95 + ref: "#r::before { content: counter(tr, upper-alpha) }",
1.96 + tst: "#t::before { content: counter(tr, upper-alpha",
1.97 + prop: "content", pseudo: "::before"
1.98 + },
1.99 + {
1.100 + name: "string",
1.101 + ref: "#r::before { content: 'B' }",
1.102 + tst: "#t::before { content: 'B",
1.103 + prop: "content", pseudo: "::before"
1.104 + },
1.105 +
1.106 + /* For these tests, there is no visible effect on computed style;
1.107 + instead we have to audit the DOM stylesheet object. */
1.108 +
1.109 + {
1.110 + todo: 1, /* bug 446226 */
1.111 + name: "selector 1",
1.112 + ref: "td[colspan='3'] {}",
1.113 + tst: "td[colspan='3"
1.114 + },
1.115 + {
1.116 + todo: 1, /* bug 446226 */
1.117 + name: "selector 2",
1.118 + ref: "td[colspan='3'] {}",
1.119 + tst: "td[colspan='3'"
1.120 + },
1.121 + {
1.122 + todo: 1, /* bug 446226 */
1.123 + name: "selector 3",
1.124 + ref: "td:lang(en) {}",
1.125 + tst: "td:lang(en"
1.126 + },
1.127 +
1.128 + {
1.129 + name: "@charset 1",
1.130 + ref: "@charset 'utf-8';",
1.131 + tst: "@charset 'utf-8"
1.132 + },
1.133 + {
1.134 + name: "@charset 2",
1.135 + ref: "@charset 'utf-8';",
1.136 + tst: "@charset 'utf-8'"
1.137 + },
1.138 + {
1.139 + name: "@media 3",
1.140 + ref: "@media all {}",
1.141 + tst: "@media all {",
1.142 + },
1.143 + {
1.144 + name: "@namespace 1a",
1.145 + ref: "@namespace foo url('http://foo.example.com/');",
1.146 + tst: "@namespace foo url('http://foo.example.com/')"
1.147 + },
1.148 + {
1.149 + name: "@namespace 1b",
1.150 + ref: "@namespace foo url(http://foo.example.com/);",
1.151 + tst: "@namespace foo url(http://foo.example.com/"
1.152 + },
1.153 + {
1.154 + name: "@namespace 1c",
1.155 + ref: "@namespace foo url('http://foo.example.com/');",
1.156 + tst: "@namespace foo url('http://foo.example.com/"
1.157 + },
1.158 + {
1.159 + name: "@namespace 1d",
1.160 + ref: "@namespace foo 'http://foo.example.com/';",
1.161 + tst: "@namespace foo 'http://foo.example.com/'"
1.162 + },
1.163 + {
1.164 + name: "@namespace 1e",
1.165 + ref: "@namespace foo 'http://foo.example.com/';",
1.166 + tst: "@namespace foo 'http://foo.example.com/"
1.167 + },
1.168 + {
1.169 + name: "@namespace 2a",
1.170 + ref: "@namespace url('http://foo.example.com/');",
1.171 + tst: "@namespace url('http://foo.example.com/')"
1.172 + },
1.173 + {
1.174 + name: "@namespace 2b",
1.175 + ref: "@namespace url('http://foo.example.com/');",
1.176 + tst: "@namespace url('http://foo.example.com/'"
1.177 + },
1.178 + {
1.179 + name: "@namespace 2c",
1.180 + ref: "@namespace url('http://foo.example.com/');",
1.181 + tst: "@namespace url('http://foo.example.com/"
1.182 + },
1.183 + {
1.184 + name: "@namespace 2d",
1.185 + ref: "@namespace 'http://foo.example.com/';",
1.186 + tst: "@namespace 'http://foo.example.com/'"
1.187 + },
1.188 + {
1.189 + name: "@namespace 2e",
1.190 + ref: "@namespace 'http://foo.example.com/';",
1.191 + tst: "@namespace 'http://foo.example.com/"
1.192 + },
1.193 + {
1.194 + name: "@-moz-document 1",
1.195 + ref: "@-moz-document domain('example.com') {}",
1.196 + tst: "@-moz-document domain('example.com') {"
1.197 + },
1.198 + {
1.199 + name: "@-moz-document 2",
1.200 + ref: "@-moz-document domain('example.com') { p {} }",
1.201 + tst: "@-moz-document domain('example.com') { p {"
1.202 + }
1.203 +];
1.204 +
1.205 +const basestyle = ("table {\n"+
1.206 + " border-collapse: collapse;\n"+
1.207 + "}\n"+
1.208 + "td {\n"+
1.209 + " width: 1.5em;\n"+
1.210 + " height: 1.5em;\n"+
1.211 + " border: 1px solid black;\n"+
1.212 + " text-align: center;\n"+
1.213 + " margin: 0;\n"+
1.214 + "}\n"+
1.215 + "tr { counter-increment: tr }\n");
1.216 +
1.217 +/* This is more complicated than it might look like it needs to be,
1.218 + because for each subtest we have to splat stuff into the iframe,
1.219 + allow the renderer to run, and only then interrogate the computed
1.220 + styles. */
1.221 +
1.222 +SimpleTest.waitForExplicitFinish();
1.223 +
1.224 +window.onload = function() {
1.225 + const frame = document.getElementById("display");
1.226 + var curTest = 0;
1.227 +
1.228 + const prepareTest = function() {
1.229 + var cd = frame.contentDocument;
1.230 + cd.open();
1.231 + cd.write('<!DOCTYPE HTML><html><head>' +
1.232 + '<style>\n' + basestyle + '</style>\n' +
1.233 + '<style>\n' + tests[curTest].ref + '</style>\n' +
1.234 + '<style>\n' + tests[curTest].tst + '</style>\n' +
1.235 + '</head><body>\n' +
1.236 + '<table><tr><td id="r"><td id="t"></table>' +
1.237 + '</body></html>');
1.238 + cd.close();
1.239 + };
1.240 +
1.241 + const checkTest = function() {
1.242 + var cd = frame.contentDocument;
1.243 + var _is = tests[curTest].todo ? todo_is : is;
1.244 + var _ok = tests[curTest].todo ? todo : ok;
1.245 +
1.246 + if (cd.styleSheets[1].cssRules.length == 1 &&
1.247 + cd.styleSheets[2].cssRules.length == 1) {
1.248 + // If we have a .prop for this test, the .cssText of the reference
1.249 + // and test rules will differ in the selector. Change #t to #r
1.250 + // in the test rule.
1.251 + var ref_canon = cd.styleSheets[1].cssRules[0].cssText;
1.252 + var tst_canon = cd.styleSheets[2].cssRules[0].cssText;
1.253 + tst_canon = tst_canon.replace(/(#|%23)t\b/, "$1r");
1.254 + _is(tst_canon, ref_canon,
1.255 + tests[curTest].name + " (canonicalized rule)");
1.256 + } else {
1.257 + _ok(false, tests[curTest].name + " (rule missing)");
1.258 + }
1.259 + if (tests[curTest].prop) {
1.260 + var prop = tests[curTest].prop;
1.261 + var pseudo = tests[curTest].pseudo;
1.262 +
1.263 + var refElt = cd.getElementById("r");
1.264 + var tstElt = cd.getElementById("t");
1.265 + var refStyle = cd.defaultView.getComputedStyle(refElt, pseudo);
1.266 + var tstStyle = cd.defaultView.getComputedStyle(tstElt, pseudo);
1.267 + _is(tstStyle.getPropertyValue(prop),
1.268 + refStyle.getPropertyValue(prop),
1.269 + tests[curTest].name + " (computed style)");
1.270 + }
1.271 + curTest++;
1.272 + if (curTest < tests.length) {
1.273 + prepareTest();
1.274 + } else {
1.275 + SimpleTest.finish();
1.276 + }
1.277 + };
1.278 +
1.279 + frame.onload = function(){setTimeout(checkTest, 0);};
1.280 + prepareTest();
1.281 +};
1.282 +</script>
1.283 +</pre>
1.284 +</body>
1.285 +</html>
