test_parse_rule.html (9239B)
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 a '></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 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>