layout/style/test/test_unclosed_parentheses.html

   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>