1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_parse_rule.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,253 @@
1.4 +<!DOCTYPE html>
1.5 +<html lang=en>
1.6 +<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.7 +<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.8 +<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
1.9 +<body>
1.10 +<iframe></iframe>
1.11 +<!-- Note that the following style and div elements are duplicates
1.12 + of the ones written into the iframe; they are here for convienience
1.13 + in resolving the "standard" computed value for a given specification
1.14 +-->
1.15 +<style></style>
1.16 +<div id=a class='a b c' title='zxcv weeqweqeweasd a '></div>
1.17 +<script>
1.18 +SimpleTest.waitForExplicitFinish();
1.19 +
1.20 +window.onload=function(){
1.21 +
1.22 +var base;
1.23 +
1.24 +// A short note about escaping: all of the strings in this test go through
1.25 +// Javascript unescaping before getting passed to CSS. This means that
1.26 +// sequences like "\n" refer to a newline, a single backslash is written "\\",
1.27 +// a CSS escape sequence is something like "\\A", and some quotes must be
1.28 +// escaped.
1.29 +
1.30 +var testset = [
1.31 +
1.32 +// Color tests
1.33 +// Generic property for testing
1.34 +{ base : base = "div {color:green}",
1.35 + tests : [
1.36 +// My misc tests
1.37 +"<!--#a {color:green}",
1.38 +base + "<!-#a {color:red}",
1.39 +base + "#a<!--{color:red}",
1.40 +"-->#a{color:green}",
1.41 +base + "--#a {color:red}",
1.42 +base + "--aasdf, #a {color:green}",
1.43 +base + "-0aasdf, #a {color:red}",
1.44 +"-asdf, #a {color:green}",
1.45 +base + "#a {color: rgb\n(255, 0, 0)}",
1.46 +"#a {font: \"Arial\n;color:green}",
1.47 +"#a {color: @charset{}\"\\\n'\"url(\na\na); color:green}",
1.48 +"#a\r{color:green}",
1.49 +"#a\n{color:green}",
1.50 +"#a\t{color:green}",
1.51 +"@threedee maroon url('asdf\n) ra('asdf\n); " + base,
1.52 +"@threedee {maroon url('asdf\n) ra('asdf\n);} " + base,
1.53 +"div[title='zxcv weeqweqeweasd\\D\\A a']{color:green}",
1.54 +"div[title~='weeqweqeweasd']{color:green}",
1.55 +base + "#a\\\n{color:red}",
1.56 +base + "#a\v{color:red}",
1.57 +
1.58 +// CSS1 section 7.1
1.59 +"#a {color: green; rotation: 70deg;}",
1.60 +"#a {color: green;} #a{color:invalidValue;}",
1.61 +base + "#a {color: \"red\"}",
1.62 +base + "@three-dee {\n @background-lighting {\n azimuth: 30deg;\n elevation: 190deg;\n }\n #a { color: red }\n }",
1.63 +"#a {COLOR: GREEN}",
1.64 +base + "#a:wait {color: red}",
1.65 +"#a:lang(en) {color: green}",
1.66 +"#a:lang(\nen\r\t ) {color: green}",
1.67 +base + "div ! em, #a {color: red}",
1.68 +base + "//asdf.zxcv,\n#a {color: red}",
1.69 +"#a {rotation-code: \"}\"; color: green;}",
1.70 +"#a {rotation-code: \"\\\"}\\\"\"; color: green;}",
1.71 +"#a {rotation-code: '}'; color: green;}",
1.72 +"#a {rotation-code: '\\'}\\''; color: green;}",
1.73 +"#a {\n type-display: @threedee {rotation-code: '}';};\n color: green;\n }",
1.74 +base + "p {text-indent: 0.5in;} color: maroon #a {color: red;}",
1.75 +base + "p {text-indent: 0.5in;} color: maroon; #a {color: red;}",
1.76 +
1.77 +// string tokenization as error token, not EOF (bug 311566 comment 70)
1.78 +"#a { color: green; foo: { \"bar\n;color: red}",
1.79 +
1.80 +// CSS 2.1 section 4.1.3
1.81 +"@MediA All {#a {ColOR :RgB(\t0,\r128,\n0 ) } };",
1.82 +base + "\\#a{color:red;}",
1.83 +base + "#a\\{color:red;\\}",
1.84 +base + "#a{color\\:red;}",
1.85 +base + "#a{color:red\\;}",
1.86 +"#a {c\\o\\l\\o\\r:\\g\\ree\\n}",
1.87 +"#a{ co\\00006Cor: gr\\000065en; }",
1.88 +"#a{ co\\4C or: gr\\000045en; }",
1.89 +".IdE6n-3t0_6, #a { color: green }",
1.90 +"#IdE6n-3t0_6, #a { color: green }",
1.91 +"._ident, #a { color: green }",
1.92 +"#_ident, #a { color: green }",
1.93 +".-ident, .a { color: green; }", // Testsuite has incorrect version
1.94 +"#怀ident, .a { color: green }",
1.95 +"#iden怀t怀, .a { color: green }",
1.96 +"#\\6000ident, .a { color: green }",
1.97 +"#iden\\6000t\\6000, .a { color: green }",
1.98 +".怀ident, .a { color: green }",
1.99 +".iden怀t怀, .a { color: green }",
1.100 +".\\6000ident, .a { color: green }",
1.101 +".iden\\6000t\\6000, .a { color: green }",
1.102 +base + "#6ident, #a {color: red }",
1.103 +".id4ent6, .a { color: green }",
1.104 +"#\\ident, .a { color: green; }",
1.105 +"#ide\\n\\t, .a { color: green; }",
1.106 +".\\6ident, .a { color: green; }",
1.107 +".\\--ident, .a { color: green; }",
1.108 +
1.109 +// CSS2.1 section 4.1.5 and 4.2
1.110 +"@import 'data:text/css,%23a{color:green}';",
1.111 +"@import \"data:text/css,%23a{color:green}\";",
1.112 +"@import url(data:text/css,%23a{color:green});",
1.113 +"@import 'data:text/css,%23a{color:green}' screen;",
1.114 +base + "@import 'data:text/css,%23a{color:red}' blahblahblah;",
1.115 +"@import 'data:text/css,%23a{color:green}'",
1.116 +"@import 'data:text/css,%23a{color:green}",
1.117 +"@foo {}" + base,
1.118 +"@foo bar {}" + base,
1.119 +"@foo; " + base,
1.120 +"@foo bar baz; " + base,
1.121 +base + "@foo {}; #a {color: red}",
1.122 +
1.123 +// CSS2.1 section 4.1.9
1.124 +"/* This is a CSS comment. */" + base,
1.125 +base + "/* #a {color: red} */",
1.126 +"/*********** /*/" + base,
1.127 +
1.128 +// CSS2.1 section 4.3.6
1.129 +base + "#a {color: rgb(255, 0, 0%)}",
1.130 +base + "#a {color: rgb(100%, 0, 0)}",
1.131 +base + "#a {color: rgb(255.0, 0, 0)}",
1.132 +"#a {color: rgb(0, 128, 0)}",
1.133 +"#a {color: rgb(0%, 50%, 0%)}",
1.134 +"#a {color: rgb(0%, 49.999999999999%, 0%)}",
1.135 +], prop: "color", pseudo: ""
1.136 +},
1.137 +
1.138 +// Border tests
1.139 +// For testing lengths
1.140 +{ base : base = "#a {border-style:solid}",
1.141 + tests : [
1.142 +// CSS1 section 7.1
1.143 +base + "#a {border-width: funny}",
1.144 +base + "#a {border-width: 50zu}",
1.145 +base + "#a {border-width: px}",
1.146 +
1.147 +// Number/unit parsing
1.148 +base + "#a {border-width: 0.px}",
1.149 +base + "#a {border-width: ..0px}",
1.150 +base + "#a {border-width: 0..0px}",
1.151 +base + "#a {border-width: 0.}",
1.152 +base + "#a {border-width: ..0}",
1.153 +base + "#a {border-width: 0..0}",
1.154 +base + "#a {border-width: 0; border-width: .0px medium}",
1.155 +base + "#a {border-width: 0; border-width: .0 medium}",
1.156 +base + "#a {border-width: 0; border-width: 0.0px medium}",
1.157 +], prop: "borderRightWidth", pseudo: ""},
1.158 +
1.159 +// Content tests
1.160 +// Tests for strings and pseudos
1.161 +{base : base = ".a::before {content: 'This is \\a'}",
1.162 + tests : [
1.163 +// CSS 2.1 section 4.1.3
1.164 +"#a::before {content: 'This is \\a '}",
1.165 +"#a::before {content: 'This is \\A '}",
1.166 +"#a::before {content: 'This is \\0000a '}",
1.167 +"#a::before {content: 'This is \\00000a '}",
1.168 +"#a::before {content: 'This is \\\n\\00000a '}",
1.169 +"#a::before {content: 'This is \\\015\012\\00000a '}",
1.170 +"#a::before {content: 'This is \\\015\\00000a '}",
1.171 +"#a::before {content: 'This is \\\f\\00000a '}",
1.172 +"#a::before {content: 'This is\\20\f\\a'}",
1.173 +"#a::before {content: 'This is\\20\r\\a'}",
1.174 +"#a::before {content: 'This is\\20\n\\a'}",
1.175 +"#a::before {content: 'This is\\20\r\n\\a'}",
1.176 +base + "#a::before {content: 'FAIL \f\\a'}",
1.177 +base + "#a::before {content: 'FAIL \\\n\r\\a'}",
1.178 +"#a:before {content: 'This is \\a'}",
1.179 +
1.180 +base + "#a:: before {content: 'FAIL'}",
1.181 +base + "#a ::before {content: 'FAIL'}",
1.182 +"#a::before {content: 'This is \\a",
1.183 +
1.184 +], prop: "content", pseudo: "::before"
1.185 +},
1.186 +
1.187 +// Background color tests
1.188 +// For basic URL parsing sanity checks
1.189 +{ base : base = "div {background: blue}",
1.190 + tests : [
1.191 +"#a {background: url() blue}",
1.192 +"#a {background: url(怀) blue}",
1.193 +], prop: "backgroundColor", pseudo: ""
1.194 +},
1.195 +
1.196 +// A one-off test I couldn't come up with a better way to do
1.197 +{ base : base = "div {border-style: dotted}",
1.198 + tests : [
1.199 +// Sanity-check to make sure this test will work
1.200 +// This test requires a color name that starts with a "-"
1.201 +base + "#a {border: dotted 0 -moz-menuhover}",
1.202 +// The actual test: check that 0-moz-menuhover get parsed as an unknown dimension
1.203 +// rather than a separate identifier
1.204 +base + "#a {border: solid 0-moz-menuhover}",
1.205 +], prop: "borderLeftStyle", pseudo: ""
1.206 +},
1.207 +
1.208 +];
1.209 +
1.210 +var curTest = -1;
1.211 +var curSubTest = 0;
1.212 +
1.213 +var styleElement = document.getElementsByTagName("style")[0];
1.214 +var divElement = document.getElementById("a");
1.215 +var frame = document.getElementsByTagName("iframe")[0];
1.216 +
1.217 +var canonical;
1.218 +
1.219 +var doTests = function() {
1.220 + if (curTest >= 0) {
1.221 + var curElement = frame.contentDocument.getElementsByTagName("div")[0];
1.222 + var curStyle = frame.contentDocument.defaultView.getComputedStyle(curElement, testset[curTest].pseudo);
1.223 + if (testset[curTest].todo && testset[curTest].todo[testset[curTest].tests[curSubTest]]) {
1.224 + todo_is(curStyle[testset[curTest].prop], canonical, testset[curTest].tests[curSubTest]);
1.225 + } else {
1.226 + is(curStyle[testset[curTest].prop], canonical, testset[curTest].tests[curSubTest]);
1.227 + }
1.228 + curSubTest++;
1.229 + }
1.230 + if (curTest == -1 || curSubTest >= testset[curTest].tests.length) {
1.231 + curTest++;
1.232 + curSubTest = 0;
1.233 + }
1.234 + if (!(curTest < testset.length)) {
1.235 + SimpleTest.finish();
1.236 + return;
1.237 + }
1.238 + if (curSubTest == 0) {
1.239 + styleElement.textContent = "";
1.240 + var base = document.defaultView.getComputedStyle(divElement, testset[curTest].pseudo)[testset[curTest].prop];
1.241 + styleElement.textContent = testset[curTest].base;
1.242 + canonical = document.defaultView.getComputedStyle(divElement, testset[curTest].pseudo)[testset[curTest].prop];
1.243 + styleElement.textContent = "";
1.244 + isnot(base, canonical, "Sanity check for rule: " + testset[curTest].base);
1.245 + }
1.246 + frame.contentDocument.open();
1.247 + frame.contentDocument.write("<html lang=en><style>" + testset[curTest].tests[curSubTest] + "</style><div id=a class='a b c' title='zxcv weeqweqeweasd a'></div>");
1.248 + frame.contentWindow.onload = function(){setTimeout(doTests, 0);};
1.249 + frame.contentDocument.close();
1.250 +};
1.251 +
1.252 +doTests();
1.253 +
1.254 +};
1.255 +
1.256 +</script>
