fuyu
/
mark


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
							<!DOCTYPE html>
<html>
<head>
<title>HTML Test File</title>
<link rel="stylesheet" type="text/css" href="examples.css">
<style>
table,td {
	border: 1px solid silver;
	border-collapse: collapse
}

td {
	padding: .5em
}

#table-list-styles td {
	vertical-align: top;
}

.page-break {
	page-break-before: always;
}
</style>
</head>
<body>
	<div style='position: absolute; left: 0; top: 0; bottom: 0; overflow: auto; width: 400px'>
		<h1>HTML Test File</h1>
		This page showcases all HTML supported features.
		<hr>
		<h1>Headings</h1>
		<h1>Heading 1</h1>
		<h2>Heading 2</h2>
		<h3>Heading 3</h3>
		<h4>Heading 4</h4>
		<h5>Heading 5</h5>
		<h6>Heading 6</h6>
		<hr>
		<h1>
			<a id="colors" class="mce-item-anchor"></a>Colors
		</h1>
		<p>
			<span style="color: #ff0000; background-color: #00ff00;" data-mce-style="color: #ff0000; background-color: #00ff00;">Red Text With Green Background</span>
		</p>
		<hr>
		<h1 class='page-break'>
			<a id="font-sizes" class="mce-item-anchor"></a>Font Sizes
		</h1>
		<p>
			<span style="font-size: 12pt;" data-mce-style="font-size: 12pt;">12 Point</span>
		</p>
		<p>
			<span style="font-size: 24pt;" data-mce-style="font-size: 24pt;">24 Point</span>
		</p>
		<hr>
		<h1>
			<a id="fonts" class="mce-item-anchor"></a>Fonts
		</h1>
		<p>
			<span style="font-size: 24pt; font-family: arial, helvetica, sans-serif;" data-mce-style="font-size: 24pt; font-family: arial, helvetica, sans-serif;">Arial</span>
		</p>
		<p>
			<span style="font-size: 24pt; font-family: georgia, palatino;" data-mce-style="font-size: 24pt; font-family: georgia, palatino;">Georgia</span>
		</p>
		<p>
			<span style="font-size: 24pt; font-family: terminal, monaco;" data-mce-style="font-size: 24pt; font-family: terminal, monaco;">Terminal</span>
		</p>
		<p>
			<span style="font-size: 24pt; font-family: 'times new roman', times;" data-mce-style="font-size: 24pt; font-family: 'times new roman', times;">Times</span>
		</p>
		<hr>
		<h1 class='page-break'>
			<a id="tables" class="mce-item-anchor"></a>Tables
		</h1>
		<table class="mce-item-table">
			<tbody>
				<tr>
					<td>Number</td>
					<td>English</td>
					<td>Spanish</td>
				</tr>
				<tr>
					<td>1</td>
					<td>one</td>
					<td>uno</td>
				</tr>
				<tr>
					<td>2</td>
					<td>two</td>
					<td>dos</td>
				</tr>
				<tr>
					<td>3</td>
					<td>three</td>
					<td>tres</td>
				</tr>
			</tbody>
		</table>

		<h1>Images</h1>
		Images are subject to CORS restrictions an may only show up in a production environment.
		When testing, we start Chrome with the '--allow-file-access-from-files' flag...

		<img src="images/favicon.png" height="100" />

		<h1 class='page-break'>Lists</h1>
		<table id='table-list-styles'>
			<tr>
				<td>
					<p>Default</p>
					<ul>
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ul>
					<p>Circle</p>
					<ul style="list-style-type: circle;" data-mce-style="list-style-type: circle;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ul>
					<p>Disk</p>
					<ul style="list-style-type: disc;" data-mce-style="list-style-type: disc;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ul>
					<p>Square</p>
					<ul style="list-style-type: square;" data-mce-style="list-style-type: square;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ul>
				</td>
				<td>
					<p>Default</p>
					<ol>
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ol>
					<p>Lower Alpha</p>
					<ol style="list-style-type: lower-alpha;" data-mce-style="list-style-type: lower-alpha;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ol>
					<p>Upper Alpha</p>
					<ol style="list-style-type: upper-alpha;" data-mce-style="list-style-type: upper-alpha;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ol>
				</td>
				<td>
					<p>Lower&nbsp;Roman</p>
					<ol style="list-style-type: lower-roman;" data-mce-style="list-style-type: lower-roman;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ol>
					<p>Upper&nbsp;Roman</p>
					<ol style="list-style-type: upper-roman;" data-mce-style="list-style-type: upper-roman;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ol>
					<p>Lower&nbsp;Greek</p>
					<ol style="list-style-type: lower-greek;" data-mce-style="list-style-type: lower-greek;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ol>
					<p>Upper&nbsp;Greek</p>
					<ol style="list-style-type: upper-greek;" data-mce-style="list-style-type: upper-greek;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ol>
				</td>
			</tr>
		</table>

		<h1 class='page-break'>Hyperlinks</h1>
		<h2>Internal</h2>
		<p>
			<a href="#colors" data-mce-href="#colors">Colors</a>
		</p>
		<p>
			<a href="#font-sizes" data-mce-href="#font-sizes">Font Sizes</a>
		</p>
		<p>
			<a href="#fonts" data-mce-href="#fonts">Fonts</a>
		</p>
		<p>
			<a href="#tables" data-mce-href="#tables">Tables</a>
		</p>
		<h2>External</h2>
		<p>
			<a href="http://www.twelvetone.tv" data-mce-href="http://www.twelvetone.tv">www.twelvetone.tv</a>
		</p>
	</div>

	<script src='../../dist/jspdf.debug.js'></script>
	<script src='../../libs/html2pdf.js'></script>

	<script>
	  var pdf = new jsPDF('p', 'pt', 'letter');
	  pdf.canvas.height = 72 * 11;
	  pdf.canvas.width = 72 * 8.5;
	  html2pdf(document.body, pdf, function(pdf){
        var iframe = document.createElement('iframe');
        iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
        document.body.appendChild(iframe);
        iframe.src = pdf.output('datauristring');
	  });
  </script>
</body>
</html>