layout/style/test/test_parse_rule.html

   1 <!DOCTYPE html>
   2 <html lang=en>
   3 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   4 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
   5 <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
   6 <body>
   7 <iframe></iframe>
   8 <!-- Note that the following style and div elements are duplicates
   9      of the ones written into the iframe; they are here for convienience
  10      in resolving the "standard" computed value for a given specification
  11 -->
  12 <style></style>
  13 <div id=a class='a b c' title='zxcv weeqweqeweasd&#13;&#10;a&#10;'></div>
  14 <script>
  15 SimpleTest.waitForExplicitFinish();
  16 SimpleTest.requestLongerTimeout(2);
  17
  18 window.onload=function(){
  19
  20 var base;
  21
  22 // A short note about escaping: all of the strings in this test go through
  23 // Javascript unescaping before getting passed to CSS.  This means that
  24 // sequences like "\n" refer to a newline, a single backslash is written "\\",
  25 // a CSS escape sequence is something like "\\A", and some quotes must be
  26 // escaped.
  27
  28 var testset = [
  29
  30 // Color tests
  31 // Generic property for testing
  32 { base : base = "div {color:green}",
  33   tests : [
  34 // My misc tests
  35 "<!--#a {color:green}",
  36 base + "<!-#a {color:red}",
  37 base + "#a<!--{color:red}",
  38 "-->#a{color:green}",
  39 base + "--#a {color:red}",
  40 base + "--aasdf, #a {color:green}",
  41 base + "-0aasdf, #a {color:red}",
  42 "-asdf, #a {color:green}",
  43 base + "#a {color: rgb\n(255, 0, 0)}",
  44 "#a {font: \"Arial\n;color:green}",
  45 "#a {color: @charset{}\"\\\n'\"url(\na\na); color:green}",
  46 "#a\r{color:green}",
  47 "#a\n{color:green}",
  48 "#a\t{color:green}",
  49 "@threedee maroon url('asdf\n) ra('asdf\n); " + base,
  50 "@threedee {maroon url('asdf\n) ra('asdf\n);} " + base,
  51 "div[title='zxcv weeqweqeweasd\\D\\A a']{color:green}",
  52 "div[title~='weeqweqeweasd']{color:green}",
  53 base + "#a\\\n{color:red}",
  54 base + "#a\v{color:red}",
  55
  56 // CSS1 section 7.1
  57 "#a {color: green; rotation: 70deg;}",
  58 "#a {color: green;} #a{color:invalidValue;}",
  59 base + "#a {color: \"red\"}",
  60 base + "@three-dee {\n @background-lighting {\n  azimuth: 30deg;\n  elevation: 190deg;\n  }\n #a { color: red }\n }",
  61 "#a {COLOR: GREEN}",
  62 base + "#a:wait {color: red}",
  63 "#a:lang(en) {color: green}",
  64 "#a:lang(\nen\r\t ) {color: green}",
  65 base + "div ! em, #a {color: red}",
  66 base + "//asdf.zxcv,\n#a {color: red}",
  67 "#a {rotation-code: \"}\"; color: green;}",
  68 "#a {rotation-code: \"\\\"}\\\"\"; color: green;}",
  69 "#a {rotation-code: '}'; color: green;}",
  70 "#a {rotation-code: '\\'}\\''; color: green;}",
  71 "#a {\n type-display: @threedee {rotation-code: '}';};\n color: green;\n }",
  72 base + "p {text-indent: 0.5in;} color: maroon #a {color: red;}",
  73 base + "p {text-indent: 0.5in;} color: maroon; #a {color: red;}",
  74
  75 // string tokenization as error token, not EOF (bug 311566 comment 70)
  76 "#a { color: green; foo: { \"bar\n;color: red}",
  77
  78 // CSS 2.1 section 4.1.3
  79 "@MediA All {#a {ColOR :RgB(\t0,\r128,\n0 ) } };",
  80 base + "\\#a{color:red;}",
  81 base + "#a\\{color:red;\\}",
  82 base + "#a{color\\:red;}",
  83 base + "#a{color:red\\;}",
  84 "#a {c\\o\\l\\o\\r:\\g\\ree\\n}",
  85 "#a{ co\\00006Cor: gr\\000065en; }",
  86 "#a{ co\\4C or: gr\\000045en; }",
  87 ".IdE6n-3t0_6, #a { color: green }",
  88 "#IdE6n-3t0_6, #a { color: green }",
  89 "._ident, #a { color: green }",
  90 "#_ident, #a { color: green }",
  91 ".-ident, .a { color: green; }", // Testsuite has incorrect version
  92 "#怀ident, .a { color: green }",
  93 "#iden怀t怀, .a { color: green }",
  94 "#\\6000ident, .a { color: green }",
  95 "#iden\\6000t\\6000, .a { color: green }",
  96 ".怀ident, .a { color: green }",
  97 ".iden怀t怀, .a { color: green }",
  98 ".\\6000ident, .a { color: green }",
  99 ".iden\\6000t\\6000, .a { color: green }",
 100 base + "#6ident, #a {color: red }",
 101 ".id4ent6, .a { color: green }",
 102 "#\\ident, .a { color: green; }",
 103 "#ide\\n\\t, .a { color: green; }",
 104 ".\\6ident, .a { color: green; }",
 105 ".\\--ident, .a { color: green; }",
 106
 107 // CSS2.1 section 4.1.5 and 4.2
 108 "@import 'data:text/css,%23a{color:green}';",
 109 "@import \"data:text/css,%23a{color:green}\";",
 110 "@import url(data:text/css,%23a{color:green});",
 111 "@import 'data:text/css,%23a{color:green}' screen;",
 112 base + "@import 'data:text/css,%23a{color:red}' blahblahblah;",
 113 "@import 'data:text/css,%23a{color:green}'",
 114 "@import 'data:text/css,%23a{color:green}",
 115 "@foo {}" + base,
 116 "@foo bar {}" + base,
 117 "@foo; " + base,
 118 "@foo bar baz; " + base,
 119 base + "@foo {}; #a {color: red}",
 120
 121 // CSS2.1 section 4.1.9
 122 "/* This is a CSS comment. */" + base,
 123 base + "/* #a {color: red} */",
 124 "/*********** /*/" + base,
 125
 126 // CSS2.1 section 4.3.6
 127 base + "#a {color: rgb(255, 0, 0%)}",
 128 base + "#a {color: rgb(100%, 0, 0)}",
 129 "#a {color: rgb(0, 128, 0)}",
 130 "#a {color: rgb(0%, 50%, 0%)}",
 131 "#a {color: rgb(0%, 49.999999999999%, 0%)}",
 132
 133 // CSS-Color-4
 134 // https://drafts.csswg.org/css-color/#rgb-functions
 135 "#a {color: rgb(0, 128.0, 0)}",
 136 ], prop: "color", pseudo: ""
 137 },
 138
 139 // Border tests
 140 // For testing lengths
 141 { base : base = "#a {border-style:solid}",
 142   tests : [
 143 // CSS1 section 7.1
 144 base + "#a {border-width: funny}",
 145 base + "#a {border-width: 50zu}",
 146 base + "#a {border-width: px}",
 147
 148 // Number/unit parsing
 149 base + "#a {border-width: 0.px}",
 150 base + "#a {border-width: ..0px}",
 151 base + "#a {border-width: 0..0px}",
 152 base + "#a {border-width: 0.}",
 153 base + "#a {border-width: ..0}",
 154 base + "#a {border-width: 0..0}",
 155 base + "#a {border-width: 0; border-width: .0px medium}",
 156 base + "#a {border-width: 0; border-width: .0 medium}",
 157 base + "#a {border-width: 0; border-width: 0.0px medium}",
 158 ], prop: "borderRightWidth", pseudo: ""},
 159
 160 // Content tests
 161 // Tests for strings and pseudos
 162 {base : base = ".a::before {content: 'This is \\a'}",
 163  tests : [
 164 // CSS 2.1 section 4.1.3
 165 "#a::before {content: 'This is \\a '}",
 166 "#a::before {content: 'This is \\A '}",
 167 "#a::before {content: 'This is \\0000a '}",
 168 "#a::before {content: 'This is \\00000a '}",
 169 "#a::before {content: 'This is \\\n\\00000a '}",
 170 "#a::before {content: 'This is \\\015\012\\00000a '}",
 171 "#a::before {content: 'This is \\\015\\00000a '}",
 172 "#a::before {content: 'This is \\\f\\00000a '}",
 173 "#a::before {content: 'This is\\20\f\\a'}",
 174 "#a::before {content: 'This is\\20\r\\a'}",
 175 "#a::before {content: 'This is\\20\n\\a'}",
 176 "#a::before {content: 'This is\\20\r\n\\a'}",
 177 base + "#a::before {content: 'FAIL \f\\a'}",
 178 base + "#a::before {content: 'FAIL \\\n\r\\a'}",
 179 "#a:before {content: 'This is \\a'}",
 180
 181 base + "#a:: before {content: 'FAIL'}",
 182 base + "#a ::before {content: 'FAIL'}",
 183 "#a::before {content: 'This is \\a",
 184
 185 ], prop: "content", pseudo: "::before"
 186 },
 187
 188 // Background color tests
 189 // For basic URL parsing sanity checks
 190 { base : base = "div {background: blue}",
 191   tests : [
 192 "#a {background: url() blue}",
 193 "#a {background: url(怀) blue}",
 194 ], prop: "backgroundColor", pseudo: ""
 195 },
 196
 197 // A one-off test I couldn't come up with a better way to do
 198 { base : base = "div {border-style: dotted}",
 199   tests : [
 200 // Sanity-check to make sure this test will work
 201 // This test requires a color name that starts with a "-"
 202 base + "#a {border: dotted 0 -moz-menuhover}",
 203 // The actual test: check that 0-moz-menuhover get parsed as an unknown dimension
 204 // rather than a separate identifier
 205 base + "#a {border: solid 0-moz-menuhover}",
 206 ], prop: "borderLeftStyle", pseudo: ""
 207 },
 208
 209 ];
 210
 211 var curTest = -1;
 212 var curSubTest = 0;
 213
 214 var styleElement = document.getElementsByTagName("style")[0];
 215 var divElement = document.getElementById("a");
 216 var frame = document.getElementsByTagName("iframe")[0];
 217
 218 var canonical;
 219
 220 var doTests = function() {
 221   if (curTest >= 0) {
 222     var curElement = frame.contentDocument.getElementsByTagName("div")[0];
 223     var curStyle = frame.contentDocument.defaultView.getComputedStyle(curElement, testset[curTest].pseudo);
 224     if (testset[curTest].todo && testset[curTest].todo[testset[curTest].tests[curSubTest]]) {
 225       todo_is(curStyle[testset[curTest].prop], canonical, testset[curTest].tests[curSubTest]);
 226     } else {
 227       is(curStyle[testset[curTest].prop], canonical, testset[curTest].tests[curSubTest]);
 228     }
 229     curSubTest++;
 230   }
 231   if (curTest == -1 || curSubTest >= testset[curTest].tests.length) {
 232     curTest++;
 233     curSubTest = 0;
 234   }
 235   if (!(curTest < testset.length)) {
 236     SimpleTest.finish();
 237     return;
 238   }
 239   if (curSubTest == 0) {
 240     styleElement.textContent = "";
 241     let computedBase = document.defaultView.getComputedStyle(divElement, testset[curTest].pseudo)[testset[curTest].prop];
 242     styleElement.textContent = testset[curTest].base;
 243     canonical = document.defaultView.getComputedStyle(divElement, testset[curTest].pseudo)[testset[curTest].prop];
 244     styleElement.textContent = "";
 245     isnot(computedBase, canonical, "Sanity check for rule: " + testset[curTest].base);
 246   }
 247   frame.contentDocument.open();
 248   frame.contentDocument.write("<html lang=en><style>" + testset[curTest].tests[curSubTest] + "</style><div id=a class='a b c' title='zxcv weeqweqeweasd&#13;&#10;a'></div>");
 249   frame.contentWindow.onload = function(){setTimeout(doTests, 0);};
 250   frame.contentDocument.close();
 251 };
 252
 253 // Running a debug build on the Android emulator is slooow and collecting
 254 // all the session history this test amasses through repeated navigations
 255 // adds considerably to the running time. Therefore, we restrict the
 256 // amount of session history we keep around during this test.
 257 SpecialPowers.pushPrefEnv({"set": [['browser.sessionhistory.max_entries', 4]]}, doTests);
 258
 259 };
 260
 261 </script>