mirror of
				https://github.com/mozilla/gecko-dev.git
				synced 2025-11-04 02:09:05 +02:00 
			
		
		
		
	MozReview-Commit-ID: B31txMs8fVw --HG-- extra : rebase_source : 771228551feba014da47fa576685864be94cb856
		
			
				
	
	
		
			135 lines
		
	
	
	
		
			5.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			135 lines
		
	
	
	
		
			5.4 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 | 
						|
<html xmlns="http://www.w3.org/1999/xhtml">
 | 
						|
 <head>
 | 
						|
  <title>CSS Test: handling of invalid url() functions</title>
 | 
						|
  <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
 | 
						|
  <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
 | 
						|
  <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#tokenization" />
 | 
						|
  <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#parsing-errors" />
 | 
						|
  <meta name="flags" content="invalid" />
 | 
						|
  <style type="text/css">
 | 
						|
  div { background-color: red }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  /* not a URI token, but handled according to rules for parsing errors */
 | 
						|
  #one { background: url(foo"bar") }
 | 
						|
  #one { background-color: green; }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  /* not a URI token, but handled according to rules for parsing errors */
 | 
						|
  #foo { background: url(foo"bar
 | 
						|
  ) }
 | 
						|
  #two { background-color: green; }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  /* not a URI token; bad-url token is consumed until the first closing ) */
 | 
						|
  #foo { background: url(foo"bar) }
 | 
						|
  #three { background-color: green; }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  /* not a URI token; bad-url token is consumed until the first closing ) */
 | 
						|
  #four { background-color: green; }
 | 
						|
  #foo { background: url(foo"bar) }
 | 
						|
  ) }
 | 
						|
  #four { background-color: red; }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  /* not a URI token; the unterminated string ends at end of line, so
 | 
						|
     the brace never matches */
 | 
						|
  #five { background-color: green; }
 | 
						|
  #foo { background: url("bar) }
 | 
						|
  #five { background-color: red; }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  /* not a URI token; the unterminated string ends at end of line */
 | 
						|
  #foo { background: url("bar) }
 | 
						|
  ) }
 | 
						|
  #six { background-color: green; }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  /* not a URI token, but brace matching should work */
 | 
						|
  #seven { background: url(()); background-color: green; }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  /* not a URI token, but brace matching should work */
 | 
						|
  #eight { background: url([{}]); background-color: green; }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  /* not a URI token, but brace matching should work */
 | 
						|
  #nine { background: url([)]); background-color: green; }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  /* perfectly good URI token (image is a 404, though) */
 | 
						|
  #ten { background: url({) green; }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  /* perfectly good URI token (image is a 404, though) */
 | 
						|
  #eleven { background: url([) green; }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  /* not a URI token; bad-url token is consumed until the first closing )
 | 
						|
     so the brace immediately after it closes the declaration block */
 | 
						|
  #twelve { background-color: green; }
 | 
						|
  #twelve { background: url(}{""{)}); background-color: red; }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  /* invalid URI token absorbs the [ */
 | 
						|
  #thirteen { background: url([""); background-color: green; }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  /* not a URI token; bad-url token is consumed until the first closing ) */
 | 
						|
  #foo { background: url(() }
 | 
						|
  #fourteen { background-color: green; }
 | 
						|
  </style>
 | 
						|
  <!-- The next three tests test that invalid URI tokens absorb [ and { -->
 | 
						|
  <style type="text/css">
 | 
						|
  #foo { background: url(a()); }
 | 
						|
  #fifteen { background-color: green }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  #foo { background: url([()); }
 | 
						|
  #sixteen { background-color: green }
 | 
						|
  </style>
 | 
						|
  <style type="text/css">
 | 
						|
  #foo { background: url({()); }
 | 
						|
  #seventeen { background-color: green }
 | 
						|
  </style>
 | 
						|
  <!-- Test that url() starting with a quote and without its closing ')' eaten
 | 
						|
  by any of the tokens that come after the initial quote doesn't eat the rest of
 | 
						|
  the stylesheet.  In particular, this checks whether, once we reach the end of
 | 
						|
  the string and discover garbage after it, we tokenize the garbage or just skip
 | 
						|
  to the nearest ')'. -->
 | 
						|
  <style type="text/css">
 | 
						|
  #eighteen { background-color: red; }
 | 
						|
  #foo { background: url('('')'); }
 | 
						|
  #eighteen { background-color: green; }
 | 
						|
  </style>
 | 
						|
  <!-- And the same thing with double quotes -->
 | 
						|
  <style type="text/css">
 | 
						|
  #nineteen { background-color: red; }
 | 
						|
  #foo { background: url("("')'); }
 | 
						|
  #nineteen { background-color: green; }
 | 
						|
  </style>
 | 
						|
 </head>
 | 
						|
 <body>
 | 
						|
  <div id="one">This should have a green background</div>
 | 
						|
  <div id="two">This should have a green background</div>
 | 
						|
  <div id="three">This should have a green background</div>
 | 
						|
  <div id="four">This should have a green background</div>
 | 
						|
  <div id="five">This should have a green background</div>
 | 
						|
  <div id="six">This should have a green background</div>
 | 
						|
  <div id="seven">This should have a green background</div>
 | 
						|
  <div id="eight">This should have a green background</div>
 | 
						|
  <div id="nine">This should have a green background</div>
 | 
						|
  <div id="ten">This should have a green background</div>
 | 
						|
  <div id="eleven">This should have a green background</div>
 | 
						|
  <div id="twelve">This should have a green background</div>
 | 
						|
  <div id="thirteen">This should have a green background</div>
 | 
						|
  <div id="fourteen">This should have a green background</div>
 | 
						|
  <div id="fifteen">This should have a green background</div>
 | 
						|
  <div id="sixteen">This should have a green background</div>
 | 
						|
  <div id="seventeen">This should have a green background</div>
 | 
						|
  <div id="eighteen">This should have a green background</div>
 | 
						|
  <div id="nineteen">This should have a green background</div>
 | 
						|
 </body>
 | 
						|
</html>
 |