test_css_supports_variables.html (6804B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=773296 5 --> 6 <head> 7 <title>Test for Bug 773296</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 </head> 11 <body> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=773296">Mozilla Bug 773296</a> 13 <p id="display"></p> 14 <div id="content" style="display: none"> 15 16 </div> 17 <pre id="test"> 18 <script type="application/javascript"> 19 20 /** Test for Bug 773296 */ 21 22 function runTest() 23 { 24 var passingConditions = [ 25 "(color:var(--a))", 26 "(color: var(--a))", 27 "(color: var(--a) )", 28 "(color: var( --a ) )", 29 "(color: var(--a, ))", 30 "(color: var(--a,/**/a))", 31 "(color: var(--a,))", 32 "(color: var(--a,/**/))", 33 "(color: 1px var(--a))", 34 "(color: var(--a) 1px)", 35 "(color: something 3px url(whereever) calc(var(--a) + 1px))", 36 "(color: var(--a) !important)", 37 "(color: var(--a)var(--b))", 38 "(color: var(--a, var(--b, var(--c, black))))", 39 "(color: var(--a) <!--)", 40 "(color: --> var(--a))", 41 "(color: { [ var(--a) ] })", 42 "(color: [;] var(--a))", 43 "(color: var(--a,(;)))", 44 "(color: VAR(--a))", 45 "(color: var(--0))", 46 "(color: var(--\\30))", 47 "(color: var(--\\d800))", 48 "(color: var(--\\ffffff))", 49 "(color: var(--a", 50 "(color: var(--a , ", 51 "(color: var(--a, ", 52 "(color: var(--a, var(--b", 53 "(color: var(--a /* unclosed comment", 54 "(color: var(--a, '", 55 "(color: var(--a, '\\", 56 "(color: var(--a, \\", 57 58 "(--a:var(--b))", 59 "(--a: var(--b))", 60 "(--a: var(--b) )", 61 "(--a: var( --b ) )", 62 "(--a: var(--b, ))", 63 "(--a: var(--b,/**/a))", 64 "(--a: var(--b,))", 65 "(--a: var(--b,/**/))", 66 "(--a: 1px var(--b))", 67 "(--a: var(--b) 1px)", 68 "(--a: something 3px url(whereever) calc(var(--b) + 1px))", 69 "(--a: var(--b) !important)", 70 "(--a: var(--b)var(--b))", 71 "(--a: var(--b, var(--c, var(--d, black))))", 72 "(--a: var(--b) <!--)", 73 "(--a: --> var(--b))", 74 "(--a: { [ var(--b) ] })", 75 "(--a: [;] var(--b))", 76 "(--a: )", 77 "(--a:var(--a))", 78 "(--0: a)", 79 "(--\\30: a)", 80 "(--\\61: a)", 81 "(--\\d800: a)", 82 "(--\\ffffff: a)", 83 "(--\0: 1)", 84 "(--a: ", 85 "(--a: /* unclosed comment", 86 "(--a: var(--b", 87 "(--a: var(--b, ", 88 "(--a: var(--b, var(--c", 89 "(--a: [{(((", 90 "(--a: '", 91 "(--a: '\\", 92 "(--a: \\", 93 "(--a:)", 94 ]; 95 96 var failingConditions = [ 97 "(color: var(--a,!))", 98 "(color: var(--a,!important))", 99 "(color: var(--a) !important !important)", 100 "(color: var(--a,;))", 101 "(color: var(--a);)", 102 "(color: var(1px))", 103 "(color: var(--a)))", 104 "(color: var(--a) \"\n", 105 "(color: var(--a) url(\"\n", 106 "(color: var(a))", 107 "(color: var(--", 108 "(color: var(--))", 109 110 "(--a: var(--b,!))", 111 "(--a: var(--b,!important))", 112 "((--a: var(--b) !important !important))", 113 "(--a: var(--b,;))", 114 "(--a: var(--b);)", 115 "(--a: var(1px))", 116 "(--a: a))", 117 "(--a: \"\n", 118 "(--a: url(\"\n", 119 "(--a: var(a))", 120 "(--: a)", 121 ]; 122 123 var passingDeclarations = [ 124 ["color", "var(--a)"], 125 ["color", " var(--a)"], 126 ["color", "var(--a) "], 127 ["color", "var( --a ) "], 128 ["color", "var(--a, )"], 129 ["color", "var(--a,/**/a)"], 130 ["color", "1px var(--a)"], 131 ["color", "var(--a) 1px"], 132 ["color", "something 3px url(whereever) calc(var(--a) + 1px)"], 133 ["color", "var(--a)var(--b)"], 134 ["color", "var(--a, var(--b, var(--c, black)))"], 135 ["color", "var(--a) <!--"], 136 ["color", "--> var(--a)"], 137 ["color", "{ [ var(--a) ] }"], 138 ["color", "[;] var(--a)"], 139 ["color", "var(--a,(;))"], 140 ["color", "VAR(--a)"], 141 ["color", "var(--0)"], 142 ["color", "var(--\\30)"], 143 ["color", "var(--\\d800)"], 144 ["color", "var(--\\ffffff)"], 145 ["color", "var(--a"], 146 ["color", "var(--a , "], 147 ["color", "var(--a, "], 148 ["color", "var(--a, var(--b"], 149 ["color", "var(--a /* unclosed comment"], 150 ["color", "var(--a, '"], 151 ["color", "var(--a, '\\"], 152 ["color", "var(--a, \\"], 153 ["color", "var(--a,)"], 154 ["color", "var(--a,/**/)"], 155 156 ["--a", " var(--b)"], 157 ["--a", "var(--b)"], 158 ["--a", "var(--b) "], 159 ["--a", "var( --b ) "], 160 ["--a", "var(--b, )"], 161 ["--a", "var(--b,/**/a)"], 162 ["--a", "var(--b,)"], 163 ["--a", "var(--b,/**/)"], 164 ["--a", "1px var(--b)"], 165 ["--a", "var(--b) 1px"], 166 ["--a", "something 3px url(whereever) calc(var(--b) + 1px)"], 167 ["--a", "var(--b)var(--b)"], 168 ["--a", "var(--b, var(--c, var(--d, black)))"], 169 ["--a", "var(--b) <!--"], 170 ["--a", "--> var(--b)"], 171 ["--a", "{ [ var(--b) ] }"], 172 ["--a", "[;] var(--b)"], 173 ["--a", " "], 174 ["--a", ""], 175 ["--a", "var(--a)"], 176 ["--0", "a"], 177 ["--\\30", "a"], 178 ["--\\61", "a"], 179 ["--\\d800", "a"], 180 ["--\\ffffff", "a"], 181 ["--\0", "a"], 182 ["--\ud800", "a"], 183 ["--a", "a /* unclosed comment"], 184 ["--a", "var(--b"], 185 ["--a", "var(--b, "], 186 ["--a", "var(--b, var(--c"], 187 ["--a", "[{((("], 188 ["--a ", "a"], 189 ["--a ", "'"], 190 ["--a ", "'\\"], 191 ["--a ", "\\"], 192 ]; 193 194 var failingDeclarations = [ 195 ["color", "var(--a,!)"], 196 ["color", "var(--a,!important)"], 197 ["color", "var(--a,;)"], 198 ["color", "var(--a);"], 199 ["color", "var(1px)"], 200 ["color", "var(--a))"], 201 ["color", "var(--a) \"\n"], 202 ["color", "var(--a) url(\"\n"], 203 ["color", "var(--a) !important"], 204 ["color", "var(--a) !important !important"], 205 ["color", "var(a)"], 206 ["color", "var(--"], 207 208 ["--a", "var(--b,!)"], 209 ["--a", "var(--b,!important)"], 210 ["--a", "var(--b) !important !important"], 211 ["--a", "var(--b,;)"], 212 ["--a", "var(--b);"], 213 ["--a", "var(1px)"], 214 ["(VAR-a", "a"], 215 ["--a", "a)"], 216 ["--a", "\"\n"], 217 ["--a", "url(\"\n"], 218 ["--a", "var(--b))"], 219 ["--a", "var(b)"], 220 ["--", "a"], 221 ]; 222 223 passingConditions.forEach(function(aCondition) { 224 is(CSS.supports(aCondition), true, "CSS.supports returns true for passing condition \"" + aCondition + "\""); 225 }); 226 227 failingConditions.forEach(function(aCondition) { 228 is(CSS.supports(aCondition), false, "CSS.supports returns false for failing condition \"" + aCondition + "\""); 229 }); 230 231 passingDeclarations.forEach(function(aDeclaration) { 232 is(CSS.supports(aDeclaration[0], aDeclaration[1]), true, "CSS.supports returns true for supported declaration \"" + aDeclaration.join(":") + "\""); 233 }); 234 235 failingDeclarations.forEach(function(aDeclaration) { 236 is(CSS.supports(aDeclaration[0], aDeclaration[1]), false, "CSS.supports returns false for unsupported declaration \"" + aDeclaration.join(":") + "\""); 237 }); 238 239 SimpleTest.finish(); 240 } 241 242 SimpleTest.waitForExplicitFinish(); 243 runTest(); 244 </script> 245 </pre> 246 </body> 247 </html>