Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/css/only-of-type-pseudo-class.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>:only-of-type</title>
		
		<style type='text/css'>
		<!--

			body { background: #fff; color: 000; font-family: Arial, Helvetica, sans-serif; }
			pre { background: #fff; padding: 0.5em; }
			li { background: #aaa; padding: 1em; width: 80%; margin: 0 0 3em; }
			.test { display: block; padding: 0.75em; }
			.base, .defaultgreen { background-color: #090; }
			.defaultred { background-color: #900; }
			
			.defaultred :only-of-type {
				background-color: #090;
			}

			.defaultgreen :only-of-type {
				background-color: #900;
			}
			
			blockquote {
				margin: 0;
			}

		-->			
		</style>		
	</head>

	<body>
		<p>This page is part of the <a href="http://www.css3.info">CSS3.info</a> <a href="http://www.css3.info/selectors-test/">CSS selectors test</a>. See more info on <a href="http://www.css3.info/preview/attribute-selectors.html">CSS3 selectors</a>.</p>
		
		<div class='base'></div>
	
		<ol>
			<li>
				<div class='defaultred'>
					<div class='test required'></div>
				</div>
				
				<pre>div:only-of-type {
}

&lt;div&gt;Does this element match?&lt;/div&gt;</pre>

				<p>
					The CSS selector should match the marked div element, because it is the only element of this type
				</p>
			</li>
			
			<li>
				<div class='defaultred'>
					<div class='test required'></div>
					<blockquote></blockquote>
				</div>
				
				<pre>div:only-of-type {
}

&lt;div&gt;Does this element match?&lt;/div&gt;
&lt;blockquote&gt;&lt;/blockquote&gt;</pre>

				<p>
					The CSS selector should match the marked div element, because it is the only element of this type
				</p>
			</li>			

			<li>
				<div class='defaultred'>
					<div class='test'></div>
					<blockquote>
						<div></div>
					</blockquote>
				</div>
				
				<pre>div:only-of-type {
}

&lt;div&gt;Does this element match?&lt;/div&gt;
&lt;blockquote&gt;
   &lt;div&gt;&lt;/div&gt;
&lt;/blockquote&gt;</pre>

				<p>
					The CSS selector should match the marked div element, because it is the only element of this type in this scope
				</p>
			</li>			

			<li>
				<div class='defaultgreen'>
					<div class='test default required'></div>
					<div></div>
				</div>
				
				<pre>div:only-of-type {
}

&lt;div&gt;Does this element match?&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;</pre>

				<p>
					The CSS selector should not match the marked div element, because it is not the only element of this type
				</p>
			</li>

			<li>
				<div class='defaultgreen'>
					<div id='appendChild' class='test default'></div>
				</div>

				<script type="text/javascript">
				<!--

					var ib = document.getElementById('appendChild');
					ib.parentNode.appendChild(document.createElement("div"));
				
				//-->
				</script>
				
				<pre>div:only-of-type {
}

&lt;div id='appendChild'&gt;&lt;/div&gt;

var ib = document.getElementById('appendChild');
ib.parentElement.appendChild(document.createElement("div"));</pre>

				<p>
					The CSS selector should not match the original div element, because it is
					not the only of its type anymore after another child with the same type is append 
					by the Javascript code. 
				</p>
			</li>
		</ol>
	</body>
</html>