layout/style/test/test_css_eof_handling.html

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