test_unclosed_parentheses.html (10158B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=575672 5 --> 6 <head> 7 <title>Test for Bug 575672</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <style type="text/css" id="style"></style> 10 <style type="text/css"> 11 #display { position: relative } 12 </style> 13 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 14 </head> 15 <body> 16 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=575672">Mozilla Bug 575672</a> 17 <p id="display"></p> 18 <div id="content" style="display: none"> 19 20 </div> 21 <pre id="test"> 22 <script type="application/javascript"> 23 24 /** Test for unclosed parentheses in CSS values. */ 25 26 // Each of the following semicolon-terminated @-rules should have a 27 // single missing ')' in the value. 28 var semirules = [ 29 "@import (", 30 "@import url(", 31 "@import url(foo", 32 "@import url('foo'", 33 "@import foo(", 34 ]; 35 36 // Each of the following declarations should have a single missing ')' 37 // in the value. 38 var declarations = [ 39 "content: url(", 40 "content: url( ", 41 "content: url(http://www.foo.com", 42 "content: url('http://www.foo.com'", 43 "content: foobar(", 44 "content: foobar( ", 45 "content: foobar(http://www.foo.com", 46 "content: foobar('http://www.foo.com'", 47 "color: url(", 48 "color: url( ", 49 "color: url(http://www.foo.com", 50 "color: url('http://www.foo.com'", 51 "background-image: linear-gradient(", 52 "background-image: linear-gradient( ", 53 "background-image: linear-gradient(to", 54 "background-image: linear-gradient(to top", 55 "background-image: linear-gradient(to top left", 56 "background-image: linear-gradient(to top left,", 57 "background-image: repeating-linear-gradient(to top left, red, blue", 58 "background-image: linear-gradient(to top left, red, yellow, blue", 59 "background-image: linear-gradient(to top left, red 1px, yellow 5px, blue 10px", 60 "background-image: linear-gradient(to top left, red, yellow, rgb(0, 0, 255)", 61 "background-image: linear-gradient(red, blue", 62 "background-image: linear-gradient(red, yellow, blue", 63 "background-image: linear-gradient(red 1px, yellow 5px, blue 10px", 64 "background-image: linear-gradient(red, yellow, rgb(0, 0, 255)", 65 "background-image: radial-gradient(", 66 "background-image: radial-gradient( ", 67 "background-image: radial-gradient(at", 68 "background-image: radial-gradient(at ", 69 "background-image: radial-gradient(at center", 70 "background-image: radial-gradient(at center,", 71 "background-image: radial-gradient(at center ", 72 "background-image: radial-gradient(closest-corner", 73 "background-image: radial-gradient(farthest-side ", 74 "background-image: radial-gradient(closest-corner ellipse", 75 "background-image: radial-gradient(farthest-side circle ", 76 "background-image: radial-gradient(closest-corner ellipse at", 77 "background-image: radial-gradient(farthest-side circle at ", 78 "background-image: radial-gradient(closest-corner ellipse at center", 79 "background-image: radial-gradient(farthest-side circle at center ", 80 "background-image: radial-gradient(50px", 81 "background-image: radial-gradient(50px,", 82 "background-image: radial-gradient(50px ", 83 "background-image: radial-gradient(50px at", 84 "background-image: radial-gradient(50px at ", 85 "background-image: radial-gradient(50px at center", 86 "background-image: radial-gradient(50px at center ", 87 "background-image: radial-gradient(50px at center,", 88 "background-image: radial-gradient(50px 50px", 89 "background-image: radial-gradient(50px 50px,", 90 "background-image: radial-gradient(50px 50px ", 91 "background-image: radial-gradient(50px 50px at", 92 "background-image: radial-gradient(50px 50px at ", 93 "background-image: radial-gradient(50px 50px at center", 94 "background-image: radial-gradient(50px 50px at center ", 95 "background-image: radial-gradient(50px 50px at center,", 96 "background-image: radial-gradient(50px 50px at center, red, blue", 97 "background-image: radial-gradient(ellipse at", 98 "background-image: radial-gradient(ellipse at ", 99 "background-image: radial-gradient(circle", 100 "background-image: radial-gradient(circle ", 101 "background-image: radial-gradient(circle closest-corner", 102 "background-image: radial-gradient(circle farthest-side ", 103 "background-image: radial-gradient(ellipse closest-corner at center", 104 "background-image: radial-gradient(ellipse farthest-side at center,", 105 "background-image: radial-gradient(circle at center", 106 "background-image: radial-gradient(circle at center,", 107 "background-image: radial-gradient(circle at center ", 108 "background-image: radial-gradient(circle at 50px center", 109 "background-image: radial-gradient(circle at 50px center ", 110 "background-image: radial-gradient(ellipse 50px", 111 "background-image: radial-gradient(ellipse 50px ", 112 "background-image: radial-gradient(ellipse 50px 50px", 113 "background-image: radial-gradient(ellipse 50px 50px,", 114 "background-image: radial-gradient(ellipse 50px 50px ", 115 "background-image: radial-gradient(ellipse 50px 50px at", 116 "background-image: radial-gradient(ellipse 50px 50px at ", 117 "background-image: radial-gradient(ellipse 50px 50px at center", 118 "background-image: radial-gradient(ellipse 50px 50px at center ", 119 "background-image: radial-gradient(ellipse 50px 50px at center,", 120 "background-image: radial-gradient(ellipse 50px 50px at center, red, blue", 121 "background-image: radial-gradient(at top left, red, blue", 122 "background-image: radial-gradient(farthest-corner, red, blue", 123 "background-image: radial-gradient(ellipse closest-corner, red, hsl(240, 50%, 50%)", 124 "background-image: radial-gradient(farthest-side circle, red, blue", 125 "background-image: repeating-radial-gradient(50%", 126 "background-image: repeating-radial-gradient(50% ", 127 "background-image: repeating-radial-gradient(50% 50%", 128 "background-image: repeating-radial-gradient(50% 50%,", 129 "background-image: repeating-radial-gradient(50% 50%, red, blue", 130 "background-image: repeating-radial-gradient(circle, red, blue", 131 "color: rgb(", 132 "color: rgb( ", 133 "color: rgb(128, 0", 134 "color: rgb(128, 0, 128", 135 "color: rgb(128, 0, 128, 128", 136 "color: rgba(", 137 "color: rgba( ", 138 "color: rgba(128, 0", 139 "color: rgba(128, 0, 128", 140 "color: rgba(128, 0, 128, 1", 141 "color: rgba(128, 0, 128, 1, 1", 142 "color: hsl(", 143 "color: hsl( ", 144 "color: hsl(240, 50%", 145 "color: hsl(240, 50%, 50%", 146 "color: hsl(240, 50%, 50%, 50%", 147 "color: hsla(", 148 "color: hsla( ", 149 "color: hsla(240, 50%", 150 "color: hsla(240, 50%, 50%", 151 "color: hsla(240, 50%, 50%, 1", 152 "color: hsla(240, 50%, 50%, 1, 1", 153 "content: counter(", 154 "content: counter( ", 155 "content: counter(foo", 156 "content: counter(foo ", 157 "content: counter(foo,", 158 "content: counter(foo, ", 159 "content: counter(foo, upper-roman", 160 "content: counter(foo, upper-roman ", 161 "content: counter(foo, upper-roman,", 162 "content: counter(foo, upper-roman, ", 163 "content: counters(", 164 "content: counters( ", 165 "content: counters(foo, ','", 166 "content: counters(foo, ',' ", 167 "content: counters(foo, ',',", 168 "content: counters(foo, ',', ", 169 "content: counters(foo, ',', upper-roman", 170 "content: counters(foo, ',', upper-roman ", 171 "content: counters(foo, ',', upper-roman,", 172 "content: counters(foo, ',', upper-roman, ", 173 "content: attr(", 174 "content: attr( ", 175 "content: attr(href", 176 "content: attr(href ", 177 "content: attr(html", 178 "content: attr(html ", 179 "content: attr(html|", 180 "content: attr(html| ", 181 "content: attr(html|href", 182 "content: attr(html|href ", 183 "content: attr(|", 184 "content: attr(| ", 185 "content: attr(|href", 186 "content: attr(|href ", 187 "transition-timing-function: cubic-bezier(", 188 "transition-timing-function: cubic-bezier( ", 189 "transition-timing-function: cubic-bezier(0, 0, 1", 190 "transition-timing-function: cubic-bezier(0, 0, 1 ", 191 "transition-timing-function: cubic-bezier(0, 0, 1,", 192 "transition-timing-function: cubic-bezier(0, 0, 1, ", 193 "transition-timing-function: cubic-bezier(0, 0, 1, 1", 194 "transition-timing-function: cubic-bezier(0, 0, 1, 1 ", 195 "transition-timing-function: cubic-bezier(0, 0, 1, 1,", 196 "transition-timing-function: cubic-bezier(0, 0, 1, 1, ", 197 "border-top-width: calc(", 198 "border-top-width: calc( ", 199 "border-top-width: calc(2em", 200 "border-top-width: calc(2em ", 201 "border-top-width: calc(2em +", 202 "border-top-width: calc(2em + ", 203 "border-top-width: calc(2em *", 204 "border-top-width: calc(2em * ", 205 "border-top-width: calc((2em)", 206 "border-top-width: calc((2em) ", 207 ]; 208 209 var selectors = [ 210 ":not(", 211 ":not( ", 212 ":not(-", 213 ":not(- ", 214 ":not(>", 215 ":not(> ", 216 ":not(div p", 217 ":not(div p ", 218 ":not(div >", 219 ":not(div > ", 220 ]; 221 222 var textNode = document.createTextNode(""); 223 document.getElementById("style").appendChild(textNode); 224 var cs = getComputedStyle(document.getElementById("display"), ""); 225 226 for (var i = 0; i < semirules.length; ++i) { 227 var sheet = semirules[i] + 228 "p#display { color: red } ) ; p { color: green; z-index: " + (i + 1) + " }"; 229 textNode.data = sheet; 230 is(cs.color, "rgb(0, 128, 0)", 231 "color for rule '" + semirules[i] + "'"); 232 is(cs.zIndex, String(i + 1), 233 "z-index for rule '" + semirules[i] + "'"); 234 } 235 236 for (var i = 0; i < declarations.length; ++i) { 237 var sheet = "@namespace html url(http://www.w3.org/1999/xhtml);\n" + 238 "#display { color: green; " + declarations[i] + 239 " x x x x x x x ; color: red; ) ; z-index: " + (i + 1) + " }"; 240 textNode.data = sheet; 241 is(cs.color, "rgb(0, 128, 0)", 242 "color for declaration '" + declarations[i] + "'"); 243 is(cs.zIndex, String(i + 1), 244 "z-index for declaration '" + declarations[i] + "'"); 245 } 246 247 for (var i = 0; i < selectors.length; ++i) { 248 var sheet = "@namespace html url(http://www.w3.org/1999/xhtml);\n" + 249 "#display { color: green } " + 250 selectors[i] + " x x x x x x x , #display { color: red } #display { color: red } ) , #display { color: red } " + 251 "#display { z-index: " + (i + 1) + " }"; 252 textNode.data = sheet; 253 is(cs.color, "rgb(0, 128, 0)", 254 "color for selector '" + selectors[i] + "'"); 255 is(cs.zIndex, String(i + 1), 256 "z-index for selector '" + selectors[i] + "'"); 257 } 258 259 </script> 260 </pre> 261 </body> 262 </html>