third_party/blink/web_tests/fast/css/only-of-type-pseudo-class.html - chromium/src - Git at Google

 <!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>
	<!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 {
	}

	<div>Does this element match?</div></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 {
	}

	<div>Does this element match?</div>
	<blockquote></blockquote></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 {
	}

	<div>Does this element match?</div>
	<blockquote>
	<div></div>
	</blockquote></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 {
	}

	<div>Does this element match?</div>
	<div></div></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 {
	}

	<div id='appendChild'></div>

	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>