<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="all/xml-stylesheet-all.css" media="all"?>
<?xml-stylesheet type="text/css" href="aural/xml-stylesheet-aural.css" media="aural"?>
<?xml-stylesheet type="text/css" href="braille/xml-stylesheet-braille.css" media="braille"?>
<?xml-stylesheet type="text/css" href="embossed/xml-stylesheet-embossed.css" media="embossed"?>
<?xml-stylesheet type="text/css" href="handheld/xml-stylesheet-handheld.css" media="handheld"?>
<?xml-stylesheet type="text/css" href="print/xml-stylesheet-print.css" media="print"?>
<?xml-stylesheet type="text/css" href="projection/xml-stylesheet-projection.css" media="projection"?>
<?xml-stylesheet type="text/css" href="screen/xml-stylesheet-screen.css" media="screen"?>
<?xml-stylesheet type="text/css" href="tty/xml-stylesheet-tty.css" media="tty"?>
<?xml-stylesheet type="text/css" href="tv/xml-stylesheet-tv.css" media="tv"?>

<!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: 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="all" href="all/link-all.css" />
	<link rel="stylesheet" type="text/css" media="aural" href="aural/link-aural.css" />
	<link rel="stylesheet" type="text/css" media="braille" href="braille/link-braille.css" />
	<link rel="stylesheet" type="text/css" media="embossed" href="embossed/link-embossed.css" />
	<link rel="stylesheet" type="text/css" media="handheld" href="handheld/link-handheld.css" />
	<link rel="stylesheet" type="text/css" media="print" href="print/link-print.css" />
	<link rel="stylesheet" type="text/css" media="projection" href="projection/link-projection.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="screen/link-screen.css" />
	<link rel="stylesheet" type="text/css" media="tty" href="tty/link-tty.css" />
	<link rel="stylesheet" type="text/css" media="tv" href="tv/link-tv.css" />

	<!-- Styles for .style -->
	<style type="text/css" media="all">#all .style { background: lime; } #all .style .no { display: none; } #all .style .yes { display: inline; }</style>
	<style type="text/css" media="aural">#aural .style { background: lime; } #aural .style .no { display: none; } #aural .style .yes { display: inline; }</style>
	<style type="text/css" media="braille">#braille .style { background: lime; } #braille .style .no { display: none; } #braille .style .yes { display: inline; }</style>
	<style type="text/css" media="all">#all .style { background: lime; } #all .style .no { display: none; } #all .style .yes { display: inline; }</style>
	<style type="text/css" media="handheld">#handheld .style { background: lime; } #handheld .style .no { display: none; } #handheld .style .yes { display: inline; }</style>
	<style type="text/css" media="print">#print .style { background: lime; } #print .style .no { display: none; } #print .style .yes { display: inline; }</style>
	<style type="text/css" media="projection">#projection .style { background: lime; } #projection .style .no { display: none; } #projection .style .yes { display: inline; }</style>
	<style type="text/css" media="screen">#screen .style { background: lime; } #screen .style .no { display: none; } #screen .style .yes { display: inline; }</style>
	<style type="text/css" media="tty">#tty .style { background: lime; } #tty .style .no { display: none; } #tty .style .yes { display: inline; }</style>
	<style type="text/css" media="tv">#tv .style { background: lime; } #tv .style .no { display: none; } #tv .style .yes { display: inline; }</style>

	<!-- Styles for .atimport -->
	<style type="text/css">
		@import url(all/import-all.css) all;
		@import url(aural/import-aural.css) aural;
		@import url(braille/import-braille.css) braille;
		@import url(embossed/import-embossed.css) embossed;
		@import url(handheld/import-handheld.css) handheld;
		@import url(print/import-print.css) print;
		@import url(projection/import-projection.css) projection;
		@import url(screen/import-screen.css) screen;
		@import url(tty/import-tty.css) tty;
		@import url(tv/import-tv.css) tv;
	</style>

	<!-- Styles for .atmedia -->
	<style type="text/css">
		@media all { #all .atmedia { background: lime; } #all .atmedia .no { display: none; } #all .atmedia .yes { display: inline; } }
		@media aural { #aural .atmedia { background: lime; } #aural .atmedia .no { display: none; } #aural .atmedia .yes { display: inline; } }
		@media braille { #braille .atmedia { background: lime; } #braille .atmedia .no { display: none; } #braille .atmedia .yes { display: inline; } }
		@media embossed { #embossed .atmedia { background: lime; } #embossed .atmedia .no { display: none; } #embossed .atmedia .yes { display: inline; } }
		@media handheld { #handheld .atmedia { background: lime; } #handheld .atmedia .no { display: none; } #handheld .atmedia .yes { display: inline; } }
		@media print { #print .atmedia { background: lime; } #print .atmedia .no { display: none; } #print .atmedia .yes { display: inline; } }
		@media projection { #projection .atmedia { background: lime; } #projection .atmedia .no { display: none; } #projection .atmedia .yes { display: inline; } }
		@media screen { #screen .atmedia { background: lime; } #screen .atmedia .no { display: none; } #screen .atmedia .yes { display: inline; } }
		@media tty { #tty .atmedia { background: lime; } #tty .atmedia .no { display: none; } #tty .atmedia .yes { display: inline; } }
		@media tv { #tv .atmedia { background: lime; } #tv .atmedia .no { display: none; } #tv .atmedia .yes { display: inline; } }
	</style>
</head>

<body>
<div id="container">
    <h1>CSS Media Type Test</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.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="all">
					<th scope="row"><code>all</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>
				<tr id="aural">
					<th scope="row"><code>aural</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>
				<tr id="braille">
					<th scope="row"><code>braille</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>
				<tr id="embossed">
					<th scope="row"><code>embossed</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>
				<tr id="handheld">
					<th scope="row"><code>handheld</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>
				<tr id="print">
					<th scope="row"><code>print</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>
				<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>
				<tr id="screen">
					<th scope="row"><code>screen</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>
				<tr id="tty">
					<th scope="row"><code>tty</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>
				<tr id="tv">
					<th scope="row"><code>tv</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>
