uri-013

handling of invalid url() functions

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Flags
invalid

Source

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2 <html>
  3  <head>
  4   <link rel="reference" href="uri-013-ref.xht">
  5   <title>CSS Test: handling of invalid url() functions</title>
  6   <link rel="author" title="L. David Baron" href="http://dbaron.org/">
  7   <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/">
  8   <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">
  9   <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors">
 10   <meta name="flags" content="invalid">
 11   <style type="text/css">
 12   div { background-color: red }
 13   </style>
 14   <style type="text/css">
 15   /* not a URI token, but handled according to rules for parsing errors */
 16   #one { background: url(foo"bar") }
 17   #one { background-color: green; }
 18   </style>
 19   <style type="text/css">
 20   /* not a URI token, but handled according to rules for parsing errors */
 21   #foo { background: url(foo"bar
 22   ) }
 23   #two { background-color: green; }
 24   </style>
 25   <style type="text/css">
 26   /* not a URI token; the unterminated string ends at end of line, so
 27      the brace never matches */
 28   #three { background-color: green; }
 29   #foo { background: url(foo"bar) }
 30   #three { background-color: red; }
 31   </style>
 32   <style type="text/css">
 33   /* not a URI token; the unterminated string ends at end of line */
 34   #foo { background: url(foo"bar) }
 35   ) }
 36   #four { background-color: green; }
 37   </style>
 38   <style type="text/css">
 39   /* not a URI token; the unterminated string ends at end of line, so
 40      the brace never matches */
 41   #five { background-color: green; }
 42   #foo { background: url("bar) }
 43   #five { background-color: red; }
 44   </style>
 45   <style type="text/css">
 46   /* not a URI token; the unterminated string ends at end of line */
 47   #foo { background: url("bar) }
 48   ) }
 49   #six { background-color: green; }
 50   </style>
 51   <style type="text/css">
 52   /* not a URI token, but brace matching should work */
 53   #seven { background: url(()); background-color: green; }
 54   </style>
 55   <style type="text/css">
 56   /* not a URI token, but brace matching should work */
 57   #eight { background: url([{}]); background-color: green; }
 58   </style>
 59   <style type="text/css">
 60   /* not a URI token, but brace matching should work */
 61   #nine { background: url([)]); background-color: green; }
 62   </style>
 63   <style type="text/css">
 64   /* perfectly good URI token (image is a 404, though) */
 65   #ten { background: url({) green; }
 66   </style>
 67   <style type="text/css">
 68   /* perfectly good URI token (image is a 404, though) */
 69   #eleven { background: url([) green; }
 70   </style>
 71   <style type="text/css">
 72   /* not a URI token; brace matching should work only after invalid URI token */
 73   #twelve { background: url(}{""{)}); background-color: green; }
 74   </style>
 75   <style type="text/css">
 76   /* invalid URI token absorbs the [ */
 77   #thirteen { background: url([""); background-color: green; }
 78   </style>
 79   <style type="text/css">
 80   /* not a URI token; the opening ( is never matched */
 81   #fourteen { background-color: green; }
 82   #foo { background: url(() }
 83   #fourteen { background-color: red; }
 84   </style>
 85   <!-- The next three tests test that invalid URI tokens absorb [ and { -->
 86   <style type="text/css">
 87   #foo { background: url(a()); }
 88   #fifteen { background-color: green }
 89   </style>
 90   <style type="text/css">
 91   #foo { background: url([()); }
 92   #sixteen { background-color: green }
 93   </style>
 94   <style type="text/css">
 95   #foo { background: url({()); }
 96   #seventeen { background-color: green }
 97   </style>
 98  </head>
 99  <body>
100   <div id="one">This should have a green background</div>
101   <div id="two">This should have a green background</div>
102   <div id="three">This should have a green background</div>
103   <div id="four">This should have a green background</div>
104   <div id="five">This should have a green background</div>
105   <div id="six">This should have a green background</div>
106   <div id="seven">This should have a green background</div>
107   <div id="eight">This should have a green background</div>
108   <div id="nine">This should have a green background</div>
109   <div id="ten">This should have a green background</div>
110   <div id="eleven">This should have a green background</div>
111   <div id="twelve">This should have a green background</div>
112   <div id="thirteen">This should have a green background</div>
113   <div id="fourteen">This should have a green background</div>
114   <div id="fifteen">This should have a green background</div>
115   <div id="sixteen">This should have a green background</div>
116   <div id="seventeen">This should have a green background</div>
117  </body>
118 </html>