<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="xml-stylesheet-projection.css" media="projection"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<title>CSS Media Type Test projection: XHTML 1.0 - text/xml</title>
	<meta http-equiv="content-type" content="text/xml;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		.yes { font-weight: bold; color: green; display: none; }
		.no { font-weight: bold; color: red; }
		table { border-collapse: collapse; }
		th, td { border: 1px solid black; }
	</style>

	<!-- Styles for .link -->
	<link rel="stylesheet" type="text/css" media="projection" href="link-projection.css" />

	<!-- Styles for .style -->
	<style type="text/css" media="projection">#projection .style { background: lime; } #projection .style .no { display: none; } #projection .style .yes { display: inline; }</style>

	<!-- Styles for .atimport -->
	<style type="text/css">
		@import url(import-projection.css) projection;
	</style>

	<!-- Styles for .atmedia -->
	<style type="text/css">
		@media projection { #projection .atmedia { background: lime; } #projection .atmedia .no { display: none; } #projection .atmedia .yes { display: inline; } }
	</style>
</head>

<body>
<div id="container">
    <h1>CSS Media Type Test: <code>projection</code></h1>
	<p><a href="#tests">Skip to Tests</a> | <a href="./">Back to Test Index</a></p>
	<table id="file">
		<tr>
			<th>File</th>
			<td>xhtml10-projection.xml</td>
		</tr>
		<tr>
			<th>MIME Type</th>
			<td>text/xml</td>
		</tr>
		<tr>
			<th><code>!DOCTYPE</code></th>
			<td>XHTML 1.0 Strict</td>
		</tr>
	</table>

	<div id="tests">
		<h2>Media Type Tests</h2>
		<table>
			<caption>Tests for styles applied to each media types using the five methods available in XHTML</caption>
			<thead>
				<tr>
					<th>Media Type</th>
					<th><code>&lt;link&gt;</code></th>
					<th><code>&lt;style&gt;</code></th>
					<th><code>@import</code></th>
					<th><code>@media</code></th>
					<th><code>&lt;?xml-stylesheet?&gt;</code></th>
				</tr>
			</thead>
			<tbody>
				<tr id="projection">
					<th scope="row"><code>projection</code></th>
					<td class="link"><span class="yes">yes</span> <span class="no">no</span></td>
					<td class="style"><span class="yes">yes</span> <span class="no">no</span></td>
					<td class="atimport"><span class="yes">yes</span> <span class="no">no</span></td>
					<td class="atmedia"><span class="yes">yes</span> <span class="no">no</span></td>
					<td class="xml-stylesheet"><span class="yes">yes</span> <span class="no">no</span></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
</body>
</html>
