FINAL suepr merge step : added all modules to this super repos

This commit is contained in:
Bachir Soussi Chiadmi
2015-04-19 16:46:59 +02:00
7585 changed files with 1723356 additions and 18 deletions

View File

@@ -0,0 +1,74 @@
<?php
session_start();
$cmd = isset($_GET["cmd"]) ? $_GET["cmd"] : null;
include "../dompdf_config.inc.php";
include "functions.inc.php";
switch ($cmd) {
case "clear-font-cache":
$files = glob(DOMPDF_FONT_DIR."*.{UFM,AFM,ufm,afm}.php", GLOB_BRACE);
foreach($files as $file) {
unlink($file);
}
break;
case "install-font":
if (!auth_ok()) break;
$family = $_POST["family"];
$data = $_FILES["file"];
foreach($data["error"] as $name => $error) {
if ($error) {
switch($error) {
case UPLOAD_ERR_INI_SIZE:
case UPLOAD_ERR_FORM_SIZE:
echo "The uploaded file exceeds the upload_max_filesize directive in php.ini."; break;
case UPLOAD_ERR_PARTIAL:
echo "The uploaded file was only partially uploaded."; break;
case UPLOAD_ERR_NO_FILE:
break;
case UPLOAD_ERR_NO_TMP_DIR:
echo "Missing a temporary folder."; break;
default:
echo "Unknown error";
}
continue;
}
$weight = "normal";
$style = "normal";
switch($name) {
case "bold":
$weight = "bold"; break;
case "italic":
$style = "italic"; break;
case "bold_italic":
$weight = "bold";
$style = "italic";
break;
}
$style_arr = array(
"family" => $family,
"weight" => $weight,
"style" => $style,
);
Font_Metrics::init();
if (!Font_Metrics::register_font($style_arr, $data["tmp_name"][$name])) {
echo $data["name"][$name]." is not a valid font file";
}
else {
echo "The <strong>$family $weight $style</strong> font was successfully installed !<br />";
}
}
break;
}

View File

@@ -0,0 +1,66 @@
/*
* CSS Reset based on code from
* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
*
* Earlier copy stated:
* "If you want to use my reset styles, then feel free! It's all
* explicitly in the public domain (I have to formally say that
* or else people ask me about licensing)."
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/*
* Added 2009/02/04 to fix IE7's issue with interpolated
* scaling not turned on by default. Based on an idea from
* http://acidmartin.wordpress.com/2009/01/05/better-image-scaling-and-resampling-in-internet-explorer/
*/
img
{
-ms-interpolation-mode: bicubic;
}

View File

@@ -0,0 +1,441 @@
/*******************************************************************************
* This notice must be untouched at all times.
*
* This javascript library contains helper routines to assist with event
* handling consinstently among browsers
*
* EventHelpers.js v.1.3 available at http://www.useragentman.com/
*
* released under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
*******************************************************************************/
var EventHelpers = new function(){
var me = this;
var safariTimer;
var isSafari = /WebKit/i.test(navigator.userAgent);
var globalEvent;
me.init = function () {
if (me.hasPageLoadHappened(arguments)) {
return;
}
if (document.createEventObject){
// dispatch for IE
globalEvent = document.createEventObject();
} else if (document.createEvent) {
globalEvent = document.createEvent("HTMLEvents");
}
me.docIsLoaded = true;
}
/**
* Adds an event to the document. Examples of usage:
* me.addEvent(window, "load", myFunction);
* me.addEvent(docunent, "keydown", keyPressedFunc);
* me.addEvent(document, "keyup", keyPressFunc);
*
* @author Scott Andrew - http://www.scottandrew.com/weblog/articles/cbs-events
* @author John Resig - http://ejohn.org/projects/flexible-javascript-events/
* @param {Object} obj - a javascript object.
* @param {String} evType - an event to attach to the object.
* @param {Function} fn - the function that is attached to the event.
*/
me.addEvent = function(obj, evType, fn){
if (obj.addEventListener) {
obj.addEventListener(evType, fn, false);
} else if (obj.attachEvent) {
obj['e' + evType + fn] = fn;
obj[evType + fn] = function(){
obj["e" + evType + fn](self.event);
}
obj.attachEvent("on" + evType, obj[evType + fn]);
}
}
/**
* Removes an event that is attached to a javascript object.
*
* @author Scott Andrew - http://www.scottandrew.com/weblog/articles/cbs-events
* @author John Resig - http://ejohn.org/projects/flexible-javascript-events/ * @param {Object} obj - a javascript object.
* @param {String} evType - an event attached to the object.
* @param {Function} fn - the function that is called when the event fires.
*/
me.removeEvent = function(obj, evType, fn){
if (obj.removeEventListener) {
obj.removeEventListener(evType, fn, false);
} else if (obj.detachEvent) {
try {
obj.detachEvent("on" + evType, obj[evType + fn]);
obj[evType + fn] = null;
obj["e" + evType + fn] = null;
}
catch (ex) {
// do nothing;
}
}
}
function removeEventAttribute(obj, beginName){
var attributes = obj.attributes;
for (var i = 0; i < attributes.length; i++) {
var attribute = attributes[i]
var name = attribute.name
if (name.indexOf(beginName) == 0) {
//obj.removeAttributeNode(attribute);
attribute.specified = false;
}
}
}
me.addScrollWheelEvent = function(obj, fn){
if (obj.addEventListener) {
/** DOMMouseScroll is for mozilla. */
obj.addEventListener('DOMMouseScroll', fn, true);
}
/** IE/Opera. */
if (obj.attachEvent) {
obj.attachEvent("onmousewheel", fn);
}
}
me.removeScrollWheelEvent = function(obj, fn){
if (obj.removeEventListener) {
/** DOMMouseScroll is for mozilla. */
obj.removeEventListener('DOMMouseScroll', fn, true);
}
/** IE/Opera. */
if (obj.detachEvent) {
obj.detatchEvent("onmousewheel", fn);
}
}
/**
* Given a mouse event, get the mouse pointer's x-coordinate.
*
* @param {Object} e - a DOM Event object.
* @return {int} - the mouse pointer's x-coordinate.
*/
me.getMouseX = function(e){
if (!e) {
return;
}
// NS4
if (e.pageX != null) {
return e.pageX;
// IE
} else if (window.event != null && window.event.clientX != null &&
document.body != null &&
document.body.scrollLeft != null)
return window.event.clientX + document.body.scrollLeft;
// W3C
else if (e.clientX != null)
return e.clientX;
else
return null;
}
/**
* Given a mouse event, get the mouse pointer's y-coordinate.
* @param {Object} e - a DOM Event Object.
* @return {int} - the mouse pointer's y-coordinate.
*/
me.getMouseY = function(e){
// NS4
if (e.pageY != null)
return e.pageY;
// IE
else if (window.event != null && window.event.clientY != null &&
document.body != null &&
document.body.scrollTop != null)
return window.event.clientY + document.body.scrollTop;
// W3C
else if (e.clientY != null) {
return e.clientY;
}
}
/**
* Given a mouse scroll wheel event, get the "delta" of how fast it moved.
* @param {Object} e - a DOM Event Object.
* @return {int} - the mouse wheel's delta. It is greater than 0, the
* scroll wheel was spun upwards; if less than 0, downwards.
*/
me.getScrollWheelDelta = function(e){
var delta = 0;
if (!e) /* For IE. */
e = window.event;
if (e.wheelDelta) { /* IE/Opera. */
delta = e.wheelDelta / 120;
/** In Opera 9, delta differs in sign as compared to IE.
*/
if (window.opera) {
delta = -delta;
}
} else if (e.detail) { /** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -e.detail / 3;
}
return delta
}
/**
* Sets a mouse move event of a document.
*
* @deprecated - use only if compatibility with IE4 and NS4 is necessary. Otherwise, just
* use EventHelpers.addEvent(window, 'mousemove', func) instead. Cannot be used to add
* multiple mouse move event handlers.
*
* @param {Function} func - the function that you want a mouse event to fire.
*/
me.addMouseEvent = function(func){
if (document.captureEvents) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = func;
window.onmousemove = func;
window.onmouseover = func;
}
/**
* Find the HTML object that fired an Event.
*
* @param {Object} e - an HTML object
* @return {Object} - the HTML object that fired the event.
*/
me.getEventTarget = function(e){
// first, IE method for mouse events(also supported by Safari and Opera)
if (e.toElement) {
return e.toElement;
// W3C
} else if (e.currentTarget) {
return e.currentTarget;
// MS way
} else if (e.srcElement) {
return e.srcElement;
} else {
return null;
}
}
/**
* Given an event fired by the keyboard, find the key associated with that event.
*
* @param {Object} e - an event object.
* @return {String} - the ASCII character code representing the key associated with the event.
*/
me.getKey = function(e){
if (e.keyCode) {
return e.keyCode;
} else if (e.event && e.event.keyCode) {
return window.event.keyCode;
} else if (e.which) {
return e.which;
}
}
/**
* Will execute a function when the page's DOM has fully loaded (and before all attached images, iframes,
* etc., are).
*
* Usage:
*
* EventHelpers.addPageLoadEvent('init');
*
* where the function init() has this code at the beginning:
*
* function init() {
*
* if (EventHelpers.hasPageLoadHappened(arguments)) return;
*
* // rest of code
* ....
* }
*
* @author This code is based off of code from http://dean.edwards.name/weblog/2005/09/busted/ by Dean
* Edwards, with a modification by me.
*
* @param {String} funcName - a string containing the function to be called.
*/
me.addPageLoadEvent = function(funcName){
var func = eval(funcName);
// for Internet Explorer (using conditional comments)
/*@cc_on @*/
/*@if (@_win32)
pageLoadEventArray.push(func);
return;
/*@end @*/
if (isSafari) { // sniff
pageLoadEventArray.push(func);
if (!safariTimer) {
safariTimer = setInterval(function(){
if (/loaded|complete/.test(document.readyState)) {
clearInterval(safariTimer);
/*
* call the onload handler
* func();
*/
me.runPageLoadEvents();
return;
}
set = true;
}, 10);
}
/* for Mozilla */
} else if (document.addEventListener) {
var x = document.addEventListener("DOMContentLoaded", func, null);
/* Others */
} else {
me.addEvent(window, 'load', func);
}
}
var pageLoadEventArray = new Array();
me.runPageLoadEvents = function(e){
if (isSafari || e.srcElement.readyState == "complete") {
for (var i = 0; i < pageLoadEventArray.length; i++) {
pageLoadEventArray[i]();
}
}
}
/**
* Determines if either addPageLoadEvent('funcName') or addEvent(window, 'load', funcName)
* has been executed.
*
* @see addPageLoadEvent
* @param {Function} funcArgs - the arguments of the containing. function
*/
me.hasPageLoadHappened = function(funcArgs){
// If the function already been called, return true;
if (funcArgs.callee.done)
return true;
// flag this function so we don't do the same thing twice
funcArgs.callee.done = true;
}
/**
* Used in an event method/function to indicate that the default behaviour of the event
* should *not* happen.
*
* @param {Object} e - an event object.
* @return {Boolean} - always false
*/
me.preventDefault = function(e){
if (e.preventDefault) {
e.preventDefault();
}
try {
e.returnValue = false;
}
catch (ex) {
// do nothing
}
}
me.cancelBubble = function(e){
if (e.stopPropagation) {
e.stopPropagation();
}
try {
e.cancelBubble = true;
}
catch (ex) {
// do nothing
}
}
/*
* Fires an event manually.
* @author Scott Andrew - http://www.scottandrew.com/weblog/articles/cbs-events
* @author John Resig - http://ejohn.org/projects/flexible-javascript-events/ * @param {Object} obj - a javascript object.
* @param {String} evType - an event attached to the object.
* @param {Function} fn - the function that is called when the event fires.
*
*/
me.fireEvent = function (element,event, options){
if(!element) {
return;
}
if (document.createEventObject){
/*
var stack = DebugHelpers.getStackTrace();
var s = stack.toString();
jslog.debug(s);
if (s.indexOf('fireEvent') >= 0) {
return;
}
*/
return element.fireEvent('on' + event, globalEvent)
jslog.debug('ss');
}
else{
// dispatch for firefox + others
globalEvent.initEvent(event, true, true); // event type,bubbling,cancelable
return !element.dispatchEvent(globalEvent);
}
}
/* EventHelpers.init () */
function init(){
// Conditional comment alert: Do not remove comments. Leave intact.
// The detection if the page is secure or not is important. If
// this logic is removed, Internet Explorer will give security
// alerts.
/*@cc_on @*/
/*@if (@_win32)
document.write('<script id="__ie_onload" defer src="' +
((location.protocol == 'https:') ? '//0' : 'javascript:void(0)') + '"><\/script>');
var script = document.getElementById("__ie_onload");
me.addEvent(script, 'readystatechange', me.runPageLoadEvents);
/*@end @*/
}
init();
}
EventHelpers.addPageLoadEvent('EventHelpers.init');

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,168 @@
<?php
$files = glob("test/*.{html,htm,php}", GLOB_BRACE);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>dompdf debugger</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
function updateAddress(){
var addressbar = $('#addressbar'),
preview = $('#preview'),
preview_html = $('#preview_html'),
address = encodeURI(addressbar.val()),
addressHTML = address,
addressPDF = address,
basePath = "";
if ( !/[a-z]+:\/\//.test(address) ) {
addressHTML = "test/"+address+"?"+(new Date).getTime();
basePath = "www/test/";
}
// HTML file
preview_html.attr("src", "about:blank");
preview_html.attr("src", addressHTML);
// PDF file
preview.attr("src", "about:blank");
setTimeout(function(){
address = "../dompdf.php?base_path="+basePath+"&options[Attachment]=0&input_file="+addressPDF+"#toolbar=0&view=FitH&statusbar=0&messages=0&navpanes=0";
preview.attr('src', address);
}, 0.1);
}
function log(str){
var console = $("#console");
str = str || "(nothing)";
console.html(console.html() + str + "<hr />");
console.scrollTop(console[0].scrollHeight);
}
function resizePage(){
var page = $("#page");
var height = $(window).height() - page.offset().top - 40;
$("iframe, #console").height(height);
}
function navigateExamples(way) {
var select = $('#examples')[0],
n = select.options.length;
if (way == "previous")
select.selectedIndex = (select.selectedIndex - 1) % n;
else
select.selectedIndex = (select.selectedIndex + 1) % n;
$('#addressbar').val($("#examples").val());
updateAddress();
}
$(function(){
resizePage();
$(window).resize(resizePage);
$('#preview').load(function(){
if (this.src == "about:blank") return;
$.ajax({
url: '../lib/fonts/log.htm',
success: log,
cache: false
});
});
$('#addressbar').val($("#examples").val());
// Catch F5 to reload the iframes, not the page itself
$(document).keydown(function(event) {
if (event.which == 116) {
event.preventDefault();
updateAddress();
}
});
});
</script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
td {
padding: 0;
}
#page {
width: 100%;
border: none;
border-spacing: 0;
border-collapse: collapse;
}
iframe {
width: 100%;
}
#output td {
border: 1px solid #999;
}
#console-container {
vertical-align: top;
}
#console {
background: #eee;
overflow: scroll;
padding: 4px;
}
#console pre {
margin: 2px 0;
}
#console, #console pre {
font-size: 11px;
font-family: Courier, "Courier new", monospace;
white-space: pre-wrap;
}
</style>
</head>
<body>
<table id="page">
<tr>
<td colspan="3">
<button onclick="$('#console').html('')" style="float: right;">Reset</button>
<button onclick="navigateExamples('previous')">&lt;</button>
<select onchange="$('#addressbar').val($(this).val()); updateAddress()" id="examples">
<?php foreach($files as $file) { ?>
<option value="<?php echo basename($file); ?>"><?php echo basename($file); ?></option>
<?php } ?>
</select>
<button onclick="navigateExamples('next')">&gt;</button>
<input id="addressbar" type="text" size="100" value="" />
<button onclick="updateAddress()">Go</button>
</td>
</tr>
<tr id="output">
<td style="width: 40%;">
<iframe id="preview_html" name="preview_html" src="about:blank" frameborder="0" marginheight="0" marginwidth="0"></iframe>
</td>
<td style="width: 40%;">
<iframe id="preview" name="preview" src="about:blank" frameborder="0" marginheight="0" marginwidth="0"></iframe>
</td>
<td style="min-width: 400px; width: 20%;" id="console-container">
<div id="console"></div>
</td>
</tr>
</table>

View File

@@ -0,0 +1,84 @@
<?php
require_once("../dompdf_config.inc.php");
// We check wether the user is accessing the demo locally
$local = array("::1", "127.0.0.1");
$is_local = in_array($_SERVER['REMOTE_ADDR'], $local);
if ( isset( $_POST["html"] ) && $is_local ) {
if ( get_magic_quotes_gpc() )
$_POST["html"] = stripslashes($_POST["html"]);
$dompdf = new DOMPDF();
$dompdf->load_html($_POST["html"]);
$dompdf->set_paper($_POST["paper"], $_POST["orientation"]);
$dompdf->render();
$dompdf->stream("dompdf_out.pdf", array("Attachment" => false));
exit(0);
}
?>
<?php include("head.inc"); ?>
<a name="demo"> </a>
<h2>Demo</h2>
<?php if ($is_local) { ?>
<p>Enter your html snippet in the text box below to see it rendered as a
PDF: (Note by default, remote stylesheets, images &amp; inline PHP are disabled.)</p>
<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<p>Paper size and orientation:
<select name="paper">
<?php
foreach ( array_keys(CPDF_Adapter::$PAPER_SIZES) as $size )
echo "<option ". ($size == "letter" ? "selected " : "" ) . "value=\"$size\">$size</option>\n";
?>
</select>
<select name="orientation">
<option value="portrait">portrait</option>
<option value="landscape">landscape</option>
</select>
</p>
<textarea name="html" cols="60" rows="20">
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
/* Type some style rules here */
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- Type some HTML here --&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea>
<div style="text-align: center; margin-top: 1em;">
<button type="submit">Download</button>
</div>
</form>
<p style="font-size: 0.65em; text-align: center;">(Note: if you use a KHTML
based browser and are having difficulties loading the sample output, try
saving it to a file first.)</p>
<?php } else { ?>
<p style="color: red;">
User input has been disabled for remote connections.
</p>
<?php } ?>
<?php include("foot.inc"); ?>

View File

@@ -0,0 +1,126 @@
<?php
require_once "../dompdf_config.inc.php";
//if dompdf.php runs in virtual server root, dirname does not return empty folder but '/' or '\' (windows).
//This leads to a duplicate separator in unix etc. and an error in Windows. Therefore strip off.
$dompdf = dirname(dirname($_SERVER["PHP_SELF"]));
if ( $dompdf == '/' || $dompdf == '\\') {
$dompdf = '';
}
$dompdf .= "/dompdf.php?base_path=" . rawurlencode("www/test/");
include "head.inc";
?>
<script type="text/javascript">
function resizePreview(){
var preview = $("#preview");
preview.height($(window).height() - preview.offset().top - 2);
}
function getPath(hash) {
var file, type;
var parts = hash.split(/,/);
file = parts[0];
if (parts.length == 2) {
type = parts[1];
}
switch(type) {
default:
case "html":
return "test/"+file;
case "pdf":
return "<?php echo $dompdf; ?>&options[Attachment]=0&input_file="+file+"#toolbar=0&view=FitH&statusbar=0&messages=0&navpanes=0";
}
}
function setHash(hash) {
location.hash = "#"+hash;
}
$(function(){
var preview = $("#preview");
resizePreview();
$(window).scroll(function() {
var scrollTop = Math.min($(this).scrollTop(), preview.height()+preview.parent().offset().top) - 2;
preview.css("margin-top", scrollTop + "px");
});
$(window).resize(resizePreview);
var hash = location.hash;
var type = "html";
if (hash) {
hash = hash.substr(1);
preview.attr("src", getPath(hash));
}
});
</script>
<iframe id="preview" name="preview" src="about:blank" frameborder="0" marginheight="0" marginwidth="0"></iframe>
<a name="samples"> </a>
<h2>Samples</h2>
<p>Below are some sample files. The PDF version is generated on the fly by dompdf. (The source HTML &amp; CSS for
these files is included in the test/ directory of the distribution
package.)</p>
<?php
$extensions = array("html");
if ( DOMPDF_ENABLE_PHP ) {
$extensions[] = "php";
}
$test_files = glob("test/*.{".implode(",", $extensions)."}", GLOB_BRACE);
$sections = array(
"print" => array(),
"css" => array(),
"dom" => array(),
"image" => array(),
"page" => array(),
"encoding" => array(),
"script" => array(),
"quirks" => array(),
"other" => array(),
);
foreach ( $test_files as $file ) {
preg_match("@[\\/](([^_]+)_?(.*))\.(".implode("|", $extensions).")$@i", $file, $matches);
$prefix = $matches[2];
if ( array_key_exists($prefix, $sections) ) {
$sections[$prefix][] = array($file, $matches[3]);
}
else {
$sections["other"][] = array($file, $matches[1]);
}
}
foreach ( $sections as $section => $files ) {
echo "<h3>$section</h3>";
echo "<ul class=\"samples\">";
foreach ( $files as $file ) {
$filename = basename($file[0]);
$title = $file[1];
$arrow = "images/arrow_0" . rand(1, 6) . ".gif";
echo "<li style=\"list-style-image: url('$arrow');\">\n";
echo "
[<a class=\"button\" target=\"preview\" onclick=\"setHash('$filename,html')\" href=\"test/$filename\">HTML</a>]
[<a class=\"button\" target=\"preview\" onclick=\"setHash('$filename,pdf')\" href=\"$dompdf&amp;options[Attachment]=0&amp;input_file=" . rawurlencode($filename) . "#toolbar=0&amp;view=FitH&amp;statusbar=0&amp;messages=0&amp;navpanes=0\">PDF</a>] ";
echo $title;
echo "</li>\n";
}
echo "</ul>";
}
include "foot.inc";

View File

@@ -0,0 +1,193 @@
<?php
include "head.inc";
require_once "../dompdf_config.inc.php";
function to_bytes($string) {
$string = strtolower(trim($string));
if (!preg_match("/(.*)([kmgt])/", $string, $matches)) {
return intval($string);
}
list($string, $value, $suffix) = $matches;
switch($suffix) {
case 't': $value *= 1024;
case 'g': $value *= 1024;
case 'm': $value *= 1024;
case 'k': $value *= 1024;
}
return intval($value);
}
?>
<a name="setup"> </a>
<h2>Font manager</h2>
<ul>
<li style="list-style-image: url('images/star_02.gif');"><a href="#installed-fonts">Installed fonts</a></li>
<li style="list-style-image: url('images/star_02.gif');"><a href="#install-fonts">Install new fonts</a></li>
</ul>
<h3 id="installed-fonts">Installed fonts</h3>
<?php
Font_Metrics::init();
$fonts = Font_Metrics::get_font_families();
$extensions = array("ttf", "afm", "afm.php", "ufm", "ufm.php");
?>
<button onclick="$('#clear-font-cache-message').load('controller.php?cmd=clear-font-cache', function(){ location.reload(); })">Clear font cache</button>
<span id="clear-font-cache-message"></span>
<table class="setup">
<tr>
<th rowspan="2">Font family</th>
<th rowspan="2">Variants</th>
<th colspan="6">File versions</th>
</tr>
<tr>
<th>TTF</th>
<th>AFM</th>
<th>AFM cache</th>
<th>UFM</th>
<th>UFM cache</th>
</tr>
<?php foreach($fonts as $family => $variants) { ?>
<tr>
<td class="title" rowspan="<?php echo count($variants); ?>">
<?php
echo $family;
if ($family == DOMPDF_DEFAULT_FONT) echo ' <strong>(default)</strong>';
?>
</td>
<?php
$i = 0;
foreach($variants as $name => $path) {
if ($i > 0) {
echo "<tr>";
}
echo "
<td>
<strong style='width: 10em;'>$name</strong> : $path<br />
</td>";
foreach ($extensions as $ext) {
$v = "";
$class = "";
if (is_readable("$path.$ext")) {
// if not cache file
if (strpos($ext, ".php") === false) {
$class = "ok";
$v = $ext;
}
// cache file
else {
// check if old cache format
$content = file_get_contents("$path.$ext", null, null, null, 50);
if (strpos($content, '$this->')) {
$v = "DEPREC.";
}
else {
ob_start();
$d = include("$path.$ext");
ob_end_clean();
if ($d == 1)
$v = "DEPREC.";
else {
$class = "ok";
$v = $d["_version_"];
}
}
}
}
echo "<td style='width: 2em; text-align: center;' class='$class'>$v</td>";
}
echo "</tr>";
$i++;
}
?>
<?php } ?>
</table>
<h3 id="install-fonts">Install new fonts</h3>
<script type="text/javascript">
function checkFileName(form) {
var fields = {normal: "Normal", bold: "Bold", bold_italic: "Bold italic", italic: "Italic"};
var pattern = /\.[ot]tf$/i;
var ok = true;
if (!form.elements.family.value) {
alert("The font name is required");
form.elements.family.focus();
return false;
}
$.each(fields, function(key, name){
var value = form.elements["file["+key+"]"].value;
if (!value) return;
if (!value.match(pattern)) {
alert("The font name specified for "+name+" is not a TrueType font");
ok = false;
return false;
}
});
return ok;
}
</script>
<?php
if (auth_ok()) {
$max_size = min(to_bytes(ini_get('post_max_size')), to_bytes(ini_get('upload_max_filesize')));
?>
<form name="upload-font" method="post" action="controller.php?cmd=install-font" target="upload-font" enctype="multipart/form-data" onsubmit="return checkFileName(this)">
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo $max_size; ?>" />
<table class="setup">
<tr>
<td class="title">Name</td>
<td><input type="text" name="family" /></td>
<td rowspan="6"><iframe name="upload-font" id="upload-font" style="border: 0; width: 500px;"></iframe></td>
</tr>
<tr>
<td class="title">Normal</td>
<td><input type="file" name="file[normal]" /></td>
</tr>
<tr>
<td class="title">Bold</td>
<td><input type="file" name="file[bold]" /></td>
</tr>
<tr>
<td class="title">Bold italic</td>
<td><input type="file" name="file[bold_italic]" /></td>
</tr>
<tr>
<td class="title">Italic</td>
<td><input type="file" name="file[italic]" /></td>
</tr>
<tr>
<td></td>
<td><button>Install !!</button></td>
</tr>
</table>
</form>
<?php }
else {
echo auth_get_link();
} ?>
<?php include("foot.inc"); ?>

View File

@@ -0,0 +1,10 @@
</div>
<div id="footer">
<div class="badges">
<a href="http://www.php.net"><img src="images/php5-power-micro.png" alt="php5 logo"/></a>
<a href="http://validator.w3.org"><img src="images/xhtml10.png" alt="valid xhtml"/></a>
<a href="http://jigsaw.w3.org/css-validator"><img src="images/css2.png" alt="valid css2"/></a>
</div>
</div>
</body> </html>

View File

@@ -0,0 +1,53 @@
<?php
function auth_ok(){
return isset($_SESSION["authenticated"]) && $_SESSION["authenticated"] === true;
}
function auth_get_link(){
return '<a href="'.get_php_self().'?login=1">Authenticate to access this section</a>';
}
function get_php_self(){
return isset($_SERVER['PHP_SELF']) ? htmlentities(strip_tags($_SERVER['PHP_SELF'],''), ENT_QUOTES, 'UTF-8') : '';
}
// From apc.php
function auth_check() {
if ( isset($_GET["login"]) && DOMPDF_ADMIN_PASSWORD == "password" ) {
$_SESSION["auth_message"] = "The password must be changed in 'dompdf_config.custom.inc.php'";
return false;
}
else {
$_SESSION["auth_message"] = null;
}
if ( isset($_GET["login"]) || isset($_SERVER["PHP_AUTH_USER"]) ) {
if (!isset($_SERVER["PHP_AUTH_USER"]) ||
!isset($_SERVER["PHP_AUTH_PW"]) ||
$_SERVER["PHP_AUTH_USER"] != DOMPDF_ADMIN_USERNAME ||
$_SERVER["PHP_AUTH_PW"] != DOMPDF_ADMIN_PASSWORD) {
$PHP_SELF = get_php_self();
header('WWW-Authenticate: Basic realm="DOMPDF Login"');
header('HTTP/1.0 401 Unauthorized');
echo <<<EOB
<html><body>
<h1>Rejected!</h1>
<big>Wrong Username or Password!</big><br/>&nbsp;<br/>&nbsp;
<big><a href='$PHP_SELF'>Continue...</a></big>
</body></html>
EOB;
exit;
}
else {
$_SESSION["auth_message"] = null;
$_SESSION["authenticated"] = true;
return true;
}
}
}

View File

@@ -0,0 +1,54 @@
<?php
session_start();
require_once "../dompdf_config.inc.php";
require_once "functions.inc.php";
function li_arrow() {
return '<li style="list-style-image: url(\'images/arrow_0' . rand(1,6) . '.gif\');">';
}
function li_star() {
return '<li style="list-style-image: url(\'images/star_0' . rand(1,5) . '.gif\');">';
}
auth_check();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>dompdf - The PHP 5 HTML to PDF Converter</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="SHORTCUT ICON" href="images/favicon.ico"/>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<?php if (isset($_SESSION["auth_message"])) { ?>
<script type="text/javascript">
alert("<?php echo $_SESSION["auth_message"]; ?>");
</script>
<?php } ?>
</head>
<body>
<div id="header" class="bar">
<a href="index.php"><img id="logo" src="images/title.gif" alt="dompdf"/></a>
<a href="http://dompdf.github.com/" target="_blank">dompdf.github.com</a>
&mdash;
Send bug reports to <a href="http://code.google.com/p/dompdf/issues/list">the bug tracker</a>
&amp; support questions to <a href="http://groups.google.com/group/dompdf">Google Groups</a>.
</div>
<div id="left_col">
<ul>
<li style="list-style-image: url('images/star_02.gif');"><a href="index.php">Overview</a></li>
<li style="list-style-image: url('images/star_02.gif');"><a href="examples.php">Examples</a></li>
<li style="list-style-image: url('images/star_02.gif');"><a href="demo.php">Demo</a></li>
<li style="list-style-image: url('images/star_02.gif');"><a href="setup.php">Setup / Config</a></li>
<li style="list-style-image: url('images/star_02.gif');"><a href="fonts.php">Fonts</a></li>
</ul>
</div>
<div id="content">

Binary file not shown.

After

Width:  |  Height:  |  Size: 237 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 227 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 232 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 251 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 241 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 392 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 308 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 887 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 314 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 324 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 312 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 335 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 380 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 481 B

View File

@@ -0,0 +1,28 @@
<?php include("head.inc"); ?>
<a name="overview"> </a>
<h2>Overview</h2>
<p>dompdf is an HTML to PDF converter. At its heart, dompdf is (mostly)
CSS2.1 compliant HTML layout and rendering engine written in PHP. It is
a style-driven renderer: it will download and read external stylesheets,
inline style tags, and the style attributes of individual HTML elements. It
also supports most presentational HTML attributes.</p>
<p>PDF rendering is currently provided either by PDFLib (<a
href="http://www.pdflib.com">www.pdflib.com</a>) or by a bundled
version the R&amp;OS CPDF class written by Wayne Munro (<a
href="http://www.ros.co.nz/pdf/">www.ros.co.nz/pdf</a>). (Some
performance related changes have been made to the R&amp;OS class,
however). In order to use PDFLib with dompdf, the PDFLib PECL
extension is required. Using PDFLib improves performance and reduces
the memory requirements of dompdf somewhat, while the R&amp;OS CPDF class,
though slightly slower, eliminates any dependencies on external PDF
libraries.</p>
<p>Please note that dompdf works only with PHP 5. There are no plans for
a PHP 4 port. If your web host does not offer PHP 5, I suggest either pestering
them, or setting up your own PHP 5 box and using it to run dompdf. Your scripts
on your web host can redirect PDF requests to your PHP 5 box.</p>
<?php include("foot.inc"); ?>

View File

@@ -0,0 +1,154 @@
/*!
* jQuery JavaScript Library v1.4.2
* http://jquery.com/
*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* Includes Sizzle.js
* http://sizzlejs.com/
* Copyright 2010, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses.
*
* Date: Sat Feb 13 22:33:48 2010 -0500
*/
(function(A,w){function ma(){if(!c.isReady){try{s.documentElement.doScroll("left")}catch(a){setTimeout(ma,1);return}c.ready()}}function Qa(a,b){b.src?c.ajax({url:b.src,async:false,dataType:"script"}):c.globalEval(b.text||b.textContent||b.innerHTML||"");b.parentNode&&b.parentNode.removeChild(b)}function X(a,b,d,f,e,j){var i=a.length;if(typeof b==="object"){for(var o in b)X(a,o,b[o],f,e,d);return a}if(d!==w){f=!j&&f&&c.isFunction(d);for(o=0;o<i;o++)e(a[o],b,f?d.call(a[o],o,e(a[o],b)):d,j);return a}return i?
e(a[0],b):w}function J(){return(new Date).getTime()}function Y(){return false}function Z(){return true}function na(a,b,d){d[0].type=a;return c.event.handle.apply(b,d)}function oa(a){var b,d=[],f=[],e=arguments,j,i,o,k,n,r;i=c.data(this,"events");if(!(a.liveFired===this||!i||!i.live||a.button&&a.type==="click")){a.liveFired=this;var u=i.live.slice(0);for(k=0;k<u.length;k++){i=u[k];i.origType.replace(O,"")===a.type?f.push(i.selector):u.splice(k--,1)}j=c(a.target).closest(f,a.currentTarget);n=0;for(r=
j.length;n<r;n++)for(k=0;k<u.length;k++){i=u[k];if(j[n].selector===i.selector){o=j[n].elem;f=null;if(i.preType==="mouseenter"||i.preType==="mouseleave")f=c(a.relatedTarget).closest(i.selector)[0];if(!f||f!==o)d.push({elem:o,handleObj:i})}}n=0;for(r=d.length;n<r;n++){j=d[n];a.currentTarget=j.elem;a.data=j.handleObj.data;a.handleObj=j.handleObj;if(j.handleObj.origHandler.apply(j.elem,e)===false){b=false;break}}return b}}function pa(a,b){return"live."+(a&&a!=="*"?a+".":"")+b.replace(/\./g,"`").replace(/ /g,
"&")}function qa(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function ra(a,b){var d=0;b.each(function(){if(this.nodeName===(a[d]&&a[d].nodeName)){var f=c.data(a[d++]),e=c.data(this,f);if(f=f&&f.events){delete e.handle;e.events={};for(var j in f)for(var i in f[j])c.event.add(this,j,f[j][i],f[j][i].data)}}})}function sa(a,b,d){var f,e,j;b=b&&b[0]?b[0].ownerDocument||b[0]:s;if(a.length===1&&typeof a[0]==="string"&&a[0].length<512&&b===s&&!ta.test(a[0])&&(c.support.checkClone||!ua.test(a[0]))){e=
true;if(j=c.fragments[a[0]])if(j!==1)f=j}if(!f){f=b.createDocumentFragment();c.clean(a,b,f,d)}if(e)c.fragments[a[0]]=j?f:1;return{fragment:f,cacheable:e}}function K(a,b){var d={};c.each(va.concat.apply([],va.slice(0,b)),function(){d[this]=a});return d}function wa(a){return"scrollTo"in a&&a.document?a:a.nodeType===9?a.defaultView||a.parentWindow:false}var c=function(a,b){return new c.fn.init(a,b)},Ra=A.jQuery,Sa=A.$,s=A.document,T,Ta=/^[^<]*(<[\w\W]+>)[^>]*$|^#([\w-]+)$/,Ua=/^.[^:#\[\.,]*$/,Va=/\S/,
Wa=/^(\s|\u00A0)+|(\s|\u00A0)+$/g,Xa=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,P=navigator.userAgent,xa=false,Q=[],L,$=Object.prototype.toString,aa=Object.prototype.hasOwnProperty,ba=Array.prototype.push,R=Array.prototype.slice,ya=Array.prototype.indexOf;c.fn=c.prototype={init:function(a,b){var d,f;if(!a)return this;if(a.nodeType){this.context=this[0]=a;this.length=1;return this}if(a==="body"&&!b){this.context=s;this[0]=s.body;this.selector="body";this.length=1;return this}if(typeof a==="string")if((d=Ta.exec(a))&&
(d[1]||!b))if(d[1]){f=b?b.ownerDocument||b:s;if(a=Xa.exec(a))if(c.isPlainObject(b)){a=[s.createElement(a[1])];c.fn.attr.call(a,b,true)}else a=[f.createElement(a[1])];else{a=sa([d[1]],[f]);a=(a.cacheable?a.fragment.cloneNode(true):a.fragment).childNodes}return c.merge(this,a)}else{if(b=s.getElementById(d[2])){if(b.id!==d[2])return T.find(a);this.length=1;this[0]=b}this.context=s;this.selector=a;return this}else if(!b&&/^\w+$/.test(a)){this.selector=a;this.context=s;a=s.getElementsByTagName(a);return c.merge(this,
a)}else return!b||b.jquery?(b||T).find(a):c(b).find(a);else if(c.isFunction(a))return T.ready(a);if(a.selector!==w){this.selector=a.selector;this.context=a.context}return c.makeArray(a,this)},selector:"",jquery:"1.4.2",length:0,size:function(){return this.length},toArray:function(){return R.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this.slice(a)[0]:this[a]},pushStack:function(a,b,d){var f=c();c.isArray(a)?ba.apply(f,a):c.merge(f,a);f.prevObject=this;f.context=this.context;if(b===
"find")f.selector=this.selector+(this.selector?" ":"")+d;else if(b)f.selector=this.selector+"."+b+"("+d+")";return f},each:function(a,b){return c.each(this,a,b)},ready:function(a){c.bindReady();if(c.isReady)a.call(s,c);else Q&&Q.push(a);return this},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(R.apply(this,arguments),"slice",R.call(arguments).join(","))},map:function(a){return this.pushStack(c.map(this,
function(b,d){return a.call(b,d,b)}))},end:function(){return this.prevObject||c(null)},push:ba,sort:[].sort,splice:[].splice};c.fn.init.prototype=c.fn;c.extend=c.fn.extend=function(){var a=arguments[0]||{},b=1,d=arguments.length,f=false,e,j,i,o;if(typeof a==="boolean"){f=a;a=arguments[1]||{};b=2}if(typeof a!=="object"&&!c.isFunction(a))a={};if(d===b){a=this;--b}for(;b<d;b++)if((e=arguments[b])!=null)for(j in e){i=a[j];o=e[j];if(a!==o)if(f&&o&&(c.isPlainObject(o)||c.isArray(o))){i=i&&(c.isPlainObject(i)||
c.isArray(i))?i:c.isArray(o)?[]:{};a[j]=c.extend(f,i,o)}else if(o!==w)a[j]=o}return a};c.extend({noConflict:function(a){A.$=Sa;if(a)A.jQuery=Ra;return c},isReady:false,ready:function(){if(!c.isReady){if(!s.body)return setTimeout(c.ready,13);c.isReady=true;if(Q){for(var a,b=0;a=Q[b++];)a.call(s,c);Q=null}c.fn.triggerHandler&&c(s).triggerHandler("ready")}},bindReady:function(){if(!xa){xa=true;if(s.readyState==="complete")return c.ready();if(s.addEventListener){s.addEventListener("DOMContentLoaded",
L,false);A.addEventListener("load",c.ready,false)}else if(s.attachEvent){s.attachEvent("onreadystatechange",L);A.attachEvent("onload",c.ready);var a=false;try{a=A.frameElement==null}catch(b){}s.documentElement.doScroll&&a&&ma()}}},isFunction:function(a){return $.call(a)==="[object Function]"},isArray:function(a){return $.call(a)==="[object Array]"},isPlainObject:function(a){if(!a||$.call(a)!=="[object Object]"||a.nodeType||a.setInterval)return false;if(a.constructor&&!aa.call(a,"constructor")&&!aa.call(a.constructor.prototype,
"isPrototypeOf"))return false;var b;for(b in a);return b===w||aa.call(a,b)},isEmptyObject:function(a){for(var b in a)return false;return true},error:function(a){throw a;},parseJSON:function(a){if(typeof a!=="string"||!a)return null;a=c.trim(a);if(/^[\],:{}\s]*$/.test(a.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]").replace(/(?:^|:|,)(?:\s*\[)+/g,"")))return A.JSON&&A.JSON.parse?A.JSON.parse(a):(new Function("return "+
a))();else c.error("Invalid JSON: "+a)},noop:function(){},globalEval:function(a){if(a&&Va.test(a)){var b=s.getElementsByTagName("head")[0]||s.documentElement,d=s.createElement("script");d.type="text/javascript";if(c.support.scriptEval)d.appendChild(s.createTextNode(a));else d.text=a;b.insertBefore(d,b.firstChild);b.removeChild(d)}},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,b,d){var f,e=0,j=a.length,i=j===w||c.isFunction(a);if(d)if(i)for(f in a){if(b.apply(a[f],
d)===false)break}else for(;e<j;){if(b.apply(a[e++],d)===false)break}else if(i)for(f in a){if(b.call(a[f],f,a[f])===false)break}else for(d=a[0];e<j&&b.call(d,e,d)!==false;d=a[++e]);return a},trim:function(a){return(a||"").replace(Wa,"")},makeArray:function(a,b){b=b||[];if(a!=null)a.length==null||typeof a==="string"||c.isFunction(a)||typeof a!=="function"&&a.setInterval?ba.call(b,a):c.merge(b,a);return b},inArray:function(a,b){if(b.indexOf)return b.indexOf(a);for(var d=0,f=b.length;d<f;d++)if(b[d]===
a)return d;return-1},merge:function(a,b){var d=a.length,f=0;if(typeof b.length==="number")for(var e=b.length;f<e;f++)a[d++]=b[f];else for(;b[f]!==w;)a[d++]=b[f++];a.length=d;return a},grep:function(a,b,d){for(var f=[],e=0,j=a.length;e<j;e++)!d!==!b(a[e],e)&&f.push(a[e]);return f},map:function(a,b,d){for(var f=[],e,j=0,i=a.length;j<i;j++){e=b(a[j],j,d);if(e!=null)f[f.length]=e}return f.concat.apply([],f)},guid:1,proxy:function(a,b,d){if(arguments.length===2)if(typeof b==="string"){d=a;a=d[b];b=w}else if(b&&
!c.isFunction(b)){d=b;b=w}if(!b&&a)b=function(){return a.apply(d||this,arguments)};if(a)b.guid=a.guid=a.guid||b.guid||c.guid++;return b},uaMatch:function(a){a=a.toLowerCase();a=/(webkit)[ \/]([\w.]+)/.exec(a)||/(opera)(?:.*version)?[ \/]([\w.]+)/.exec(a)||/(msie) ([\w.]+)/.exec(a)||!/compatible/.test(a)&&/(mozilla)(?:.*? rv:([\w.]+))?/.exec(a)||[];return{browser:a[1]||"",version:a[2]||"0"}},browser:{}});P=c.uaMatch(P);if(P.browser){c.browser[P.browser]=true;c.browser.version=P.version}if(c.browser.webkit)c.browser.safari=
true;if(ya)c.inArray=function(a,b){return ya.call(b,a)};T=c(s);if(s.addEventListener)L=function(){s.removeEventListener("DOMContentLoaded",L,false);c.ready()};else if(s.attachEvent)L=function(){if(s.readyState==="complete"){s.detachEvent("onreadystatechange",L);c.ready()}};(function(){c.support={};var a=s.documentElement,b=s.createElement("script"),d=s.createElement("div"),f="script"+J();d.style.display="none";d.innerHTML=" <link/><table></table><a href='/a' style='color:red;float:left;opacity:.55;'>a</a><input type='checkbox'/>";
var e=d.getElementsByTagName("*"),j=d.getElementsByTagName("a")[0];if(!(!e||!e.length||!j)){c.support={leadingWhitespace:d.firstChild.nodeType===3,tbody:!d.getElementsByTagName("tbody").length,htmlSerialize:!!d.getElementsByTagName("link").length,style:/red/.test(j.getAttribute("style")),hrefNormalized:j.getAttribute("href")==="/a",opacity:/^0.55$/.test(j.style.opacity),cssFloat:!!j.style.cssFloat,checkOn:d.getElementsByTagName("input")[0].value==="on",optSelected:s.createElement("select").appendChild(s.createElement("option")).selected,
parentNode:d.removeChild(d.appendChild(s.createElement("div"))).parentNode===null,deleteExpando:true,checkClone:false,scriptEval:false,noCloneEvent:true,boxModel:null};b.type="text/javascript";try{b.appendChild(s.createTextNode("window."+f+"=1;"))}catch(i){}a.insertBefore(b,a.firstChild);if(A[f]){c.support.scriptEval=true;delete A[f]}try{delete b.test}catch(o){c.support.deleteExpando=false}a.removeChild(b);if(d.attachEvent&&d.fireEvent){d.attachEvent("onclick",function k(){c.support.noCloneEvent=
false;d.detachEvent("onclick",k)});d.cloneNode(true).fireEvent("onclick")}d=s.createElement("div");d.innerHTML="<input type='radio' name='radiotest' checked='checked'/>";a=s.createDocumentFragment();a.appendChild(d.firstChild);c.support.checkClone=a.cloneNode(true).cloneNode(true).lastChild.checked;c(function(){var k=s.createElement("div");k.style.width=k.style.paddingLeft="1px";s.body.appendChild(k);c.boxModel=c.support.boxModel=k.offsetWidth===2;s.body.removeChild(k).style.display="none"});a=function(k){var n=
s.createElement("div");k="on"+k;var r=k in n;if(!r){n.setAttribute(k,"return;");r=typeof n[k]==="function"}return r};c.support.submitBubbles=a("submit");c.support.changeBubbles=a("change");a=b=d=e=j=null}})();c.props={"for":"htmlFor","class":"className",readonly:"readOnly",maxlength:"maxLength",cellspacing:"cellSpacing",rowspan:"rowSpan",colspan:"colSpan",tabindex:"tabIndex",usemap:"useMap",frameborder:"frameBorder"};var G="jQuery"+J(),Ya=0,za={};c.extend({cache:{},expando:G,noData:{embed:true,object:true,
applet:true},data:function(a,b,d){if(!(a.nodeName&&c.noData[a.nodeName.toLowerCase()])){a=a==A?za:a;var f=a[G],e=c.cache;if(!f&&typeof b==="string"&&d===w)return null;f||(f=++Ya);if(typeof b==="object"){a[G]=f;e[f]=c.extend(true,{},b)}else if(!e[f]){a[G]=f;e[f]={}}a=e[f];if(d!==w)a[b]=d;return typeof b==="string"?a[b]:a}},removeData:function(a,b){if(!(a.nodeName&&c.noData[a.nodeName.toLowerCase()])){a=a==A?za:a;var d=a[G],f=c.cache,e=f[d];if(b){if(e){delete e[b];c.isEmptyObject(e)&&c.removeData(a)}}else{if(c.support.deleteExpando)delete a[c.expando];
else a.removeAttribute&&a.removeAttribute(c.expando);delete f[d]}}}});c.fn.extend({data:function(a,b){if(typeof a==="undefined"&&this.length)return c.data(this[0]);else if(typeof a==="object")return this.each(function(){c.data(this,a)});var d=a.split(".");d[1]=d[1]?"."+d[1]:"";if(b===w){var f=this.triggerHandler("getData"+d[1]+"!",[d[0]]);if(f===w&&this.length)f=c.data(this[0],a);return f===w&&d[1]?this.data(d[0]):f}else return this.trigger("setData"+d[1]+"!",[d[0],b]).each(function(){c.data(this,
a,b)})},removeData:function(a){return this.each(function(){c.removeData(this,a)})}});c.extend({queue:function(a,b,d){if(a){b=(b||"fx")+"queue";var f=c.data(a,b);if(!d)return f||[];if(!f||c.isArray(d))f=c.data(a,b,c.makeArray(d));else f.push(d);return f}},dequeue:function(a,b){b=b||"fx";var d=c.queue(a,b),f=d.shift();if(f==="inprogress")f=d.shift();if(f){b==="fx"&&d.unshift("inprogress");f.call(a,function(){c.dequeue(a,b)})}}});c.fn.extend({queue:function(a,b){if(typeof a!=="string"){b=a;a="fx"}if(b===
w)return c.queue(this[0],a);return this.each(function(){var d=c.queue(this,a,b);a==="fx"&&d[0]!=="inprogress"&&c.dequeue(this,a)})},dequeue:function(a){return this.each(function(){c.dequeue(this,a)})},delay:function(a,b){a=c.fx?c.fx.speeds[a]||a:a;b=b||"fx";return this.queue(b,function(){var d=this;setTimeout(function(){c.dequeue(d,b)},a)})},clearQueue:function(a){return this.queue(a||"fx",[])}});var Aa=/[\n\t]/g,ca=/\s+/,Za=/\r/g,$a=/href|src|style/,ab=/(button|input)/i,bb=/(button|input|object|select|textarea)/i,
cb=/^(a|area)$/i,Ba=/radio|checkbox/;c.fn.extend({attr:function(a,b){return X(this,a,b,true,c.attr)},removeAttr:function(a){return this.each(function(){c.attr(this,a,"");this.nodeType===1&&this.removeAttribute(a)})},addClass:function(a){if(c.isFunction(a))return this.each(function(n){var r=c(this);r.addClass(a.call(this,n,r.attr("class")))});if(a&&typeof a==="string")for(var b=(a||"").split(ca),d=0,f=this.length;d<f;d++){var e=this[d];if(e.nodeType===1)if(e.className){for(var j=" "+e.className+" ",
i=e.className,o=0,k=b.length;o<k;o++)if(j.indexOf(" "+b[o]+" ")<0)i+=" "+b[o];e.className=c.trim(i)}else e.className=a}return this},removeClass:function(a){if(c.isFunction(a))return this.each(function(k){var n=c(this);n.removeClass(a.call(this,k,n.attr("class")))});if(a&&typeof a==="string"||a===w)for(var b=(a||"").split(ca),d=0,f=this.length;d<f;d++){var e=this[d];if(e.nodeType===1&&e.className)if(a){for(var j=(" "+e.className+" ").replace(Aa," "),i=0,o=b.length;i<o;i++)j=j.replace(" "+b[i]+" ",
" ");e.className=c.trim(j)}else e.className=""}return this},toggleClass:function(a,b){var d=typeof a,f=typeof b==="boolean";if(c.isFunction(a))return this.each(function(e){var j=c(this);j.toggleClass(a.call(this,e,j.attr("class"),b),b)});return this.each(function(){if(d==="string")for(var e,j=0,i=c(this),o=b,k=a.split(ca);e=k[j++];){o=f?o:!i.hasClass(e);i[o?"addClass":"removeClass"](e)}else if(d==="undefined"||d==="boolean"){this.className&&c.data(this,"__className__",this.className);this.className=
this.className||a===false?"":c.data(this,"__className__")||""}})},hasClass:function(a){a=" "+a+" ";for(var b=0,d=this.length;b<d;b++)if((" "+this[b].className+" ").replace(Aa," ").indexOf(a)>-1)return true;return false},val:function(a){if(a===w){var b=this[0];if(b){if(c.nodeName(b,"option"))return(b.attributes.value||{}).specified?b.value:b.text;if(c.nodeName(b,"select")){var d=b.selectedIndex,f=[],e=b.options;b=b.type==="select-one";if(d<0)return null;var j=b?d:0;for(d=b?d+1:e.length;j<d;j++){var i=
e[j];if(i.selected){a=c(i).val();if(b)return a;f.push(a)}}return f}if(Ba.test(b.type)&&!c.support.checkOn)return b.getAttribute("value")===null?"on":b.value;return(b.value||"").replace(Za,"")}return w}var o=c.isFunction(a);return this.each(function(k){var n=c(this),r=a;if(this.nodeType===1){if(o)r=a.call(this,k,n.val());if(typeof r==="number")r+="";if(c.isArray(r)&&Ba.test(this.type))this.checked=c.inArray(n.val(),r)>=0;else if(c.nodeName(this,"select")){var u=c.makeArray(r);c("option",this).each(function(){this.selected=
c.inArray(c(this).val(),u)>=0});if(!u.length)this.selectedIndex=-1}else this.value=r}})}});c.extend({attrFn:{val:true,css:true,html:true,text:true,data:true,width:true,height:true,offset:true},attr:function(a,b,d,f){if(!a||a.nodeType===3||a.nodeType===8)return w;if(f&&b in c.attrFn)return c(a)[b](d);f=a.nodeType!==1||!c.isXMLDoc(a);var e=d!==w;b=f&&c.props[b]||b;if(a.nodeType===1){var j=$a.test(b);if(b in a&&f&&!j){if(e){b==="type"&&ab.test(a.nodeName)&&a.parentNode&&c.error("type property can't be changed");
a[b]=d}if(c.nodeName(a,"form")&&a.getAttributeNode(b))return a.getAttributeNode(b).nodeValue;if(b==="tabIndex")return(b=a.getAttributeNode("tabIndex"))&&b.specified?b.value:bb.test(a.nodeName)||cb.test(a.nodeName)&&a.href?0:w;return a[b]}if(!c.support.style&&f&&b==="style"){if(e)a.style.cssText=""+d;return a.style.cssText}e&&a.setAttribute(b,""+d);a=!c.support.hrefNormalized&&f&&j?a.getAttribute(b,2):a.getAttribute(b);return a===null?w:a}return c.style(a,b,d)}});var O=/\.(.*)$/,db=function(a){return a.replace(/[^\w\s\.\|`]/g,
function(b){return"\\"+b})};c.event={add:function(a,b,d,f){if(!(a.nodeType===3||a.nodeType===8)){if(a.setInterval&&a!==A&&!a.frameElement)a=A;var e,j;if(d.handler){e=d;d=e.handler}if(!d.guid)d.guid=c.guid++;if(j=c.data(a)){var i=j.events=j.events||{},o=j.handle;if(!o)j.handle=o=function(){return typeof c!=="undefined"&&!c.event.triggered?c.event.handle.apply(o.elem,arguments):w};o.elem=a;b=b.split(" ");for(var k,n=0,r;k=b[n++];){j=e?c.extend({},e):{handler:d,data:f};if(k.indexOf(".")>-1){r=k.split(".");
k=r.shift();j.namespace=r.slice(0).sort().join(".")}else{r=[];j.namespace=""}j.type=k;j.guid=d.guid;var u=i[k],z=c.event.special[k]||{};if(!u){u=i[k]=[];if(!z.setup||z.setup.call(a,f,r,o)===false)if(a.addEventListener)a.addEventListener(k,o,false);else a.attachEvent&&a.attachEvent("on"+k,o)}if(z.add){z.add.call(a,j);if(!j.handler.guid)j.handler.guid=d.guid}u.push(j);c.event.global[k]=true}a=null}}},global:{},remove:function(a,b,d,f){if(!(a.nodeType===3||a.nodeType===8)){var e,j=0,i,o,k,n,r,u,z=c.data(a),
C=z&&z.events;if(z&&C){if(b&&b.type){d=b.handler;b=b.type}if(!b||typeof b==="string"&&b.charAt(0)==="."){b=b||"";for(e in C)c.event.remove(a,e+b)}else{for(b=b.split(" ");e=b[j++];){n=e;i=e.indexOf(".")<0;o=[];if(!i){o=e.split(".");e=o.shift();k=new RegExp("(^|\\.)"+c.map(o.slice(0).sort(),db).join("\\.(?:.*\\.)?")+"(\\.|$)")}if(r=C[e])if(d){n=c.event.special[e]||{};for(B=f||0;B<r.length;B++){u=r[B];if(d.guid===u.guid){if(i||k.test(u.namespace)){f==null&&r.splice(B--,1);n.remove&&n.remove.call(a,u)}if(f!=
null)break}}if(r.length===0||f!=null&&r.length===1){if(!n.teardown||n.teardown.call(a,o)===false)Ca(a,e,z.handle);delete C[e]}}else for(var B=0;B<r.length;B++){u=r[B];if(i||k.test(u.namespace)){c.event.remove(a,n,u.handler,B);r.splice(B--,1)}}}if(c.isEmptyObject(C)){if(b=z.handle)b.elem=null;delete z.events;delete z.handle;c.isEmptyObject(z)&&c.removeData(a)}}}}},trigger:function(a,b,d,f){var e=a.type||a;if(!f){a=typeof a==="object"?a[G]?a:c.extend(c.Event(e),a):c.Event(e);if(e.indexOf("!")>=0){a.type=
e=e.slice(0,-1);a.exclusive=true}if(!d){a.stopPropagation();c.event.global[e]&&c.each(c.cache,function(){this.events&&this.events[e]&&c.event.trigger(a,b,this.handle.elem)})}if(!d||d.nodeType===3||d.nodeType===8)return w;a.result=w;a.target=d;b=c.makeArray(b);b.unshift(a)}a.currentTarget=d;(f=c.data(d,"handle"))&&f.apply(d,b);f=d.parentNode||d.ownerDocument;try{if(!(d&&d.nodeName&&c.noData[d.nodeName.toLowerCase()]))if(d["on"+e]&&d["on"+e].apply(d,b)===false)a.result=false}catch(j){}if(!a.isPropagationStopped()&&
f)c.event.trigger(a,b,f,true);else if(!a.isDefaultPrevented()){f=a.target;var i,o=c.nodeName(f,"a")&&e==="click",k=c.event.special[e]||{};if((!k._default||k._default.call(d,a)===false)&&!o&&!(f&&f.nodeName&&c.noData[f.nodeName.toLowerCase()])){try{if(f[e]){if(i=f["on"+e])f["on"+e]=null;c.event.triggered=true;f[e]()}}catch(n){}if(i)f["on"+e]=i;c.event.triggered=false}}},handle:function(a){var b,d,f,e;a=arguments[0]=c.event.fix(a||A.event);a.currentTarget=this;b=a.type.indexOf(".")<0&&!a.exclusive;
if(!b){d=a.type.split(".");a.type=d.shift();f=new RegExp("(^|\\.)"+d.slice(0).sort().join("\\.(?:.*\\.)?")+"(\\.|$)")}e=c.data(this,"events");d=e[a.type];if(e&&d){d=d.slice(0);e=0;for(var j=d.length;e<j;e++){var i=d[e];if(b||f.test(i.namespace)){a.handler=i.handler;a.data=i.data;a.handleObj=i;i=i.handler.apply(this,arguments);if(i!==w){a.result=i;if(i===false){a.preventDefault();a.stopPropagation()}}if(a.isImmediatePropagationStopped())break}}}return a.result},props:"altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget data detail eventPhase fromElement handler keyCode layerX layerY metaKey newValue offsetX offsetY originalTarget pageX pageY prevValue relatedNode relatedTarget screenX screenY shiftKey srcElement target toElement view wheelDelta which".split(" "),
fix:function(a){if(a[G])return a;var b=a;a=c.Event(b);for(var d=this.props.length,f;d;){f=this.props[--d];a[f]=b[f]}if(!a.target)a.target=a.srcElement||s;if(a.target.nodeType===3)a.target=a.target.parentNode;if(!a.relatedTarget&&a.fromElement)a.relatedTarget=a.fromElement===a.target?a.toElement:a.fromElement;if(a.pageX==null&&a.clientX!=null){b=s.documentElement;d=s.body;a.pageX=a.clientX+(b&&b.scrollLeft||d&&d.scrollLeft||0)-(b&&b.clientLeft||d&&d.clientLeft||0);a.pageY=a.clientY+(b&&b.scrollTop||
d&&d.scrollTop||0)-(b&&b.clientTop||d&&d.clientTop||0)}if(!a.which&&(a.charCode||a.charCode===0?a.charCode:a.keyCode))a.which=a.charCode||a.keyCode;if(!a.metaKey&&a.ctrlKey)a.metaKey=a.ctrlKey;if(!a.which&&a.button!==w)a.which=a.button&1?1:a.button&2?3:a.button&4?2:0;return a},guid:1E8,proxy:c.proxy,special:{ready:{setup:c.bindReady,teardown:c.noop},live:{add:function(a){c.event.add(this,a.origType,c.extend({},a,{handler:oa}))},remove:function(a){var b=true,d=a.origType.replace(O,"");c.each(c.data(this,
"events").live||[],function(){if(d===this.origType.replace(O,""))return b=false});b&&c.event.remove(this,a.origType,oa)}},beforeunload:{setup:function(a,b,d){if(this.setInterval)this.onbeforeunload=d;return false},teardown:function(a,b){if(this.onbeforeunload===b)this.onbeforeunload=null}}}};var Ca=s.removeEventListener?function(a,b,d){a.removeEventListener(b,d,false)}:function(a,b,d){a.detachEvent("on"+b,d)};c.Event=function(a){if(!this.preventDefault)return new c.Event(a);if(a&&a.type){this.originalEvent=
a;this.type=a.type}else this.type=a;this.timeStamp=J();this[G]=true};c.Event.prototype={preventDefault:function(){this.isDefaultPrevented=Z;var a=this.originalEvent;if(a){a.preventDefault&&a.preventDefault();a.returnValue=false}},stopPropagation:function(){this.isPropagationStopped=Z;var a=this.originalEvent;if(a){a.stopPropagation&&a.stopPropagation();a.cancelBubble=true}},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=Z;this.stopPropagation()},isDefaultPrevented:Y,isPropagationStopped:Y,
isImmediatePropagationStopped:Y};var Da=function(a){var b=a.relatedTarget;try{for(;b&&b!==this;)b=b.parentNode;if(b!==this){a.type=a.data;c.event.handle.apply(this,arguments)}}catch(d){}},Ea=function(a){a.type=a.data;c.event.handle.apply(this,arguments)};c.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){c.event.special[a]={setup:function(d){c.event.add(this,b,d&&d.selector?Ea:Da,a)},teardown:function(d){c.event.remove(this,b,d&&d.selector?Ea:Da)}}});if(!c.support.submitBubbles)c.event.special.submit=
{setup:function(){if(this.nodeName.toLowerCase()!=="form"){c.event.add(this,"click.specialSubmit",function(a){var b=a.target,d=b.type;if((d==="submit"||d==="image")&&c(b).closest("form").length)return na("submit",this,arguments)});c.event.add(this,"keypress.specialSubmit",function(a){var b=a.target,d=b.type;if((d==="text"||d==="password")&&c(b).closest("form").length&&a.keyCode===13)return na("submit",this,arguments)})}else return false},teardown:function(){c.event.remove(this,".specialSubmit")}};
if(!c.support.changeBubbles){var da=/textarea|input|select/i,ea,Fa=function(a){var b=a.type,d=a.value;if(b==="radio"||b==="checkbox")d=a.checked;else if(b==="select-multiple")d=a.selectedIndex>-1?c.map(a.options,function(f){return f.selected}).join("-"):"";else if(a.nodeName.toLowerCase()==="select")d=a.selectedIndex;return d},fa=function(a,b){var d=a.target,f,e;if(!(!da.test(d.nodeName)||d.readOnly)){f=c.data(d,"_change_data");e=Fa(d);if(a.type!=="focusout"||d.type!=="radio")c.data(d,"_change_data",
e);if(!(f===w||e===f))if(f!=null||e){a.type="change";return c.event.trigger(a,b,d)}}};c.event.special.change={filters:{focusout:fa,click:function(a){var b=a.target,d=b.type;if(d==="radio"||d==="checkbox"||b.nodeName.toLowerCase()==="select")return fa.call(this,a)},keydown:function(a){var b=a.target,d=b.type;if(a.keyCode===13&&b.nodeName.toLowerCase()!=="textarea"||a.keyCode===32&&(d==="checkbox"||d==="radio")||d==="select-multiple")return fa.call(this,a)},beforeactivate:function(a){a=a.target;c.data(a,
"_change_data",Fa(a))}},setup:function(){if(this.type==="file")return false;for(var a in ea)c.event.add(this,a+".specialChange",ea[a]);return da.test(this.nodeName)},teardown:function(){c.event.remove(this,".specialChange");return da.test(this.nodeName)}};ea=c.event.special.change.filters}s.addEventListener&&c.each({focus:"focusin",blur:"focusout"},function(a,b){function d(f){f=c.event.fix(f);f.type=b;return c.event.handle.call(this,f)}c.event.special[b]={setup:function(){this.addEventListener(a,
d,true)},teardown:function(){this.removeEventListener(a,d,true)}}});c.each(["bind","one"],function(a,b){c.fn[b]=function(d,f,e){if(typeof d==="object"){for(var j in d)this[b](j,f,d[j],e);return this}if(c.isFunction(f)){e=f;f=w}var i=b==="one"?c.proxy(e,function(k){c(this).unbind(k,i);return e.apply(this,arguments)}):e;if(d==="unload"&&b!=="one")this.one(d,f,e);else{j=0;for(var o=this.length;j<o;j++)c.event.add(this[j],d,i,f)}return this}});c.fn.extend({unbind:function(a,b){if(typeof a==="object"&&
!a.preventDefault)for(var d in a)this.unbind(d,a[d]);else{d=0;for(var f=this.length;d<f;d++)c.event.remove(this[d],a,b)}return this},delegate:function(a,b,d,f){return this.live(b,d,f,a)},undelegate:function(a,b,d){return arguments.length===0?this.unbind("live"):this.die(b,null,d,a)},trigger:function(a,b){return this.each(function(){c.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0]){a=c.Event(a);a.preventDefault();a.stopPropagation();c.event.trigger(a,b,this[0]);return a.result}},
toggle:function(a){for(var b=arguments,d=1;d<b.length;)c.proxy(a,b[d++]);return this.click(c.proxy(a,function(f){var e=(c.data(this,"lastToggle"+a.guid)||0)%d;c.data(this,"lastToggle"+a.guid,e+1);f.preventDefault();return b[e].apply(this,arguments)||false}))},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}});var Ga={focus:"focusin",blur:"focusout",mouseenter:"mouseover",mouseleave:"mouseout"};c.each(["live","die"],function(a,b){c.fn[b]=function(d,f,e,j){var i,o=0,k,n,r=j||this.selector,
u=j?this:c(this.context);if(c.isFunction(f)){e=f;f=w}for(d=(d||"").split(" ");(i=d[o++])!=null;){j=O.exec(i);k="";if(j){k=j[0];i=i.replace(O,"")}if(i==="hover")d.push("mouseenter"+k,"mouseleave"+k);else{n=i;if(i==="focus"||i==="blur"){d.push(Ga[i]+k);i+=k}else i=(Ga[i]||i)+k;b==="live"?u.each(function(){c.event.add(this,pa(i,r),{data:f,selector:r,handler:e,origType:i,origHandler:e,preType:n})}):u.unbind(pa(i,r),e)}}return this}});c.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error".split(" "),
function(a,b){c.fn[b]=function(d){return d?this.bind(b,d):this.trigger(b)};if(c.attrFn)c.attrFn[b]=true});A.attachEvent&&!A.addEventListener&&A.attachEvent("onunload",function(){for(var a in c.cache)if(c.cache[a].handle)try{c.event.remove(c.cache[a].handle.elem)}catch(b){}});(function(){function a(g){for(var h="",l,m=0;g[m];m++){l=g[m];if(l.nodeType===3||l.nodeType===4)h+=l.nodeValue;else if(l.nodeType!==8)h+=a(l.childNodes)}return h}function b(g,h,l,m,q,p){q=0;for(var v=m.length;q<v;q++){var t=m[q];
if(t){t=t[g];for(var y=false;t;){if(t.sizcache===l){y=m[t.sizset];break}if(t.nodeType===1&&!p){t.sizcache=l;t.sizset=q}if(t.nodeName.toLowerCase()===h){y=t;break}t=t[g]}m[q]=y}}}function d(g,h,l,m,q,p){q=0;for(var v=m.length;q<v;q++){var t=m[q];if(t){t=t[g];for(var y=false;t;){if(t.sizcache===l){y=m[t.sizset];break}if(t.nodeType===1){if(!p){t.sizcache=l;t.sizset=q}if(typeof h!=="string"){if(t===h){y=true;break}}else if(k.filter(h,[t]).length>0){y=t;break}}t=t[g]}m[q]=y}}}var f=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,
e=0,j=Object.prototype.toString,i=false,o=true;[0,0].sort(function(){o=false;return 0});var k=function(g,h,l,m){l=l||[];var q=h=h||s;if(h.nodeType!==1&&h.nodeType!==9)return[];if(!g||typeof g!=="string")return l;for(var p=[],v,t,y,S,H=true,M=x(h),I=g;(f.exec(""),v=f.exec(I))!==null;){I=v[3];p.push(v[1]);if(v[2]){S=v[3];break}}if(p.length>1&&r.exec(g))if(p.length===2&&n.relative[p[0]])t=ga(p[0]+p[1],h);else for(t=n.relative[p[0]]?[h]:k(p.shift(),h);p.length;){g=p.shift();if(n.relative[g])g+=p.shift();
t=ga(g,t)}else{if(!m&&p.length>1&&h.nodeType===9&&!M&&n.match.ID.test(p[0])&&!n.match.ID.test(p[p.length-1])){v=k.find(p.shift(),h,M);h=v.expr?k.filter(v.expr,v.set)[0]:v.set[0]}if(h){v=m?{expr:p.pop(),set:z(m)}:k.find(p.pop(),p.length===1&&(p[0]==="~"||p[0]==="+")&&h.parentNode?h.parentNode:h,M);t=v.expr?k.filter(v.expr,v.set):v.set;if(p.length>0)y=z(t);else H=false;for(;p.length;){var D=p.pop();v=D;if(n.relative[D])v=p.pop();else D="";if(v==null)v=h;n.relative[D](y,v,M)}}else y=[]}y||(y=t);y||k.error(D||
g);if(j.call(y)==="[object Array]")if(H)if(h&&h.nodeType===1)for(g=0;y[g]!=null;g++){if(y[g]&&(y[g]===true||y[g].nodeType===1&&E(h,y[g])))l.push(t[g])}else for(g=0;y[g]!=null;g++)y[g]&&y[g].nodeType===1&&l.push(t[g]);else l.push.apply(l,y);else z(y,l);if(S){k(S,q,l,m);k.uniqueSort(l)}return l};k.uniqueSort=function(g){if(B){i=o;g.sort(B);if(i)for(var h=1;h<g.length;h++)g[h]===g[h-1]&&g.splice(h--,1)}return g};k.matches=function(g,h){return k(g,null,null,h)};k.find=function(g,h,l){var m,q;if(!g)return[];
for(var p=0,v=n.order.length;p<v;p++){var t=n.order[p];if(q=n.leftMatch[t].exec(g)){var y=q[1];q.splice(1,1);if(y.substr(y.length-1)!=="\\"){q[1]=(q[1]||"").replace(/\\/g,"");m=n.find[t](q,h,l);if(m!=null){g=g.replace(n.match[t],"");break}}}}m||(m=h.getElementsByTagName("*"));return{set:m,expr:g}};k.filter=function(g,h,l,m){for(var q=g,p=[],v=h,t,y,S=h&&h[0]&&x(h[0]);g&&h.length;){for(var H in n.filter)if((t=n.leftMatch[H].exec(g))!=null&&t[2]){var M=n.filter[H],I,D;D=t[1];y=false;t.splice(1,1);if(D.substr(D.length-
1)!=="\\"){if(v===p)p=[];if(n.preFilter[H])if(t=n.preFilter[H](t,v,l,p,m,S)){if(t===true)continue}else y=I=true;if(t)for(var U=0;(D=v[U])!=null;U++)if(D){I=M(D,t,U,v);var Ha=m^!!I;if(l&&I!=null)if(Ha)y=true;else v[U]=false;else if(Ha){p.push(D);y=true}}if(I!==w){l||(v=p);g=g.replace(n.match[H],"");if(!y)return[];break}}}if(g===q)if(y==null)k.error(g);else break;q=g}return v};k.error=function(g){throw"Syntax error, unrecognized expression: "+g;};var n=k.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF-]|\\.)+)/,
CLASS:/\.((?:[\w\u00c0-\uFFFF-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF-]|\\.)+)\s*(?:(\S?=)\s*(['"]*)(.*?)\3|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\((even|odd|[\dn+-]*)\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(g){return g.getAttribute("href")}},
relative:{"+":function(g,h){var l=typeof h==="string",m=l&&!/\W/.test(h);l=l&&!m;if(m)h=h.toLowerCase();m=0;for(var q=g.length,p;m<q;m++)if(p=g[m]){for(;(p=p.previousSibling)&&p.nodeType!==1;);g[m]=l||p&&p.nodeName.toLowerCase()===h?p||false:p===h}l&&k.filter(h,g,true)},">":function(g,h){var l=typeof h==="string";if(l&&!/\W/.test(h)){h=h.toLowerCase();for(var m=0,q=g.length;m<q;m++){var p=g[m];if(p){l=p.parentNode;g[m]=l.nodeName.toLowerCase()===h?l:false}}}else{m=0;for(q=g.length;m<q;m++)if(p=g[m])g[m]=
l?p.parentNode:p.parentNode===h;l&&k.filter(h,g,true)}},"":function(g,h,l){var m=e++,q=d;if(typeof h==="string"&&!/\W/.test(h)){var p=h=h.toLowerCase();q=b}q("parentNode",h,m,g,p,l)},"~":function(g,h,l){var m=e++,q=d;if(typeof h==="string"&&!/\W/.test(h)){var p=h=h.toLowerCase();q=b}q("previousSibling",h,m,g,p,l)}},find:{ID:function(g,h,l){if(typeof h.getElementById!=="undefined"&&!l)return(g=h.getElementById(g[1]))?[g]:[]},NAME:function(g,h){if(typeof h.getElementsByName!=="undefined"){var l=[];
h=h.getElementsByName(g[1]);for(var m=0,q=h.length;m<q;m++)h[m].getAttribute("name")===g[1]&&l.push(h[m]);return l.length===0?null:l}},TAG:function(g,h){return h.getElementsByTagName(g[1])}},preFilter:{CLASS:function(g,h,l,m,q,p){g=" "+g[1].replace(/\\/g,"")+" ";if(p)return g;p=0;for(var v;(v=h[p])!=null;p++)if(v)if(q^(v.className&&(" "+v.className+" ").replace(/[\t\n]/g," ").indexOf(g)>=0))l||m.push(v);else if(l)h[p]=false;return false},ID:function(g){return g[1].replace(/\\/g,"")},TAG:function(g){return g[1].toLowerCase()},
CHILD:function(g){if(g[1]==="nth"){var h=/(-?)(\d*)n((?:\+|-)?\d*)/.exec(g[2]==="even"&&"2n"||g[2]==="odd"&&"2n+1"||!/\D/.test(g[2])&&"0n+"+g[2]||g[2]);g[2]=h[1]+(h[2]||1)-0;g[3]=h[3]-0}g[0]=e++;return g},ATTR:function(g,h,l,m,q,p){h=g[1].replace(/\\/g,"");if(!p&&n.attrMap[h])g[1]=n.attrMap[h];if(g[2]==="~=")g[4]=" "+g[4]+" ";return g},PSEUDO:function(g,h,l,m,q){if(g[1]==="not")if((f.exec(g[3])||"").length>1||/^\w/.test(g[3]))g[3]=k(g[3],null,null,h);else{g=k.filter(g[3],h,l,true^q);l||m.push.apply(m,
g);return false}else if(n.match.POS.test(g[0])||n.match.CHILD.test(g[0]))return true;return g},POS:function(g){g.unshift(true);return g}},filters:{enabled:function(g){return g.disabled===false&&g.type!=="hidden"},disabled:function(g){return g.disabled===true},checked:function(g){return g.checked===true},selected:function(g){return g.selected===true},parent:function(g){return!!g.firstChild},empty:function(g){return!g.firstChild},has:function(g,h,l){return!!k(l[3],g).length},header:function(g){return/h\d/i.test(g.nodeName)},
text:function(g){return"text"===g.type},radio:function(g){return"radio"===g.type},checkbox:function(g){return"checkbox"===g.type},file:function(g){return"file"===g.type},password:function(g){return"password"===g.type},submit:function(g){return"submit"===g.type},image:function(g){return"image"===g.type},reset:function(g){return"reset"===g.type},button:function(g){return"button"===g.type||g.nodeName.toLowerCase()==="button"},input:function(g){return/input|select|textarea|button/i.test(g.nodeName)}},
setFilters:{first:function(g,h){return h===0},last:function(g,h,l,m){return h===m.length-1},even:function(g,h){return h%2===0},odd:function(g,h){return h%2===1},lt:function(g,h,l){return h<l[3]-0},gt:function(g,h,l){return h>l[3]-0},nth:function(g,h,l){return l[3]-0===h},eq:function(g,h,l){return l[3]-0===h}},filter:{PSEUDO:function(g,h,l,m){var q=h[1],p=n.filters[q];if(p)return p(g,l,h,m);else if(q==="contains")return(g.textContent||g.innerText||a([g])||"").indexOf(h[3])>=0;else if(q==="not"){h=
h[3];l=0;for(m=h.length;l<m;l++)if(h[l]===g)return false;return true}else k.error("Syntax error, unrecognized expression: "+q)},CHILD:function(g,h){var l=h[1],m=g;switch(l){case "only":case "first":for(;m=m.previousSibling;)if(m.nodeType===1)return false;if(l==="first")return true;m=g;case "last":for(;m=m.nextSibling;)if(m.nodeType===1)return false;return true;case "nth":l=h[2];var q=h[3];if(l===1&&q===0)return true;h=h[0];var p=g.parentNode;if(p&&(p.sizcache!==h||!g.nodeIndex)){var v=0;for(m=p.firstChild;m;m=
m.nextSibling)if(m.nodeType===1)m.nodeIndex=++v;p.sizcache=h}g=g.nodeIndex-q;return l===0?g===0:g%l===0&&g/l>=0}},ID:function(g,h){return g.nodeType===1&&g.getAttribute("id")===h},TAG:function(g,h){return h==="*"&&g.nodeType===1||g.nodeName.toLowerCase()===h},CLASS:function(g,h){return(" "+(g.className||g.getAttribute("class"))+" ").indexOf(h)>-1},ATTR:function(g,h){var l=h[1];g=n.attrHandle[l]?n.attrHandle[l](g):g[l]!=null?g[l]:g.getAttribute(l);l=g+"";var m=h[2];h=h[4];return g==null?m==="!=":m===
"="?l===h:m==="*="?l.indexOf(h)>=0:m==="~="?(" "+l+" ").indexOf(h)>=0:!h?l&&g!==false:m==="!="?l!==h:m==="^="?l.indexOf(h)===0:m==="$="?l.substr(l.length-h.length)===h:m==="|="?l===h||l.substr(0,h.length+1)===h+"-":false},POS:function(g,h,l,m){var q=n.setFilters[h[2]];if(q)return q(g,l,h,m)}}},r=n.match.POS;for(var u in n.match){n.match[u]=new RegExp(n.match[u].source+/(?![^\[]*\])(?![^\(]*\))/.source);n.leftMatch[u]=new RegExp(/(^(?:.|\r|\n)*?)/.source+n.match[u].source.replace(/\\(\d+)/g,function(g,
h){return"\\"+(h-0+1)}))}var z=function(g,h){g=Array.prototype.slice.call(g,0);if(h){h.push.apply(h,g);return h}return g};try{Array.prototype.slice.call(s.documentElement.childNodes,0)}catch(C){z=function(g,h){h=h||[];if(j.call(g)==="[object Array]")Array.prototype.push.apply(h,g);else if(typeof g.length==="number")for(var l=0,m=g.length;l<m;l++)h.push(g[l]);else for(l=0;g[l];l++)h.push(g[l]);return h}}var B;if(s.documentElement.compareDocumentPosition)B=function(g,h){if(!g.compareDocumentPosition||
!h.compareDocumentPosition){if(g==h)i=true;return g.compareDocumentPosition?-1:1}g=g.compareDocumentPosition(h)&4?-1:g===h?0:1;if(g===0)i=true;return g};else if("sourceIndex"in s.documentElement)B=function(g,h){if(!g.sourceIndex||!h.sourceIndex){if(g==h)i=true;return g.sourceIndex?-1:1}g=g.sourceIndex-h.sourceIndex;if(g===0)i=true;return g};else if(s.createRange)B=function(g,h){if(!g.ownerDocument||!h.ownerDocument){if(g==h)i=true;return g.ownerDocument?-1:1}var l=g.ownerDocument.createRange(),m=
h.ownerDocument.createRange();l.setStart(g,0);l.setEnd(g,0);m.setStart(h,0);m.setEnd(h,0);g=l.compareBoundaryPoints(Range.START_TO_END,m);if(g===0)i=true;return g};(function(){var g=s.createElement("div"),h="script"+(new Date).getTime();g.innerHTML="<a name='"+h+"'/>";var l=s.documentElement;l.insertBefore(g,l.firstChild);if(s.getElementById(h)){n.find.ID=function(m,q,p){if(typeof q.getElementById!=="undefined"&&!p)return(q=q.getElementById(m[1]))?q.id===m[1]||typeof q.getAttributeNode!=="undefined"&&
q.getAttributeNode("id").nodeValue===m[1]?[q]:w:[]};n.filter.ID=function(m,q){var p=typeof m.getAttributeNode!=="undefined"&&m.getAttributeNode("id");return m.nodeType===1&&p&&p.nodeValue===q}}l.removeChild(g);l=g=null})();(function(){var g=s.createElement("div");g.appendChild(s.createComment(""));if(g.getElementsByTagName("*").length>0)n.find.TAG=function(h,l){l=l.getElementsByTagName(h[1]);if(h[1]==="*"){h=[];for(var m=0;l[m];m++)l[m].nodeType===1&&h.push(l[m]);l=h}return l};g.innerHTML="<a href='#'></a>";
if(g.firstChild&&typeof g.firstChild.getAttribute!=="undefined"&&g.firstChild.getAttribute("href")!=="#")n.attrHandle.href=function(h){return h.getAttribute("href",2)};g=null})();s.querySelectorAll&&function(){var g=k,h=s.createElement("div");h.innerHTML="<p class='TEST'></p>";if(!(h.querySelectorAll&&h.querySelectorAll(".TEST").length===0)){k=function(m,q,p,v){q=q||s;if(!v&&q.nodeType===9&&!x(q))try{return z(q.querySelectorAll(m),p)}catch(t){}return g(m,q,p,v)};for(var l in g)k[l]=g[l];h=null}}();
(function(){var g=s.createElement("div");g.innerHTML="<div class='test e'></div><div class='test'></div>";if(!(!g.getElementsByClassName||g.getElementsByClassName("e").length===0)){g.lastChild.className="e";if(g.getElementsByClassName("e").length!==1){n.order.splice(1,0,"CLASS");n.find.CLASS=function(h,l,m){if(typeof l.getElementsByClassName!=="undefined"&&!m)return l.getElementsByClassName(h[1])};g=null}}})();var E=s.compareDocumentPosition?function(g,h){return!!(g.compareDocumentPosition(h)&16)}:
function(g,h){return g!==h&&(g.contains?g.contains(h):true)},x=function(g){return(g=(g?g.ownerDocument||g:0).documentElement)?g.nodeName!=="HTML":false},ga=function(g,h){var l=[],m="",q;for(h=h.nodeType?[h]:h;q=n.match.PSEUDO.exec(g);){m+=q[0];g=g.replace(n.match.PSEUDO,"")}g=n.relative[g]?g+"*":g;q=0;for(var p=h.length;q<p;q++)k(g,h[q],l);return k.filter(m,l)};c.find=k;c.expr=k.selectors;c.expr[":"]=c.expr.filters;c.unique=k.uniqueSort;c.text=a;c.isXMLDoc=x;c.contains=E})();var eb=/Until$/,fb=/^(?:parents|prevUntil|prevAll)/,
gb=/,/;R=Array.prototype.slice;var Ia=function(a,b,d){if(c.isFunction(b))return c.grep(a,function(e,j){return!!b.call(e,j,e)===d});else if(b.nodeType)return c.grep(a,function(e){return e===b===d});else if(typeof b==="string"){var f=c.grep(a,function(e){return e.nodeType===1});if(Ua.test(b))return c.filter(b,f,!d);else b=c.filter(b,f)}return c.grep(a,function(e){return c.inArray(e,b)>=0===d})};c.fn.extend({find:function(a){for(var b=this.pushStack("","find",a),d=0,f=0,e=this.length;f<e;f++){d=b.length;
c.find(a,this[f],b);if(f>0)for(var j=d;j<b.length;j++)for(var i=0;i<d;i++)if(b[i]===b[j]){b.splice(j--,1);break}}return b},has:function(a){var b=c(a);return this.filter(function(){for(var d=0,f=b.length;d<f;d++)if(c.contains(this,b[d]))return true})},not:function(a){return this.pushStack(Ia(this,a,false),"not",a)},filter:function(a){return this.pushStack(Ia(this,a,true),"filter",a)},is:function(a){return!!a&&c.filter(a,this).length>0},closest:function(a,b){if(c.isArray(a)){var d=[],f=this[0],e,j=
{},i;if(f&&a.length){e=0;for(var o=a.length;e<o;e++){i=a[e];j[i]||(j[i]=c.expr.match.POS.test(i)?c(i,b||this.context):i)}for(;f&&f.ownerDocument&&f!==b;){for(i in j){e=j[i];if(e.jquery?e.index(f)>-1:c(f).is(e)){d.push({selector:i,elem:f});delete j[i]}}f=f.parentNode}}return d}var k=c.expr.match.POS.test(a)?c(a,b||this.context):null;return this.map(function(n,r){for(;r&&r.ownerDocument&&r!==b;){if(k?k.index(r)>-1:c(r).is(a))return r;r=r.parentNode}return null})},index:function(a){if(!a||typeof a===
"string")return c.inArray(this[0],a?c(a):this.parent().children());return c.inArray(a.jquery?a[0]:a,this)},add:function(a,b){a=typeof a==="string"?c(a,b||this.context):c.makeArray(a);b=c.merge(this.get(),a);return this.pushStack(qa(a[0])||qa(b[0])?b:c.unique(b))},andSelf:function(){return this.add(this.prevObject)}});c.each({parent:function(a){return(a=a.parentNode)&&a.nodeType!==11?a:null},parents:function(a){return c.dir(a,"parentNode")},parentsUntil:function(a,b,d){return c.dir(a,"parentNode",
d)},next:function(a){return c.nth(a,2,"nextSibling")},prev:function(a){return c.nth(a,2,"previousSibling")},nextAll:function(a){return c.dir(a,"nextSibling")},prevAll:function(a){return c.dir(a,"previousSibling")},nextUntil:function(a,b,d){return c.dir(a,"nextSibling",d)},prevUntil:function(a,b,d){return c.dir(a,"previousSibling",d)},siblings:function(a){return c.sibling(a.parentNode.firstChild,a)},children:function(a){return c.sibling(a.firstChild)},contents:function(a){return c.nodeName(a,"iframe")?
a.contentDocument||a.contentWindow.document:c.makeArray(a.childNodes)}},function(a,b){c.fn[a]=function(d,f){var e=c.map(this,b,d);eb.test(a)||(f=d);if(f&&typeof f==="string")e=c.filter(f,e);e=this.length>1?c.unique(e):e;if((this.length>1||gb.test(f))&&fb.test(a))e=e.reverse();return this.pushStack(e,a,R.call(arguments).join(","))}});c.extend({filter:function(a,b,d){if(d)a=":not("+a+")";return c.find.matches(a,b)},dir:function(a,b,d){var f=[];for(a=a[b];a&&a.nodeType!==9&&(d===w||a.nodeType!==1||!c(a).is(d));){a.nodeType===
1&&f.push(a);a=a[b]}return f},nth:function(a,b,d){b=b||1;for(var f=0;a;a=a[d])if(a.nodeType===1&&++f===b)break;return a},sibling:function(a,b){for(var d=[];a;a=a.nextSibling)a.nodeType===1&&a!==b&&d.push(a);return d}});var Ja=/ jQuery\d+="(?:\d+|null)"/g,V=/^\s+/,Ka=/(<([\w:]+)[^>]*?)\/>/g,hb=/^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i,La=/<([\w:]+)/,ib=/<tbody/i,jb=/<|&#?\w+;/,ta=/<script|<object|<embed|<option|<style/i,ua=/checked\s*(?:[^=]|=\s*.checked.)/i,Ma=function(a,b,d){return hb.test(d)?
a:b+"></"+d+">"},F={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]};F.optgroup=F.option;F.tbody=F.tfoot=F.colgroup=F.caption=F.thead;F.th=F.td;if(!c.support.htmlSerialize)F._default=[1,"div<div>","</div>"];c.fn.extend({text:function(a){if(c.isFunction(a))return this.each(function(b){var d=
c(this);d.text(a.call(this,b,d.text()))});if(typeof a!=="object"&&a!==w)return this.empty().append((this[0]&&this[0].ownerDocument||s).createTextNode(a));return c.text(this)},wrapAll:function(a){if(c.isFunction(a))return this.each(function(d){c(this).wrapAll(a.call(this,d))});if(this[0]){var b=c(a,this[0].ownerDocument).eq(0).clone(true);this[0].parentNode&&b.insertBefore(this[0]);b.map(function(){for(var d=this;d.firstChild&&d.firstChild.nodeType===1;)d=d.firstChild;return d}).append(this)}return this},
wrapInner:function(a){if(c.isFunction(a))return this.each(function(b){c(this).wrapInner(a.call(this,b))});return this.each(function(){var b=c(this),d=b.contents();d.length?d.wrapAll(a):b.append(a)})},wrap:function(a){return this.each(function(){c(this).wrapAll(a)})},unwrap:function(){return this.parent().each(function(){c.nodeName(this,"body")||c(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,true,function(a){this.nodeType===1&&this.appendChild(a)})},
prepend:function(){return this.domManip(arguments,true,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,false,function(b){this.parentNode.insertBefore(b,this)});else if(arguments.length){var a=c(arguments[0]);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,false,function(b){this.parentNode.insertBefore(b,
this.nextSibling)});else if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,c(arguments[0]).toArray());return a}},remove:function(a,b){for(var d=0,f;(f=this[d])!=null;d++)if(!a||c.filter(a,[f]).length){if(!b&&f.nodeType===1){c.cleanData(f.getElementsByTagName("*"));c.cleanData([f])}f.parentNode&&f.parentNode.removeChild(f)}return this},empty:function(){for(var a=0,b;(b=this[a])!=null;a++)for(b.nodeType===1&&c.cleanData(b.getElementsByTagName("*"));b.firstChild;)b.removeChild(b.firstChild);
return this},clone:function(a){var b=this.map(function(){if(!c.support.noCloneEvent&&!c.isXMLDoc(this)){var d=this.outerHTML,f=this.ownerDocument;if(!d){d=f.createElement("div");d.appendChild(this.cloneNode(true));d=d.innerHTML}return c.clean([d.replace(Ja,"").replace(/=([^="'>\s]+\/)>/g,'="$1">').replace(V,"")],f)[0]}else return this.cloneNode(true)});if(a===true){ra(this,b);ra(this.find("*"),b.find("*"))}return b},html:function(a){if(a===w)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(Ja,
""):null;else if(typeof a==="string"&&!ta.test(a)&&(c.support.leadingWhitespace||!V.test(a))&&!F[(La.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Ka,Ma);try{for(var b=0,d=this.length;b<d;b++)if(this[b].nodeType===1){c.cleanData(this[b].getElementsByTagName("*"));this[b].innerHTML=a}}catch(f){this.empty().append(a)}}else c.isFunction(a)?this.each(function(e){var j=c(this),i=j.html();j.empty().append(function(){return a.call(this,e,i)})}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&
this[0].parentNode){if(c.isFunction(a))return this.each(function(b){var d=c(this),f=d.html();d.replaceWith(a.call(this,b,f))});if(typeof a!=="string")a=c(a).detach();return this.each(function(){var b=this.nextSibling,d=this.parentNode;c(this).remove();b?c(b).before(a):c(d).append(a)})}else return this.pushStack(c(c.isFunction(a)?a():a),"replaceWith",a)},detach:function(a){return this.remove(a,true)},domManip:function(a,b,d){function f(u){return c.nodeName(u,"table")?u.getElementsByTagName("tbody")[0]||
u.appendChild(u.ownerDocument.createElement("tbody")):u}var e,j,i=a[0],o=[],k;if(!c.support.checkClone&&arguments.length===3&&typeof i==="string"&&ua.test(i))return this.each(function(){c(this).domManip(a,b,d,true)});if(c.isFunction(i))return this.each(function(u){var z=c(this);a[0]=i.call(this,u,b?z.html():w);z.domManip(a,b,d)});if(this[0]){e=i&&i.parentNode;e=c.support.parentNode&&e&&e.nodeType===11&&e.childNodes.length===this.length?{fragment:e}:sa(a,this,o);k=e.fragment;if(j=k.childNodes.length===
1?(k=k.firstChild):k.firstChild){b=b&&c.nodeName(j,"tr");for(var n=0,r=this.length;n<r;n++)d.call(b?f(this[n],j):this[n],n>0||e.cacheable||this.length>1?k.cloneNode(true):k)}o.length&&c.each(o,Qa)}return this}});c.fragments={};c.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){c.fn[a]=function(d){var f=[];d=c(d);var e=this.length===1&&this[0].parentNode;if(e&&e.nodeType===11&&e.childNodes.length===1&&d.length===1){d[b](this[0]);
return this}else{e=0;for(var j=d.length;e<j;e++){var i=(e>0?this.clone(true):this).get();c.fn[b].apply(c(d[e]),i);f=f.concat(i)}return this.pushStack(f,a,d.selector)}}});c.extend({clean:function(a,b,d,f){b=b||s;if(typeof b.createElement==="undefined")b=b.ownerDocument||b[0]&&b[0].ownerDocument||s;for(var e=[],j=0,i;(i=a[j])!=null;j++){if(typeof i==="number")i+="";if(i){if(typeof i==="string"&&!jb.test(i))i=b.createTextNode(i);else if(typeof i==="string"){i=i.replace(Ka,Ma);var o=(La.exec(i)||["",
""])[1].toLowerCase(),k=F[o]||F._default,n=k[0],r=b.createElement("div");for(r.innerHTML=k[1]+i+k[2];n--;)r=r.lastChild;if(!c.support.tbody){n=ib.test(i);o=o==="table"&&!n?r.firstChild&&r.firstChild.childNodes:k[1]==="<table>"&&!n?r.childNodes:[];for(k=o.length-1;k>=0;--k)c.nodeName(o[k],"tbody")&&!o[k].childNodes.length&&o[k].parentNode.removeChild(o[k])}!c.support.leadingWhitespace&&V.test(i)&&r.insertBefore(b.createTextNode(V.exec(i)[0]),r.firstChild);i=r.childNodes}if(i.nodeType)e.push(i);else e=
c.merge(e,i)}}if(d)for(j=0;e[j];j++)if(f&&c.nodeName(e[j],"script")&&(!e[j].type||e[j].type.toLowerCase()==="text/javascript"))f.push(e[j].parentNode?e[j].parentNode.removeChild(e[j]):e[j]);else{e[j].nodeType===1&&e.splice.apply(e,[j+1,0].concat(c.makeArray(e[j].getElementsByTagName("script"))));d.appendChild(e[j])}return e},cleanData:function(a){for(var b,d,f=c.cache,e=c.event.special,j=c.support.deleteExpando,i=0,o;(o=a[i])!=null;i++)if(d=o[c.expando]){b=f[d];if(b.events)for(var k in b.events)e[k]?
c.event.remove(o,k):Ca(o,k,b.handle);if(j)delete o[c.expando];else o.removeAttribute&&o.removeAttribute(c.expando);delete f[d]}}});var kb=/z-?index|font-?weight|opacity|zoom|line-?height/i,Na=/alpha\([^)]*\)/,Oa=/opacity=([^)]*)/,ha=/float/i,ia=/-([a-z])/ig,lb=/([A-Z])/g,mb=/^-?\d+(?:px)?$/i,nb=/^-?\d/,ob={position:"absolute",visibility:"hidden",display:"block"},pb=["Left","Right"],qb=["Top","Bottom"],rb=s.defaultView&&s.defaultView.getComputedStyle,Pa=c.support.cssFloat?"cssFloat":"styleFloat",ja=
function(a,b){return b.toUpperCase()};c.fn.css=function(a,b){return X(this,a,b,true,function(d,f,e){if(e===w)return c.curCSS(d,f);if(typeof e==="number"&&!kb.test(f))e+="px";c.style(d,f,e)})};c.extend({style:function(a,b,d){if(!a||a.nodeType===3||a.nodeType===8)return w;if((b==="width"||b==="height")&&parseFloat(d)<0)d=w;var f=a.style||a,e=d!==w;if(!c.support.opacity&&b==="opacity"){if(e){f.zoom=1;b=parseInt(d,10)+""==="NaN"?"":"alpha(opacity="+d*100+")";a=f.filter||c.curCSS(a,"filter")||"";f.filter=
Na.test(a)?a.replace(Na,b):b}return f.filter&&f.filter.indexOf("opacity=")>=0?parseFloat(Oa.exec(f.filter)[1])/100+"":""}if(ha.test(b))b=Pa;b=b.replace(ia,ja);if(e)f[b]=d;return f[b]},css:function(a,b,d,f){if(b==="width"||b==="height"){var e,j=b==="width"?pb:qb;function i(){e=b==="width"?a.offsetWidth:a.offsetHeight;f!=="border"&&c.each(j,function(){f||(e-=parseFloat(c.curCSS(a,"padding"+this,true))||0);if(f==="margin")e+=parseFloat(c.curCSS(a,"margin"+this,true))||0;else e-=parseFloat(c.curCSS(a,
"border"+this+"Width",true))||0})}a.offsetWidth!==0?i():c.swap(a,ob,i);return Math.max(0,Math.round(e))}return c.curCSS(a,b,d)},curCSS:function(a,b,d){var f,e=a.style;if(!c.support.opacity&&b==="opacity"&&a.currentStyle){f=Oa.test(a.currentStyle.filter||"")?parseFloat(RegExp.$1)/100+"":"";return f===""?"1":f}if(ha.test(b))b=Pa;if(!d&&e&&e[b])f=e[b];else if(rb){if(ha.test(b))b="float";b=b.replace(lb,"-$1").toLowerCase();e=a.ownerDocument.defaultView;if(!e)return null;if(a=e.getComputedStyle(a,null))f=
a.getPropertyValue(b);if(b==="opacity"&&f==="")f="1"}else if(a.currentStyle){d=b.replace(ia,ja);f=a.currentStyle[b]||a.currentStyle[d];if(!mb.test(f)&&nb.test(f)){b=e.left;var j=a.runtimeStyle.left;a.runtimeStyle.left=a.currentStyle.left;e.left=d==="fontSize"?"1em":f||0;f=e.pixelLeft+"px";e.left=b;a.runtimeStyle.left=j}}return f},swap:function(a,b,d){var f={};for(var e in b){f[e]=a.style[e];a.style[e]=b[e]}d.call(a);for(e in b)a.style[e]=f[e]}});if(c.expr&&c.expr.filters){c.expr.filters.hidden=function(a){var b=
a.offsetWidth,d=a.offsetHeight,f=a.nodeName.toLowerCase()==="tr";return b===0&&d===0&&!f?true:b>0&&d>0&&!f?false:c.curCSS(a,"display")==="none"};c.expr.filters.visible=function(a){return!c.expr.filters.hidden(a)}}var sb=J(),tb=/<script(.|\s)*?\/script>/gi,ub=/select|textarea/i,vb=/color|date|datetime|email|hidden|month|number|password|range|search|tel|text|time|url|week/i,N=/=\?(&|$)/,ka=/\?/,wb=/(\?|&)_=.*?(&|$)/,xb=/^(\w+:)?\/\/([^\/?#]+)/,yb=/%20/g,zb=c.fn.load;c.fn.extend({load:function(a,b,d){if(typeof a!==
"string")return zb.call(this,a);else if(!this.length)return this;var f=a.indexOf(" ");if(f>=0){var e=a.slice(f,a.length);a=a.slice(0,f)}f="GET";if(b)if(c.isFunction(b)){d=b;b=null}else if(typeof b==="object"){b=c.param(b,c.ajaxSettings.traditional);f="POST"}var j=this;c.ajax({url:a,type:f,dataType:"html",data:b,complete:function(i,o){if(o==="success"||o==="notmodified")j.html(e?c("<div />").append(i.responseText.replace(tb,"")).find(e):i.responseText);d&&j.each(d,[i.responseText,o,i])}});return this},
serialize:function(){return c.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?c.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||ub.test(this.nodeName)||vb.test(this.type))}).map(function(a,b){a=c(this).val();return a==null?null:c.isArray(a)?c.map(a,function(d){return{name:b.name,value:d}}):{name:b.name,value:a}}).get()}});c.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),
function(a,b){c.fn[b]=function(d){return this.bind(b,d)}});c.extend({get:function(a,b,d,f){if(c.isFunction(b)){f=f||d;d=b;b=null}return c.ajax({type:"GET",url:a,data:b,success:d,dataType:f})},getScript:function(a,b){return c.get(a,null,b,"script")},getJSON:function(a,b,d){return c.get(a,b,d,"json")},post:function(a,b,d,f){if(c.isFunction(b)){f=f||d;d=b;b={}}return c.ajax({type:"POST",url:a,data:b,success:d,dataType:f})},ajaxSetup:function(a){c.extend(c.ajaxSettings,a)},ajaxSettings:{url:location.href,
global:true,type:"GET",contentType:"application/x-www-form-urlencoded",processData:true,async:true,xhr:A.XMLHttpRequest&&(A.location.protocol!=="file:"||!A.ActiveXObject)?function(){return new A.XMLHttpRequest}:function(){try{return new A.ActiveXObject("Microsoft.XMLHTTP")}catch(a){}},accepts:{xml:"application/xml, text/xml",html:"text/html",script:"text/javascript, application/javascript",json:"application/json, text/javascript",text:"text/plain",_default:"*/*"}},lastModified:{},etag:{},ajax:function(a){function b(){e.success&&
e.success.call(k,o,i,x);e.global&&f("ajaxSuccess",[x,e])}function d(){e.complete&&e.complete.call(k,x,i);e.global&&f("ajaxComplete",[x,e]);e.global&&!--c.active&&c.event.trigger("ajaxStop")}function f(q,p){(e.context?c(e.context):c.event).trigger(q,p)}var e=c.extend(true,{},c.ajaxSettings,a),j,i,o,k=a&&a.context||e,n=e.type.toUpperCase();if(e.data&&e.processData&&typeof e.data!=="string")e.data=c.param(e.data,e.traditional);if(e.dataType==="jsonp"){if(n==="GET")N.test(e.url)||(e.url+=(ka.test(e.url)?
"&":"?")+(e.jsonp||"callback")+"=?");else if(!e.data||!N.test(e.data))e.data=(e.data?e.data+"&":"")+(e.jsonp||"callback")+"=?";e.dataType="json"}if(e.dataType==="json"&&(e.data&&N.test(e.data)||N.test(e.url))){j=e.jsonpCallback||"jsonp"+sb++;if(e.data)e.data=(e.data+"").replace(N,"="+j+"$1");e.url=e.url.replace(N,"="+j+"$1");e.dataType="script";A[j]=A[j]||function(q){o=q;b();d();A[j]=w;try{delete A[j]}catch(p){}z&&z.removeChild(C)}}if(e.dataType==="script"&&e.cache===null)e.cache=false;if(e.cache===
false&&n==="GET"){var r=J(),u=e.url.replace(wb,"$1_="+r+"$2");e.url=u+(u===e.url?(ka.test(e.url)?"&":"?")+"_="+r:"")}if(e.data&&n==="GET")e.url+=(ka.test(e.url)?"&":"?")+e.data;e.global&&!c.active++&&c.event.trigger("ajaxStart");r=(r=xb.exec(e.url))&&(r[1]&&r[1]!==location.protocol||r[2]!==location.host);if(e.dataType==="script"&&n==="GET"&&r){var z=s.getElementsByTagName("head")[0]||s.documentElement,C=s.createElement("script");C.src=e.url;if(e.scriptCharset)C.charset=e.scriptCharset;if(!j){var B=
false;C.onload=C.onreadystatechange=function(){if(!B&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){B=true;b();d();C.onload=C.onreadystatechange=null;z&&C.parentNode&&z.removeChild(C)}}}z.insertBefore(C,z.firstChild);return w}var E=false,x=e.xhr();if(x){e.username?x.open(n,e.url,e.async,e.username,e.password):x.open(n,e.url,e.async);try{if(e.data||a&&a.contentType)x.setRequestHeader("Content-Type",e.contentType);if(e.ifModified){c.lastModified[e.url]&&x.setRequestHeader("If-Modified-Since",
c.lastModified[e.url]);c.etag[e.url]&&x.setRequestHeader("If-None-Match",c.etag[e.url])}r||x.setRequestHeader("X-Requested-With","XMLHttpRequest");x.setRequestHeader("Accept",e.dataType&&e.accepts[e.dataType]?e.accepts[e.dataType]+", */*":e.accepts._default)}catch(ga){}if(e.beforeSend&&e.beforeSend.call(k,x,e)===false){e.global&&!--c.active&&c.event.trigger("ajaxStop");x.abort();return false}e.global&&f("ajaxSend",[x,e]);var g=x.onreadystatechange=function(q){if(!x||x.readyState===0||q==="abort"){E||
d();E=true;if(x)x.onreadystatechange=c.noop}else if(!E&&x&&(x.readyState===4||q==="timeout")){E=true;x.onreadystatechange=c.noop;i=q==="timeout"?"timeout":!c.httpSuccess(x)?"error":e.ifModified&&c.httpNotModified(x,e.url)?"notmodified":"success";var p;if(i==="success")try{o=c.httpData(x,e.dataType,e)}catch(v){i="parsererror";p=v}if(i==="success"||i==="notmodified")j||b();else c.handleError(e,x,i,p);d();q==="timeout"&&x.abort();if(e.async)x=null}};try{var h=x.abort;x.abort=function(){x&&h.call(x);
g("abort")}}catch(l){}e.async&&e.timeout>0&&setTimeout(function(){x&&!E&&g("timeout")},e.timeout);try{x.send(n==="POST"||n==="PUT"||n==="DELETE"?e.data:null)}catch(m){c.handleError(e,x,null,m);d()}e.async||g();return x}},handleError:function(a,b,d,f){if(a.error)a.error.call(a.context||a,b,d,f);if(a.global)(a.context?c(a.context):c.event).trigger("ajaxError",[b,a,f])},active:0,httpSuccess:function(a){try{return!a.status&&location.protocol==="file:"||a.status>=200&&a.status<300||a.status===304||a.status===
1223||a.status===0}catch(b){}return false},httpNotModified:function(a,b){var d=a.getResponseHeader("Last-Modified"),f=a.getResponseHeader("Etag");if(d)c.lastModified[b]=d;if(f)c.etag[b]=f;return a.status===304||a.status===0},httpData:function(a,b,d){var f=a.getResponseHeader("content-type")||"",e=b==="xml"||!b&&f.indexOf("xml")>=0;a=e?a.responseXML:a.responseText;e&&a.documentElement.nodeName==="parsererror"&&c.error("parsererror");if(d&&d.dataFilter)a=d.dataFilter(a,b);if(typeof a==="string")if(b===
"json"||!b&&f.indexOf("json")>=0)a=c.parseJSON(a);else if(b==="script"||!b&&f.indexOf("javascript")>=0)c.globalEval(a);return a},param:function(a,b){function d(i,o){if(c.isArray(o))c.each(o,function(k,n){b||/\[\]$/.test(i)?f(i,n):d(i+"["+(typeof n==="object"||c.isArray(n)?k:"")+"]",n)});else!b&&o!=null&&typeof o==="object"?c.each(o,function(k,n){d(i+"["+k+"]",n)}):f(i,o)}function f(i,o){o=c.isFunction(o)?o():o;e[e.length]=encodeURIComponent(i)+"="+encodeURIComponent(o)}var e=[];if(b===w)b=c.ajaxSettings.traditional;
if(c.isArray(a)||a.jquery)c.each(a,function(){f(this.name,this.value)});else for(var j in a)d(j,a[j]);return e.join("&").replace(yb,"+")}});var la={},Ab=/toggle|show|hide/,Bb=/^([+-]=)?([\d+-.]+)(.*)$/,W,va=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]];c.fn.extend({show:function(a,b){if(a||a===0)return this.animate(K("show",3),a,b);else{a=0;for(b=this.length;a<b;a++){var d=c.data(this[a],"olddisplay");
this[a].style.display=d||"";if(c.css(this[a],"display")==="none"){d=this[a].nodeName;var f;if(la[d])f=la[d];else{var e=c("<"+d+" />").appendTo("body");f=e.css("display");if(f==="none")f="block";e.remove();la[d]=f}c.data(this[a],"olddisplay",f)}}a=0;for(b=this.length;a<b;a++)this[a].style.display=c.data(this[a],"olddisplay")||"";return this}},hide:function(a,b){if(a||a===0)return this.animate(K("hide",3),a,b);else{a=0;for(b=this.length;a<b;a++){var d=c.data(this[a],"olddisplay");!d&&d!=="none"&&c.data(this[a],
"olddisplay",c.css(this[a],"display"))}a=0;for(b=this.length;a<b;a++)this[a].style.display="none";return this}},_toggle:c.fn.toggle,toggle:function(a,b){var d=typeof a==="boolean";if(c.isFunction(a)&&c.isFunction(b))this._toggle.apply(this,arguments);else a==null||d?this.each(function(){var f=d?a:c(this).is(":hidden");c(this)[f?"show":"hide"]()}):this.animate(K("toggle",3),a,b);return this},fadeTo:function(a,b,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,d)},
animate:function(a,b,d,f){var e=c.speed(b,d,f);if(c.isEmptyObject(a))return this.each(e.complete);return this[e.queue===false?"each":"queue"](function(){var j=c.extend({},e),i,o=this.nodeType===1&&c(this).is(":hidden"),k=this;for(i in a){var n=i.replace(ia,ja);if(i!==n){a[n]=a[i];delete a[i];i=n}if(a[i]==="hide"&&o||a[i]==="show"&&!o)return j.complete.call(this);if((i==="height"||i==="width")&&this.style){j.display=c.css(this,"display");j.overflow=this.style.overflow}if(c.isArray(a[i])){(j.specialEasing=
j.specialEasing||{})[i]=a[i][1];a[i]=a[i][0]}}if(j.overflow!=null)this.style.overflow="hidden";j.curAnim=c.extend({},a);c.each(a,function(r,u){var z=new c.fx(k,j,r);if(Ab.test(u))z[u==="toggle"?o?"show":"hide":u](a);else{var C=Bb.exec(u),B=z.cur(true)||0;if(C){u=parseFloat(C[2]);var E=C[3]||"px";if(E!=="px"){k.style[r]=(u||1)+E;B=(u||1)/z.cur(true)*B;k.style[r]=B+E}if(C[1])u=(C[1]==="-="?-1:1)*u+B;z.custom(B,u,E)}else z.custom(B,u,"")}});return true})},stop:function(a,b){var d=c.timers;a&&this.queue([]);
this.each(function(){for(var f=d.length-1;f>=0;f--)if(d[f].elem===this){b&&d[f](true);d.splice(f,1)}});b||this.dequeue();return this}});c.each({slideDown:K("show",1),slideUp:K("hide",1),slideToggle:K("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"}},function(a,b){c.fn[a]=function(d,f){return this.animate(b,d,f)}});c.extend({speed:function(a,b,d){var f=a&&typeof a==="object"?a:{complete:d||!d&&b||c.isFunction(a)&&a,duration:a,easing:d&&b||b&&!c.isFunction(b)&&b};f.duration=c.fx.off?0:typeof f.duration===
"number"?f.duration:c.fx.speeds[f.duration]||c.fx.speeds._default;f.old=f.complete;f.complete=function(){f.queue!==false&&c(this).dequeue();c.isFunction(f.old)&&f.old.call(this)};return f},easing:{linear:function(a,b,d,f){return d+f*a},swing:function(a,b,d,f){return(-Math.cos(a*Math.PI)/2+0.5)*f+d}},timers:[],fx:function(a,b,d){this.options=b;this.elem=a;this.prop=d;if(!b.orig)b.orig={}}});c.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this);(c.fx.step[this.prop]||
c.fx.step._default)(this);if((this.prop==="height"||this.prop==="width")&&this.elem.style)this.elem.style.display="block"},cur:function(a){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];return(a=parseFloat(c.css(this.elem,this.prop,a)))&&a>-10000?a:parseFloat(c.curCSS(this.elem,this.prop))||0},custom:function(a,b,d){function f(j){return e.step(j)}this.startTime=J();this.start=a;this.end=b;this.unit=d||this.unit||"px";this.now=this.start;
this.pos=this.state=0;var e=this;f.elem=this.elem;if(f()&&c.timers.push(f)&&!W)W=setInterval(c.fx.tick,13)},show:function(){this.options.orig[this.prop]=c.style(this.elem,this.prop);this.options.show=true;this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur());c(this.elem).show()},hide:function(){this.options.orig[this.prop]=c.style(this.elem,this.prop);this.options.hide=true;this.custom(this.cur(),0)},step:function(a){var b=J(),d=true;if(a||b>=this.options.duration+this.startTime){this.now=
this.end;this.pos=this.state=1;this.update();this.options.curAnim[this.prop]=true;for(var f in this.options.curAnim)if(this.options.curAnim[f]!==true)d=false;if(d){if(this.options.display!=null){this.elem.style.overflow=this.options.overflow;a=c.data(this.elem,"olddisplay");this.elem.style.display=a?a:this.options.display;if(c.css(this.elem,"display")==="none")this.elem.style.display="block"}this.options.hide&&c(this.elem).hide();if(this.options.hide||this.options.show)for(var e in this.options.curAnim)c.style(this.elem,
e,this.options.orig[e]);this.options.complete.call(this.elem)}return false}else{e=b-this.startTime;this.state=e/this.options.duration;a=this.options.easing||(c.easing.swing?"swing":"linear");this.pos=c.easing[this.options.specialEasing&&this.options.specialEasing[this.prop]||a](this.state,e,0,1,this.options.duration);this.now=this.start+(this.end-this.start)*this.pos;this.update()}return true}};c.extend(c.fx,{tick:function(){for(var a=c.timers,b=0;b<a.length;b++)a[b]()||a.splice(b--,1);a.length||
c.fx.stop()},stop:function(){clearInterval(W);W=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){c.style(a.elem,"opacity",a.now)},_default:function(a){if(a.elem.style&&a.elem.style[a.prop]!=null)a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"?Math.max(0,a.now):a.now)+a.unit;else a.elem[a.prop]=a.now}}});if(c.expr&&c.expr.filters)c.expr.filters.animated=function(a){return c.grep(c.timers,function(b){return a===b.elem}).length};c.fn.offset="getBoundingClientRect"in s.documentElement?
function(a){var b=this[0];if(a)return this.each(function(e){c.offset.setOffset(this,a,e)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return c.offset.bodyOffset(b);var d=b.getBoundingClientRect(),f=b.ownerDocument;b=f.body;f=f.documentElement;return{top:d.top+(self.pageYOffset||c.support.boxModel&&f.scrollTop||b.scrollTop)-(f.clientTop||b.clientTop||0),left:d.left+(self.pageXOffset||c.support.boxModel&&f.scrollLeft||b.scrollLeft)-(f.clientLeft||b.clientLeft||0)}}:function(a){var b=
this[0];if(a)return this.each(function(r){c.offset.setOffset(this,a,r)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return c.offset.bodyOffset(b);c.offset.initialize();var d=b.offsetParent,f=b,e=b.ownerDocument,j,i=e.documentElement,o=e.body;f=(e=e.defaultView)?e.getComputedStyle(b,null):b.currentStyle;for(var k=b.offsetTop,n=b.offsetLeft;(b=b.parentNode)&&b!==o&&b!==i;){if(c.offset.supportsFixedPosition&&f.position==="fixed")break;j=e?e.getComputedStyle(b,null):b.currentStyle;
k-=b.scrollTop;n-=b.scrollLeft;if(b===d){k+=b.offsetTop;n+=b.offsetLeft;if(c.offset.doesNotAddBorder&&!(c.offset.doesAddBorderForTableAndCells&&/^t(able|d|h)$/i.test(b.nodeName))){k+=parseFloat(j.borderTopWidth)||0;n+=parseFloat(j.borderLeftWidth)||0}f=d;d=b.offsetParent}if(c.offset.subtractsBorderForOverflowNotVisible&&j.overflow!=="visible"){k+=parseFloat(j.borderTopWidth)||0;n+=parseFloat(j.borderLeftWidth)||0}f=j}if(f.position==="relative"||f.position==="static"){k+=o.offsetTop;n+=o.offsetLeft}if(c.offset.supportsFixedPosition&&
f.position==="fixed"){k+=Math.max(i.scrollTop,o.scrollTop);n+=Math.max(i.scrollLeft,o.scrollLeft)}return{top:k,left:n}};c.offset={initialize:function(){var a=s.body,b=s.createElement("div"),d,f,e,j=parseFloat(c.curCSS(a,"marginTop",true))||0;c.extend(b.style,{position:"absolute",top:0,left:0,margin:0,border:0,width:"1px",height:"1px",visibility:"hidden"});b.innerHTML="<div style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;'><div></div></div><table style='position:absolute;top:0;left:0;margin:0;border:5px solid #000;padding:0;width:1px;height:1px;' cellpadding='0' cellspacing='0'><tr><td></td></tr></table>";
a.insertBefore(b,a.firstChild);d=b.firstChild;f=d.firstChild;e=d.nextSibling.firstChild.firstChild;this.doesNotAddBorder=f.offsetTop!==5;this.doesAddBorderForTableAndCells=e.offsetTop===5;f.style.position="fixed";f.style.top="20px";this.supportsFixedPosition=f.offsetTop===20||f.offsetTop===15;f.style.position=f.style.top="";d.style.overflow="hidden";d.style.position="relative";this.subtractsBorderForOverflowNotVisible=f.offsetTop===-5;this.doesNotIncludeMarginInBodyOffset=a.offsetTop!==j;a.removeChild(b);
c.offset.initialize=c.noop},bodyOffset:function(a){var b=a.offsetTop,d=a.offsetLeft;c.offset.initialize();if(c.offset.doesNotIncludeMarginInBodyOffset){b+=parseFloat(c.curCSS(a,"marginTop",true))||0;d+=parseFloat(c.curCSS(a,"marginLeft",true))||0}return{top:b,left:d}},setOffset:function(a,b,d){if(/static/.test(c.curCSS(a,"position")))a.style.position="relative";var f=c(a),e=f.offset(),j=parseInt(c.curCSS(a,"top",true),10)||0,i=parseInt(c.curCSS(a,"left",true),10)||0;if(c.isFunction(b))b=b.call(a,
d,e);d={top:b.top-e.top+j,left:b.left-e.left+i};"using"in b?b.using.call(a,d):f.css(d)}};c.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),d=this.offset(),f=/^body|html$/i.test(b[0].nodeName)?{top:0,left:0}:b.offset();d.top-=parseFloat(c.curCSS(a,"marginTop",true))||0;d.left-=parseFloat(c.curCSS(a,"marginLeft",true))||0;f.top+=parseFloat(c.curCSS(b[0],"borderTopWidth",true))||0;f.left+=parseFloat(c.curCSS(b[0],"borderLeftWidth",true))||0;return{top:d.top-
f.top,left:d.left-f.left}},offsetParent:function(){return this.map(function(){for(var a=this.offsetParent||s.body;a&&!/^body|html$/i.test(a.nodeName)&&c.css(a,"position")==="static";)a=a.offsetParent;return a})}});c.each(["Left","Top"],function(a,b){var d="scroll"+b;c.fn[d]=function(f){var e=this[0],j;if(!e)return null;if(f!==w)return this.each(function(){if(j=wa(this))j.scrollTo(!a?f:c(j).scrollLeft(),a?f:c(j).scrollTop());else this[d]=f});else return(j=wa(e))?"pageXOffset"in j?j[a?"pageYOffset":
"pageXOffset"]:c.support.boxModel&&j.document.documentElement[d]||j.document.body[d]:e[d]}});c.each(["Height","Width"],function(a,b){var d=b.toLowerCase();c.fn["inner"+b]=function(){return this[0]?c.css(this[0],d,false,"padding"):null};c.fn["outer"+b]=function(f){return this[0]?c.css(this[0],d,false,f?"margin":"border"):null};c.fn[d]=function(f){var e=this[0];if(!e)return f==null?null:this;if(c.isFunction(f))return this.each(function(j){var i=c(this);i[d](f.call(this,j,i[d]()))});return"scrollTo"in
e&&e.document?e.document.compatMode==="CSS1Compat"&&e.document.documentElement["client"+b]||e.document.body["client"+b]:e.nodeType===9?Math.max(e.documentElement["client"+b],e.body["scroll"+b],e.documentElement["scroll"+b],e.body["offset"+b],e.documentElement["offset"+b]):f===w?c.css(e,d):this.css(d,typeof f==="string"?f:f+"px")}});A.jQuery=A.$=c})(window);

View File

@@ -0,0 +1,287 @@
<?php include("head.inc"); ?>
<a name="setup"> </a>
<h2>Setup</h2>
<ul>
<li style="list-style-image: url('images/star_02.gif');"><a href="#system">System Configuration</a></li>
<li style="list-style-image: url('images/star_02.gif');"><a href="#dompdf-config">DOMPDF Configuration</a></li>
</ul>
<h3 id="system">System Configuration</h3>
<?php
require_once("../dompdf_config.inc.php");
$server_configs = array(
"PHP Version" => array(
"required" => "5.0",
"value" => phpversion(),
"result" => version_compare(phpversion(), "5.0"),
),
"DOMDocument extension" => array(
"required" => true,
"value" => phpversion("DOM"),
"result" => class_exists("DOMDocument"),
),
"PCRE" => array(
"required" => true,
"value" => phpversion("pcre"),
"result" => function_exists("preg_match") && @preg_match("/./u", "a"),
"failure" => "PCRE is required with Unicode support (the \"u\" modifier)",
),
"Zlib" => array(
"required" => true,
"value" => phpversion("zlib"),
"result" => function_exists("gzcompress"),
"fallback" => "Recommended to compress PDF documents",
),
"MBString extension" => array(
"required" => true,
"value" => phpversion("mbstring"),
"result" => function_exists("mb_send_mail"), // Should never be reimplemented in dompdf
"fallback" => "Recommended, will use fallback functions",
),
"GD" => array(
"required" => true,
"value" => phpversion("gd"),
"result" => function_exists("imagecreate"),
"fallback" => "Required if you have images in your documents",
),
"APC" => array(
"required" => "For better performances",
"value" => phpversion("apc"),
"result" => function_exists("apc_fetch"),
"fallback" => "Recommended for better performances",
),
"GMagick or IMagick" => array(
"required" => "Better with transparent PNG images",
"value" => null,
"result" => extension_loaded("gmagick") || extension_loaded("imagick"),
"fallback" => "Recommended for better performances",
),
);
if (($gm = extension_loaded("gmagick")) || ($im = extension_loaded("imagick"))) {
$server_configs["GMagick or IMagick"]["value"] = ($im ? "IMagick ".phpversion("imagick") : "GMagick ".phpversion("gmagick"));
}
?>
<table class="setup">
<tr>
<th></th>
<th>Required</th>
<th>Present</th>
</tr>
<?php foreach($server_configs as $label => $server_config) { ?>
<tr>
<td class="title"><?php echo $label; ?></td>
<td><?php echo ($server_config["required"] === true ? "Yes" : $server_config["required"]); ?></td>
<td class="<?php echo ($server_config["result"] ? "ok" : (isset($server_config["fallback"]) ? "warning" : "failed")); ?>">
<?php
echo $server_config["value"];
if ($server_config["result"] && !$server_config["value"]) echo "Yes";
if (!$server_config["result"]) {
if (isset($server_config["fallback"])) {
echo "<div>No. ".$server_config["fallback"]."</div>";
}
if (isset($server_config["failure"])) {
echo "<div>".$server_config["failure"]."</div>";
}
}
?>
</td>
</tr>
<?php } ?>
</table>
<h3 id="dompdf-config">DOMPDF Configuration</h3>
<?php
$dompdf_constants = array();
$defined_constants = get_defined_constants(true);
$constants = array(
"DOMPDF_DIR" => array(
"desc" => "Root directory of DOMPDF",
"success" => "read",
),
"DOMPDF_INC_DIR" => array(
"desc" => "Include directory of DOMPDF",
"success" => "read",
),
"DOMPDF_LIB_DIR" => array(
"desc" => "Third-party libraries directory of DOMPDF",
"success" => "read",
),
"DOMPDF_FONT_DIR" => array(
"desc" => "Additional fonts directory",
"success" => "read",
),
"DOMPDF_FONT_CACHE" => array(
"desc" => "Font metrics cache",
"success" => "write",
),
"DOMPDF_TEMP_DIR" => array(
"desc" => "Temporary folder",
"success" => "write",
),
"DOMPDF_CHROOT" => array(
"desc" => "Restricted path",
"success" => "read",
),
"DOMPDF_UNICODE_ENABLED" => array(
"desc" => "Unicode support (thanks to additional fonts)",
),
"DOMPDF_ENABLE_FONTSUBSETTING" => array(
"desc" => "Enable font subsetting, will make smaller documents when using Unicode fonts",
),
"DOMPDF_PDF_BACKEND" => array(
"desc" => "Backend library that makes the outputted file (PDF, image)",
"success" => "backend",
),
"DOMPDF_DEFAULT_MEDIA_TYPE" => array(
"desc" => "Default media type (print, screen, ...)",
),
"DOMPDF_DEFAULT_PAPER_SIZE" => array(
"desc" => "Default paper size (A4, letter, ...)",
),
"DOMPDF_DEFAULT_FONT" => array(
"desc" => "Default font, used if the specified font in the CSS stylesheet was not found",
),
"DOMPDF_DPI" => array(
"desc" => "DPI scale of the document",
),
"DOMPDF_ENABLE_PHP" => array(
"desc" => "Inline PHP support",
),
"DOMPDF_ENABLE_JAVASCRIPT" => array(
"desc" => "Inline JavaScript support",
),
"DOMPDF_ENABLE_REMOTE" => array(
"desc" => "Allow remote stylesheets and images",
"success" => "remote",
),
"DOMPDF_ENABLE_CSS_FLOAT" => array(
"desc" => "Enable CSS float support (experimental)",
),
"DOMPDF_ENABLE_HTML5PARSER" => array(
"desc" => "Enable the HTML5 parser (experimental)",
),
"DEBUGPNG" => array(
"desc" => "Debug PNG images",
),
"DEBUGKEEPTEMP" => array(
"desc" => "Keep temporary image files",
),
"DEBUGCSS" => array(
"desc" => "Debug CSS",
),
"DEBUG_LAYOUT" => array(
"desc" => "Debug layout",
),
"DEBUG_LAYOUT_LINES" => array(
"desc" => "Debug text lines layout",
),
"DEBUG_LAYOUT_BLOCKS" => array(
"desc" => "Debug block elements layout",
),
"DEBUG_LAYOUT_INLINE" => array(
"desc" => "Debug inline elements layout",
),
"DEBUG_LAYOUT_PADDINGBOX" => array(
"desc" => "Debug padding boxes layout",
),
"DOMPDF_LOG_OUTPUT_FILE" => array(
"desc" => "The file in which dompdf will write warnings and messages",
"success" => "write",
),
"DOMPDF_FONT_HEIGHT_RATIO" => array(
"desc" => "The line height ratio to apply to get a render like web browsers",
),
"DOMPDF_AUTOLOAD_PREPEND" => array(
"desc" => "Prepend the dompdf autoload function to the SPL autoload functions already registered instead of appending it",
),
"DOMPDF_ADMIN_USERNAME" => array(
"desc" => "The username required to access restricted sections",
"secret" => true,
),
"DOMPDF_ADMIN_PASSWORD" => array(
"desc" => "The password required to access restricted sections",
"secret" => true,
"success" => "auth",
),
);
?>
<table class="setup">
<tr>
<th>Config name</th>
<th>Value</th>
<th>Description</th>
<th>Status</th>
</tr>
<?php foreach($defined_constants["user"] as $const => $value) { ?>
<tr>
<td class="title"><?php echo $const; ?></td>
<td>
<?php
if (isset($constants[$const]["secret"])) {
echo "******";
}
else {
var_export($value);
}
?>
</td>
<td><?php if (isset($constants[$const]["desc"])) echo $constants[$const]["desc"]; ?></td>
<td <?php
$message = "";
if (isset($constants[$const]["success"])) {
switch($constants[$const]["success"]) {
case "read":
$success = is_readable($value);
$message = ($success ? "Readable" : "Not readable");
break;
case "write":
$success = is_writable($value);
$message = ($success ? "Writable" : "Not writable");
break;
case "remote":
$success = ini_get("allow_url_fopen");
$message = ($success ? "allow_url_fopen enabled" : "allow_url_fopen disabled");
break;
case "backend":
switch (strtolower($value)) {
case "cpdf":
$success = true;
break;
case "pdflib":
$success = function_exists("PDF_begin_document");
$message = "The PDFLib backend needs the PDF PECL extension";
break;
case "gd":
$success = function_exists("imagecreate");
$message = "The GD backend requires GD2";
break;
}
break;
case "auth":
$success = !in_array($value, array("admin", "password"));
$message = ($success ? "OK" : "Password should be changed");
break;
}
echo 'class="' . ($success ? "ok" : "failed") . '"';
}
?>><?php echo $message; ?></td>
</tr>
<?php } ?>
</table>
<?php include("foot.inc"); ?>

View File

@@ -0,0 +1,255 @@
body, select {
color: #7d7a7a;
font-family: 'trebuchet ms', verdana, sans-serif;
font-size: 13px;
}
a:link, a:visited, a:active {
color: #5F83BA;
text-decoration: none;
}
a:hover {
color: #5f83ba;
text-decoration: underline;
}
img {
border: none;
}
pre,
code {
font-size: 0.8em;
font-family: "lucida console", monospace;
}
pre {
background-color: #f8f8f8;
padding: 10px;
}
select {
font-weight: bold;
}
h2 {
margin: 0.3em 0;
}
.bar {
background-image: url('images/h_bar.gif');
background-repeat: repeat-x;
background-position: bottom right;
}
#header {
height: 50px;
line-height: 30px;
}
#footer {
font-size: 0.75em;
padding-top: 12px;
background-image: url('images/h_bar.gif');
background-repeat: repeat-x;
background-position: top left;
height: 35px;
vertical-align: middle;
clear: both;
}
#logo {
position: absolute;
top: 0px;
right: 0px;
border: none;
}
.badges {
float: right;
}
#left_col, #content {
vertical-align: top;
}
/*
#left_col {
padding: 3px 3px 2em 3px;
margin-top: 2px;
width: 210px;
padding-right: 10px;
background-image: url('images/v_bar.gif');
background-repeat: repeat-y;
background-position: top right;
}
*/
#left_col {
padding: 3px 3px 3em 3px;
margin-top: 2px;
width: 120px;
padding-right: 10px;
float: left;
}
#left_col h2 {
font-size: 1.0em;
margin-top: 0.5em;
margin-bottom: 0.25em;
}
#left_col ul {
margin-top: 0.25em;
padding-left: 0px;
margin-left: 0px;
position: fixed;
}
#left_col ul li { list-style-position: inside; }
#left_col iframe { margin-left: 40px; margin-top: 10px; }
#content {
margin-left: 120px;
padding: 1em 1em 1em 2em;
min-width: 800px;
background-image: url('images/v_bar.gif');
background-repeat: repeat-y;
background-position: top left;
}
.message {
margin-top: 1em;
border: 1px dashed #5E83BA;
}
#content li {
margin-top: 0.3em;
vertical-align: top;
}
#content>*>li {
margin-right: 40px; /* keep things in line */
}
#content h2 {
text-align: left;
color: #4A9166;
}
#content h3 {
margin-top: 2em;
}
#content p {
text-align: justify;
}
#content table td,
#content table th {
padding: 0.3em;
}
#content table td.input {
white-space: nowrap;
font-family: "lucida console", monospace;
font-size: 0.8em;
}
#content textarea {
padding: 4px;
width: 100%;
border: 1px dashed #5F83BA;
-moz-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1);
box-shadow: inset 3px 3px 3px rgba(0,0,0,0.1);
}
#content button {
color: #6d6a6a;
font-family: 'trebuchet ms', verdana, sans-serif;
}
#preview {
float: right;
height: 800px;
min-width: 400px;
width: 60%;
border: 1px solid #666;
margin-left: 1em;
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
}
table.setup {
border: 1px solid #ccc;
border-collapse: collapse;
}
table.setup td,
table.setup th {
border: 1px solid #ccc;
}
table.setup th {
background-color: #ddd;
}
table.setup td.title {
background-color: #f6f6f6;
}
table.setup td.ok,
table.setup tr:hover td.ok {
background-color: #9e4;
}
table.setup td.failed,
table.setup tr:hover td.failed {
background-color: #f43;
color: white;
}
table.setup td.warning,
table.setup tr:hover td.warning {
background-color: #FCC612;
}
table.setup tr:hover td {
background-color: #EBF1F7;
}
table.setup tr:hover td.title {
background-color: #D0E0F2;
}
input[type="file"] {
width: 30em;
}
/* Method definitions from phpdoc */
.method-definition {
background-image: url('images/h_bar.gif');
background-position: bottom center;
background-repeat: repeat-x;
padding: 10px 10px 20px 10px;
margin-bottom: 1em;
}
.method-title {
color: #5F83BA;
}
.var-name,
.method-name,
.method-title {
font-weight: bold;
}
.var-type,
.method-result {
color: #4A9166;
font-style: italic;
}

View File

@@ -0,0 +1,139 @@
<!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-15">
<style>
* { padding: 0; margin: 0; }
body {
/*color: #7d7a7a;*/
/*font-family: 'trebuchet ms', verdana, sans-serif;*/
font-family: sans-serif;
}
div.page {
margin:10mm;
padding:10mm;
border:0.5pt solid gray;
}
div.bgcolor {
background-color:#e0e0e0;
line-height:170%;
}
</style>
</head>
<body>
<div class="page">
<h2><a name="bgimages">Background color, text decoration, page border</a></h2>
<p>see more testcases with background images in <a href="image_variants.html">image_variants.html</a></p>
<div class="bgcolor">
</div>
<p>&nbsp;<p>
<p style="background:yellow; line-height:170%;">Text</p>
<p><a href="bgimages" style="background:yellow; line-height:170%;">Link</a></p>
<p>&nbsp;<p>
<div style="background-color:#e0e0e0;">
block
<span style="background-color:yellow;">inline</span>
block
_<u style="background-color:yellow;">underline</u><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:underline;">underline style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:line-through;">line-through style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:overline;">overline style</span><span style="background-color:yellow;">x</span>
block
</div>
<p>&nbsp;<p>
<div style="font-size:200%; background-color:#e0e0e0;">
block
<span style="background-color:yellow;">inline</span>
block
_<u style="background-color:yellow;">underline</u><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:underline;">underline style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:line-through;">line-through style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:overline;">overline style</span><span style="background-color:yellow;">x</span>
block
</div>
<p>&nbsp;<p>
<div style="font-family:times; background-color:#e0e0e0;">
block
<span style="background-color:yellow;">inline</span>
block
_<u style="background-color:yellow;">underline</u><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:underline;">underline style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:line-through;">line-through style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:overline;">overline style</span><span style="background-color:yellow;">x</span>
block
</div>
<p>&nbsp;<p>
<div style="font-family:times; font-size:200%; background-color:#e0e0e0;">
block
<span style="background-color:yellow;">inline</span>
block
_<u style="background-color:yellow;">underline</u><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:underline;">underline style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:line-through;">line-through style</span><span style="background-color:yellow;">x</span>
block
_<span style="background-color:yellow;text-decoration:overline;">overline style</span><span style="background-color:yellow;">x</span>
block
</div>
<p>&nbsp;<p>
<div style="background-color:#e0e0e0;">
block
<span style="background-color:yellow;">inline</span>
<span style="background-color:yellow;text-decoration:underline;">
underline sdfjsfh sdfs sfd sf sf sdfsdfasf asdfasdfa asdfasdf asdf asdfas dfasdf afsafasf asdfasdasdf adfasfasdf
</span>
block
</div>
<p>&nbsp;<p>
<div style="background-color:#e0e0e0;font-family:serif;">
block
<span style="background-color:yellow;">inline</span>
block
<u style="background-color:yellow;">underline</u>
block
<span style="background-color:yellow;text-decoration:underline;">underline style</span>
block
</div>
<p>&nbsp;<p>
<p>
<span>The PHP 5 HTML to PDF converter</span>
</p>
<p>Fill fill fill fill fill fill fill fill</p>
<p>Fill fill fill fill fill fill fill fill</p>
<p>Fill fill fill fill fill fill fill fill</p>
<p>Fill fill fill fill fill fill fill fill</p>
<p>Fill fill fill fill fill fill fill fill</p>
<p>Fill fill fill fill fill fill fill fill</p>
<p>Fill fill fill fill fill fill fill fill</p>
<div>
</body> </html>

View File

@@ -0,0 +1,128 @@
/* Notes
-----------------------------------------------------------------------*/
.note_form {
display: none;
}
/* Page
-----------------------------------------------------------------------*/
.page {
background-color: white;
padding: 20px;
font-size: 0.7em;
margin-bottom: 15px;
margin-right: 5px;
}
.page table.header td h1 {
margin: 0px;
}
.page table.header {
border-bottom: 1px solid black;
}
.page h1 {
text-align: center;
color: black;
font-style: normal;
font-size: 2em;
}
.page h2 {
text-align: center;
color: black;
}
.page h3 {
color: black;
font-size: 1em;
}
.page p {
text-align: justify;
font-size: 1em;
}
.page em {
font-weight: bold;
font-style: normal;
text-decoration: underline;
margin-left: 1%;
margin-right: 1%;
}
.money_table {
width: 85%;
margin-left: auto;
margin-right: auto;
}
.money {
text-align: right;
padding-right: 20px;
}
.money_field {
text-align: right;
padding: 0px 15px 5px 15px;
font-weight: bold;
}
.total_label {
border-top: 2px double black;
font-weight: bold;
}
.total_field {
border-top: 2px double black;
text-align: right;
padding: 0px 15px 5px 15px;
font-weight: bold;
}
.written_field {
border-bottom: 0.1pt solid black;
}
.page .indent * { margin-left: 4em; }
.checkbox {
border: 1px solid black;
padding: 1px 2px;
font-size: 7px;
font-weight: bold;
}
table.fax_head {
width: 100%;
font-weight: bold;
font-size: 1.1em;
border-bottom: 1px solid black;
}
/* Sales-agreement specific
-----------------------------------------------------------------------*/
table.sa_signature_box {
margin: 2em auto 2em auto;
}
table.sa_signature_box tr td {
padding-top: 1.5em;
vertical-align: top;
white-space: nowrap;
}
.special_conditions {
font-style: italic;
margin-left: 2em;
white-space: pre;
font-weight: bold;
}
.page h2 {
text-align: left;
}

View File

@@ -0,0 +1,2 @@
p.importabs {background-color:#ffffc0;}

View File

@@ -0,0 +1,2 @@
li.import {background-color:#ffffc0;}

View File

@@ -0,0 +1,2 @@
p.import {background-color:#c0c0ff;}

View File

@@ -0,0 +1,2 @@
p.import {background-color:#eeeeee;}

View File

@@ -0,0 +1,2 @@
p.importsub {background-color:#ffffc0;}

View File

@@ -0,0 +1,2 @@
li.link {background-color:#ffffc0;}

View File

@@ -0,0 +1,2 @@
li.link {color:#ff0000;}

View File

@@ -0,0 +1,2 @@
p.link {background-color:#c0c0ff;}

View File

@@ -0,0 +1,2 @@
p.link {background-color:#eeeeee;}

View File

@@ -0,0 +1,701 @@
/* Default style definitions */
@import url(common.css);
@page {
margin: 0.25in;
}
/* General
-----------------------------------------------------------------------*/
body {
background-color: transparent;
color: black;
font-family: "verdana", "sans-serif";
margin: 0px;
padding-top: 0px;
font-size: 1em;
}
@media print {
p { margin: 2px; }
}
h1 {
font-size: 1.1em;
font-style: italic;
}
h2 {
font-size: 1.05em;
}
img {
border: none;
}
pre {
font-family: "verdana", "sans-serif";
font-size: 0.7em;
}
ul {
list-style-type: circle;
list-style-position: inside;
margin: 0px;
padding: 3px;
}
li.alpha {
list-style-type: lower-alpha;
margin-left: 15px;
}
p {
font-size: 0.8em;
}
a:link,
a:visited {
/* font-weight: bold; */
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
}
#body {
padding-bottom: 2em;
padding-top: 5px;
}
#body pre {
}
.center {
text-align: center;
}
.right {
text-align: right;
}
#money {
text-align: right;
padding-right: 20px;
}
/* Footer
-----------------------------------------------------------------------*/
#footer {
color: black;
}
#copyright {
padding: 5px;
font-size: 0.6em;
background-color: white;
}
#footer_spacer_row {
width: 100%;
}
#footer_spacer_row td {
padding: 0px;
border-bottom: 1px solid #000033;
background-color: #F7CF07;
height: 2px;
font-size: 2px;
line-height: 2px;
}
#logos {
padding: 5px;
float: right;
}
/* Section Header
-----------------------------------------------------------------------*/
#section_header {
text-align: center;
}
#job_header {
text-align: left;
background-color: white;
margin-left: 5px;
padding: 5px;
border: 1px dashed black;
}
#job_info {
font-weight: bold;
}
.header_details td {
font-size: 0.6em;
}
.header_label {
padding-left: 20px;
}
.header_field {
padding-left: 5px;
font-weight: bold;
}
/* Content
-----------------------------------------------------------------------*/
#content {
padding: 0.2em 1% 0.2em 1%;
min-height: 15em;
}
.page_buttons {
text-align: center;
margin: 3px;
font-size: 0.7em;
white-space: nowrap;
font-weight: bold;
width: 74%;
}
.link_bar {
font-size: 0.7em;
text-align: center;
margin: auto;
/* white-space: nowrap; */
}
.link_bar a {
white-space: nowrap;
font-weight: bold;
}
.page_menu li {
margin: 5px;
font-size: 0.8em;
}
/* Detail
-----------------------------------------------------------------------*/
.detail_table {
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 3px;
margin: 15px;
}
.detail_head td {
background-color: #ddd;
color: black;
font-weight: bold;
padding: 3px;
font-size: 0.75em;
text-align: center;
}
.detail_label {
padding: 3px;
font-size: 0.75em;
width: 16%;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
background-color: #ddd;
}
.detail_field {
width: 33%;
font-size: 0.8em;
color: ;
text-align: center;
padding: 3px;
}
.detail_sub_table {
font-size: 1em;
}
.detail_spacer_row td {
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: #999;
font-size: 2px;
line-height: 2px;
}
#narrow {
width: 50%;
}
.operation {
width: 1%;
}
.summary_spacer_row {
font-size: 0.1em;
}
.bar {
border-top: 1px solid black;
}
/* Forms
-----------------------------------------------------------------------*/
.form {
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-top: 10px;
}
.form td {
padding: 3px;
}
.form th, .form_head td {
background-color: #ddd
border-bottom: 1px solid black;
color: black;
padding: 3px;
text-align: center;
font-size: 0.65em;
font-weight: bold;
}
.form_head a:link,
.form_head a:visited {
color: black;
}
.form_head a:hover {
}
.sub_form_head td {
border: none;
font-size: 0.9em;
white-space: nowrap;
}
.form input {
color: black;
background-color: white;
border: 1px solid black;
padding: 1px 2px 1px 2px;
text-decoration: none;
font-size: 1em;
}
.form textarea {
color: black;
background-color: white;
border: 1px solid black;
font-size: 1em;
}
.form select {
color: black;
background-color: white;
font-size: 1em;
}
.button, a.button {
color: black;
background-color: white;
border: 1px solid black;
font-weight: normal;
white-space: nowrap;
text-decoration: none;
}
a.button {
display: inline-block;
text-align: center;
padding: 2px;
}
a.button:hover {
text-decoration: none;
color: black;
}
.form_field {
color: black;
background-color: white;
font-size: 0.7em;
}
.form_label {
color: black;
background-color: #ddd;
font-size: 0.7em;
padding: 3px;
}
/*
.form_foot {
background-color: #E5D9C3;
font-size: 0.6em;
}
*/
.form_foot td {
background-color: #ddd
border-bottom: 1px solid black;
color: black;
padding: 3px;
text-align: center;
font-size: 0.65em;
font-weight: bold;
}
.form_foot a:link,
.form_foot a:visited {
color: black;
}
.form_foot a:hover {
color: black;
}
.no_border_input input {
border: none;
}
.no_wrap {
white-space: nowrap;
}
tr.row_form td {
white-space: nowrap;
}
/* Wizards
-----------------------------------------------------------------------*/
.wizard {
font-size: 0.8em;
border-top: 1px solid black;
}
#no_border {
border: none;
}
.wizard p {
text-indent: 2%;
}
.wizard td {
padding: 3px;
/* padding-left: 3px;
padding-right: 3px;
padding-bottom: 3px;*/
}
.wizard input {
color: black;
background-color: white;
border: 1px solid black;
padding: 1px 2px 1px 2px;
text-decoration: none;
}
.wizard textarea {
color: black;
background-color: white;
border: 1px solid black;
}
.wizard select {
color: black;
background-color: white;
border: 1px solid black;
}
.wizard_head {
color: black;
font-weight: bold;
}
.wizard_buttons {
border-top: 1px solid black;
padding-top: 3px;
}
.wizard_buttons a {
background-color: white;
border: 1px solid black;
padding: 2px 3px 2px 3px;
}
/* List
-----------------------------------------------------------------------*/
.list_table,
.notif_list_table {
color: black;
padding-bottom: 4px;
background-color: white;
}
.list_table td,
.notif_list_table td {
padding: 3px 5px 3px 5px;
}
.list_table input {
color: black;
background-color: white;
border: 1px solid black;
padding: 1px 2px 1px 2px;
text-decoration: none;
}
.list_head,
.notif_list_head {
font-weight: bold;
background-color: #ddd;
font-size: 0.65em;
}
.list_head td,
.notif_list_head td {
border-top: 1px solid black;
border-bottom: 1px solid black;
color: black;
text-align: center;
white-space: nowrap;
}
.list_head a:link,
.list_head a:visited,
.notif_list_head a:link,
.notif_list_head a:visited {
color: black;
}
.list_head a:hover,
.notif_list_head a:hover {
}
.list_foot {
font-weight: bold;
background-color: #ddd;
font-size: 0.65em;
}
.list_foot td {
border-top: 1px solid black;
border-bottom: 1px solid black;
color: black;
text-align: right;
white-space: nowrap;
}
.sub_list_head td {
border: none;
font-size: 0.7em;
}
.odd_row td {
/* background-color: #EDF2F7;
border-top: 2px solid #FFFFff;*/
background-color: transparent;
border-bottom: 0.9px solid #ddd; /* 0.9 so table borders take precedence */
}
.even_row td {
/* background-color: #F8EEE4;
border-top: 3px solid #FFFFff;*/
background-color: #f6f6f6;
border-bottom: 0.9px solid #ddd;
}
.spacer_row td {
line-height: 2px;
font-size: 2px;
}
.phone_table td {
border: none;
font-size: 0.8em;
}
div.notif_list_text {
margin-bottom: 1px;
font-size: 1.1em;
}
.notif_list_row td.notif_list_job {
text-align: center;
font-weight: bold;
font-size: 0.65em;
}
.notif_list_row td.notif_list_dismiss table td {
text-align: center;
font-size: 1em;
border: none;
padding: 0px 2px 0px 2px;
}
.notif_list_row td {
padding: 5px 5px 7px 5px;
border-bottom: 1px dotted #ddd;
background-color: white;
font-size: 0.6em;
}
.notif_list_row:hover td {
background-color: #ddd;
}
/* Page
-----------------------------------------------------------------------*/
.page {
border: none;
padding: 0in;
margin-right: 0.1in;
margin-left: 0.1in;
/*margin: 0.33in 0.33in 0.4in 0.33in; */
background-color: transparent;
}
.page table.header h1{
font-size: 12pt;
}
.page>h2,
.page>p {
margin-top: 2pt;
margin-bottom: 2pt;
}
.page h2 {
page-break-after: avoid;
}
.money_table {
border-collapse: collapse;
font-size: 6pt;
}
/* Tree
-----------------------------------------------------------------------*/
.tree_div {
display: none;
background-color: #ddd;
border: 1px solid #333;
}
.tree_div .tree_step_bottom_border {
border-bottom: 1px dashed #8B9DBE;
}
.tree_div .button, .tree_row_table .button,
.tree_div .no_button {
width: 110px;
font-size: 0.7em;
padding: 3px;
text-align: center;
}
/*
.tree_div .button a, .tree_row_table .button a {
text-decoration: none;
color: #114C8D;
}
*/
.tree_row_desc {
font-weight: bold;
font-size: 0.7em;
text-indent: -10px;
}
.tree_row_info {
font-size: 0.7em;
width: 200px;
}
.tree_div_head a,
.tree_row_desc a {
color: #000033;
text-decoration: none;
}
.tree_div_head {
font-weight: bold;
font-size: 0.7em;
}
/* Summaries
-----------------------------------------------------------------------*/
.summary {
border: 1px solid black;
background-color: white;
padding: 1%;
font-size: 0.8em;
}
.summary h1 {
color: black;
font-style: normal;
}
/* Sales-agreement specific
-----------------------------------------------------------------------*/
table.sa_signature_box {
margin: 2em auto 2em auto;
}
table.sa_signature_box tr td {
padding-top: 1.25em;
vertical-align: top;
white-space: nowrap;
}
.special_conditions {
font-style: italic;
margin-left: 2em;
white-space: pre;
}
.sa_head * {
font-size: 7pt;
}
/* Change order specific
-----------------------------------------------------------------------*/
table.change_order_items {
font-size: 8pt;
width: 100%;
border-collapse: collapse;
margin-top: 2em;
margin-bottom: 2em;
}
table.change_order_items>tbody {
border: 1px solid black;
}
table.change_order_items>tbody>tr>th {
border-bottom: 1px solid black;
}
table.change_order_items>tbody>tr>td {
border-right: 1px solid black;
padding: 0.5em;
}
td.change_order_total_col {
padding-right: 4pt;
text-align: right;
}
td.change_order_unit_col {
padding-left: 2pt;
text-align: left;
}

View File

@@ -0,0 +1,87 @@
<!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" lang="en"><head>
<title></title>
<style>
body {
font-family: sans-serif;
font-size: 11px;
}
div.transformed {
border: 1px solid red;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
}
div.transformed:after {
content: attr(style);
}
div.grid {
border: 1px dotted grey;
margin: 0;
padding: 1em;
margin-bottom: -1px;
}
</style>
<!--[if IE]>
<script type="text/javascript" src="../cssSandpaper/js/EventHelpers.js"></script>
<script type="text/javascript" src="../cssSandpaper/js/cssQuery-p.js"></script>
<script type="text/javascript" src="../cssSandpaper/js/jcoglan.com/sylvester.js"></script>
<script type="text/javascript" src="../cssSandpaper/js/cssSandpaper.js"></script>
<script type="text/javascript">
if (!document.documentMode || document.documentMode < 9)
window.onload = function(){
var nodes = document.querySelectorAll("*[style]");
for (var i = 0; i < nodes.length; i++) {
var style = nodes[i].getAttribute("style");
var trans = /-ms-transform\s*:\s*([^;]+)/i.exec(style);
try {
if (trans && trans[1] !== "none") {
cssSandpaper.setTransform(nodes[i], trans[1]);
}
} catch(e) {}
}
}
</script>
<![endif]-->
</head>
<body>
<h3>none</h3>
<div class="grid"><div class="transformed" style="-webkit-transform: none; -moz-transform: none; -ms-transform: none;">&nbsp; </div></div>
<h3>rotate</h3>
<div class="grid"><div class="transformed" style="-webkit-transform: rotate(0.1rad); -moz-transform: rotate(0.1rad); -ms-transform: rotate(0.1rad);">&nbsp; </div></div>
<h3>scale</h3>
<div class="grid"><div class="transformed" style="-webkit-transform: scale(0.5, 1.5); -moz-transform: scale(0.5, 1.5); -ms-transform: scale(0.5, 1.5);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: scaleX(0.5); -moz-transform: scaleX(0.5); -ms-transform: scaleX(0.5);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: scaleY(0.5); -moz-transform: scaleY(0.5); -ms-transform: scaleY(0.5);">&nbsp; </div></div>
<h3>translate</h3>
<div class="grid"><div class="transformed" style="-webkit-transform: translate(10px, 10px); -moz-transform: translate(10px, 10px); -ms-transform: translate(10px, 10px);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: translate(20px); -moz-transform: translate(20px); -ms-transform: translate(20px);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: translateX(20%); -moz-transform: translateX(20%); -ms-transform: translateX(20%);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: translateY(30%); -moz-transform: translateY(30%); -ms-transform: translateY(30%);">&nbsp; </div></div>
<h3>skew</h3>
<div class="grid"><div class="transformed" style="-webkit-transform: skew(30deg, -4deg); -moz-transform: skew(30deg, -4deg); -ms-transform: skew(30deg, -4deg);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: skew(-4deg); -moz-transform: skew(-4deg); -ms-transform: skew(-4deg);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: skewX(20deg); -moz-transform: skewX(20deg); -ms-transform: skewX(20deg);">&nbsp; </div></div>
<div class="grid"><div class="transformed" style="-webkit-transform: skewY(-4deg); -moz-transform: skewY(-4deg); -ms-transform: skewY(-4deg);">&nbsp; </div></div>
<h3>mixed</h3>
<div class="grid"><div class="transformed" style="-webkit-transform: rotate(10deg) scale(0.5, 1.5); -moz-transform: rotate(10deg) scale(0.5, 1.5); -ms-transform: rotate(10deg) scale(0.5, 1.5);">&nbsp; </div></div>
</body>
</html>

View File

@@ -0,0 +1,41 @@
<!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-15">
<link href='http://fonts.googleapis.com/css?family=Give+You+Glory&v2' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Wallpoet&v2' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister&v2' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: sans-serif;
}
p {
font-size: 2em;
background: #eee;
padding: 1em;
}
h2 {
color: #999;
}
</style>
</head>
<body>
<h2>Give You Glory</h2>
<p style="font-family: 'Give You Glory', sans-serif;">
Grumpy wizards make toxic brew for the evil Queen and Jack
</p>
<h2>Wallpoet</h2>
<p style="font-family: 'Wallpoet', sans-serif;">
Grumpy wizards make toxic brew for the evil Queen and Jack
</p>
<h2>Love Ya Like A Sister</h2>
<p style="font-family: 'Love Ya Like A Sister', sans-serif;">
Grumpy wizards make toxic brew for the evil Queen and Jack
</p>
</body>
</html>

View File

@@ -0,0 +1,53 @@
<!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" lang="en"><head>
<title></title>
<style type="text/css">
body {
/*text-decoration: underline;*/
font-size: 50px;
}
#one span {
vertical-align: baseline;
}
#two span {
vertical-align: top;
color: green;
text-decoration: underline;
}
span.first {
font-size: 2em;
text-decoration: underline;
}
span.second {
font-family: sans-serif;
font-weight: bold;
color: rgb(255, 66, 0);
font-style: italic;
text-decoration: underline;
}
span.third {
font-family: sans-serif;
font-size: 1em;
text-decoration: underline;
}
</style>
</head>
<body>
<p id="one">
<span class="first">(enter </span><span >your </span><span class="second">text</span><span class="third"> here)</span>
</p>
<p id="two">
<sup>sup</sup>test<sub>sub</sub>
</p>
</body>
</html>

View File

@@ -0,0 +1,163 @@
<!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-15">
<style>
table {
border-spacing: 5px;
margin: 2em auto;
}
td {
border-width: 5px;
padding: 1em;
}
td.dotted { border-style: dotted; color: maroon;}
td.dashed { border-style: dashed; color: orange; }
td.solid { border-style: solid; color: yellow; }
td.double { border-style: double; color: olive; }
td.groove { border-style: groove; color: green; }
td.ridge { border-style: ridge; color: lime; }
td.inset { border-style: inset; color: teal; }
td.outset { border-style: outset; color: blue; }
div.full { border:thin blue solid; margin:2pt;}
div.partialthinsolid,
div.partial1,
div.partial2 { border:thin solid; margin:2pt;}
div.partial1 { border-color:green; }
div.partial2 { border:blue;}
div.partial3 { border-style:dashed; }
div.partial4 { border-width:thick; }
div.partial5 { border-width:medium; }
div.partial6 { border-width:3pt; }
div.partial1top,
div.partial2top { border-top:thin solid; margin:2pt;}
div.partial1top {border-top-color:green; }
div.partial2top {border-top:blue;}
.d { width: 1in; height: 1in; margin: 5pt; }
.b1 {
border: 1px solid red;
}
.b2 {
border: solid thick blue;
}
.b3 {
border: #369 thin dashed;
}
.b4 {
border: dotted green 2px;
}
.b5 {
border: 0.1em #0033DD solid;
}
.b6 {
border: orange inset 4pt;
}
hr {
page-break-after: always;
visibility: hidden;
}
</style>
</head>
<body>
<table>
<tr>
<td class="dotted">dotted</td>
<td class="dashed">dashed</td>
<td class="solid">solid</td>
<td class="double">double</td>
</tr>
<tr>
<td class="groove">groove</td>
<td class="ridge">ridge</td>
<td class="inset">inset</td>
<td class="outset">outset</td>
</tr>
</table>
<h2>partial attributes merged</h2>
<div style="border:thin solid red;">border:thin solid red;</div>
<div style="border:red thin solid;">border:red thin solid;</div>
<div class="partialthinsolid partial2">{ border:thin solid; }{border:blue; } (merged, reset all - color has no effect)</div>
<div class="partialthinsolid partial1">{ border:thin solid; }{border-color:green; } (merged, overwrite only color)</div>
<div class="partial2">{ border:thin solid; }{border:blue; } (merged, reset all - color has no effect)</div>
<div class="partial1">{ border:thin solid; }{border-color:green; } (merged, overwrite only color)</div>
<div class="full partial1">{ border:thin blue solid; }{border-color:green; } (merged, overwrite only color)</div>
<div class="full partial3">{ border:thin blue solid; }{border-style:dashed; } (merged, overwrite only style)</div>
<div class="full partial4">{ border:thin blue solid; }{border-width:thick; } (merged, overwrite only width)</div>
<div class="full partial5">{ border:thin blue solid; }{border-width:medium; } (merged, overwrite only width)</div>
<div class="full partial6">{ border:thin blue solid; }{border-width:3pt; } (merged, overwrite only width)</div>
<h2>top:</h2>
<div style="border-top:thin solid red;">border-top:thin solid red;</div>
<div style="border-top:red thin solid;">border-top:red thin solid;</div>
<div class="partial1top">{ border-top:thin solid; }{border-top-color:green; } (merged, overwrite only color)</div>
<div class="partial2top">{ border-top:thin solid; }{border-top:blue; } (merged, reset all - color has no effect)</div>
<h2>right left bottom:</h2>
<div style="border-right:thin solid red;">border-right:thin solid red;</div>
<div style="border-left:thin solid red;">border-left:thin solid red;</div>
<div style="border-bottom:thin solid red;">border-bottom:thin solid red;</div>
<h2>Individual Attributes</h2>
<div class="full" style="border-top-color:red;">{border:thin blue solid;}{border-top-color:red;}</div>
<div class="full" style="border-right-color:red;">{border:thin blue solid;}{border-right-color:red;}</div>
<div class="full" style="border-bottom-color:red;">{border:thin blue solid;}{border-bottom-color:red;}</div>
<div class="full" style="border-left-color:red;">{border:thin blue solid;}{border-left-color:red;}</div>
<div class="full" style="border-top-style:dashed;">{border:thin blue solid;}{border-top-style:dashed;}</div>
<div class="full" style="border-right-style:dashed;">{border:thin blue solid;}{border-right-style:dashed;}</div>
<div class="full" style="border-bottom-style:dashed;">{border:thin blue solid;}{border-bottom-style:dashed;}</div>
<div class="full" style="border-left-style:dashed;">{border:thin blue solid;}{border-left-style:dashed;}</div>
<div class="full" style="border-top-width:medium;">{border:thin blue solid;}{border-top-width:medium;}</div>
<div class="full" style="border-right-width:medium;">{border:thin blue solid;}{border-right-width:medium;}</div>
<div class="full" style="border-bottom-width:medium;">{border:thin blue solid;}{border-bottom-width:medium;}</div>
<div class="full" style="border-left-width:medium;">{border:thin blue solid;}{border-left-width:medium;}</div>
<h2>Individual side specific Attributes</h2>
<div class="full" style="border-color:red;">{border:thin blue solid;}{border-color:red;}</div>
<div class="full" style="border-color:red green;">{border:thin blue solid;}{border-color:red green;}</div>
<div class="full" style="border-color:red green blue;">{border:thin blue solid;}{border-color:red green blue;}</div>
<div class="full" style="border-color:red green blue gray;">{border:thin blue solid;}{border-color:red green blue gray;}</div>
<div class="full" style="border-style:dashed;">{border:thin blue solid;}{border-style:dashed;}</div>
<div class="full" style="border-style:dashed dotted;">{border:thin blue solid;}{border-style:dashed dotted;}</div>
<div class="full" style="border-style:dashed dotted double;">{border:thin blue solid;}{border-style:dashed dotted double;}</div>
<div class="full" style="border-style:dashed dotted double groove;">{border:thin blue solid;}{border-style:dashed dotted double groove;}</div>
<div class="full" style="border-width:1pt;">{border:thin blue solid;}{border-width:1pt;}</div>
<div class="full" style="border-width:1pt 2pt;">{border:thin blue solid;}{border-width:1pt 2pt;}</div>
<div class="full" style="border-width:1pt 2pt 3pt;">{border:thin blue solid;}{border-width:1pt 2pt 3pt;}</div>
<div class="full" style="border-width:1pt 2pt 3pt 4pt;">{border:thin blue solid;}{border-width:1pt 2pt 3pt 4pt;}</div>
<hr />
<h2>Misc. values</h2>
<div class="d b1"> </div>
<div class="d b2"> </div>
<div class="d b3"> </div>
<div class="d b4"> </div>
<div class="d b5"> </div>
<div class="d b6"> </div>
</body> </html>

View File

@@ -0,0 +1,55 @@
<!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-15">
<style>
.d {
width: 1in;
height: 1in;
margin: 5pt;
border-radius: 1em 80px 40px 80px;
background: #ccc;
}
.b1 {
border: 4px solid red;
background-image: url(images/goldengate.jpg);
height: 2in;
}
.b3 {
border: #369 thin dashed;
}
.b4 {
border: dotted green 2px;
}
.b6 {
border: orange inset 4pt;
}
.b7 {
border: 0.5em #0033DD groove;
}
.b8 {
border: orange ridge 4pt;
}
</style>
</head>
<body>
<div class="d b1"> </div>
<div class="d b3"> </div>
<div class="d b4"> </div>
<div class="d b5"> </div>
<div class="d b6"> </div>
<div class="d b7"> </div>
<div class="d b8"> </div>
</body> </html>

View File

@@ -0,0 +1,51 @@
<!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-15">
<style type="text/css">
body {
color: cmyk(0,0,0,1);
}
div {
margin: 2px;
}
div:before {
content: attr(style);
}
</style>
</head>
<body>
All these rectangles should look red:
<div style="background-color: red;"></div>
<div style="background-color: #FF0000;"></div>
<div style="background-color: #F00;"></div>
<div style="background-color: rgb(255, 0, 0);"></div>
<div style="background-color: rgb(100%, 0%, 0%);"></div>
<div style="background-color: cmyk(0, 1, 1, 0);"></div>
<br />
<br />
CMYK JPEG: <br />
<img src="images/cmyk_test2.jpg" />
<br /><br />
CMYK:
<div style="background-color: cmyk(1,0,0,0);"></div>
<div style="background-color: cmyk(0,1,0,0);"></div>
<div style="background-color: cmyk(0,0,1,0);"></div>
<div style="background-color: cmyk(0,0,0,1);"></div>
</body> </html>

View File

@@ -0,0 +1,47 @@
<!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-15">
<style>
p {
border: 1px dotted grey;
}
p.image:before {
content: url(images/html.png);
}
p.image:after {
content: url(images/pdf.png);
}
p.counter {
page-break-after: always;
}
p.counter:before {
content: "Page number " counter(page, upper-roman);
}
body:after {
content: "The End";
display: block;
margin-top: 2em;
text-align: center;
}
</style>
</head>
<body>
Look at the HTML source !
<p><q>quote &lt;q&gt;</q></p>
<p class="image"> to </p>
<p class="counter"></p>
<p class="counter"></p>
<p class="counter"></p>
</body>
</html>

View File

@@ -0,0 +1,62 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>12.5b counter-increment </title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
li:before {content: counter(ct1) "|" counter(ct2) "|" counter(ct3) "... ";}
li {counter-increment: ct1;}
li li {counter-increment: ct2 2;}
li li li {counter-increment: ct3 -3;}
</style>
</head>
<body>
<h2>CSS2 Test Suite: 12.5 counter-increment </h2>
[<A HREF="index.html">index page</A>] [<I>section</I>] [<A HREF="sec12-05a.htm">Previous</A>] [<A HREF="sec12-06-01.htm">Next</A>] [<A HREF="http://www.w3.org/TR/CSS2/generate.html#propdef-counter-increment">Specification</A>]
<HR>
<p>The style declarations contained within this page:</p>
<pre>span:before {content: counter(ct1) "|" counter(ct2) "|" counter(ct3) "... ";}
li span:before {counter-increment: ct1;}
li li span:before {counter-increment: ct2 2;}
li li li span:before {counter-increment: ct3 -3;}
</pre>
<hr>
<p>
The list items in the following set of lists all have 'span' elements, and each 'span' should be preceded with generated content in the form "a|b|c... " where the letters are incremented numbers. "a" numbers increment in ones, "b" in twos, and "c" in negative threes. Note that counters are <strong>not</strong> reset for each sublist, or at any point, and so should use the default '0' as their base point.
</p>
<ul>
<li><span>list item</span></li>
<li><span>list item</span></li>
<li><span>list item</span>
<ul>
<li><span>list item</span></li>
<li><span>list item</span></li>
<li><span>list item</span>
<ul>
<li><span>list item</span></li>
</ul>
</li>
<li><span>list item</span></li>
<li><span>list item</span>
<ul>
<li><span>list item</span></li>
<li><span>list item</span></li>
<li><span>list item</span></li>
<li><span>list item</span></li>
</ul>
</li>
<li><span>list item</span></li>
<li><span>list item</span></li>
</ul>
</li>
<li><span>list item</span></li>
<li><span>list item</span></li>
</ul>
<hr>[<A HREF="index.html">index page</A>] [<I>section</I>] [<A HREF="sec12-05a.htm">Previous</A>] [<A HREF="sec12-06-01.htm">Next</A>] [<A HREF="http://www.w3.org/TR/CSS2/generate.html#propdef-counter-increment">Specification</A>]
<HR>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,115 @@
<!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-15">
</head>
<body>
<h1>Font Selection</h1>
<p>Available font-family:</p>
<ul>
<li>serif (default) (Aliases: times, times-roman)</li>
<li>sans-serif (Aliases: helvetica)</li>
<li>monospace (Aliases: fixed, courier)</li>
</ul>
<p>Available font-style:</p>
<ul>
<li>normal (default)</li>
<li>italic</li>
</ul>
<p>Available font-weight:</p>
<ul>
<li>normal (default)</li>
<li>bold</li>
</ul>
<p>Other variations are falling back to a combination of the above</p>
<p>Special fonts</p>
<ul>
<li>symbol</li>
<li>zapfdingbats</li>
</ul>
<h2>Font selection</h2>
<p style="font-family:sans-serif;">abcdefghijk ABCDEFGHIJK - (Helvetica) - (sans-serif) - sans-serif</p>
<p style="font-family:helvetica;">abcdefghijk ABCDEFGHIJK - (Helvetica) - (sans-serif) - helvetica</p>
<p style="font-family:serif;">abcdefghijk ABCDEFGHIJK - (Times-Roman) - (serif) - serif</p>
<p style="font-family:times;">abcdefghijk ABCDEFGHIJK - (Times-Roman) - (serif) - times</p>
<p style="font-family:times-roman;">abcdefghijk ABCDEFGHIJK - (Times-Roman) - (serif) - times-roman</p>
<p style="font-family:monospace;">abcdefghijk ABCDEFGHIJK - (Courier)- (monospace) - mononospace</p>
<p style="font-family:fixed;">abcdefghijk ABCDEFGHIJK - (Courier)- (monospace) - fixed</p>
<p style="font-family:courier;">abcdefghijk ABCDEFGHIJK - (Courier)- (monospace) - courier</p>
<h2>Font search path</h2>
<p style="font-family:dummy1,dummy2;">abcdefghijk ABCDEFGHIJK - serif - "font-family:dummy1,dummy2;"</p>
<p style="font-family:dummy1,dummy2,sans-serif;">abcdefghijk ABCDEFGHIJK - sans-serif - "font-family:dummy1,dummy2,sans-serif;"</p>
<p style="font-family:sans-serif,dummy1,dummy2;">abcdefghijk ABCDEFGHIJK - sans-serif - "font-family:sans-serif,dummy1,dummy2;"</p>
<p style="font-family:sans-serif,courier;">abcdefghijk ABCDEFGHIJK - sans-serif - "font-family:sans-serif,courier;"</p>
<h2>Font variations</h2>
<p style="font-style:normal; font-weight:normal;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-style:normal; font-weight:normal;"</p>
<p style="font-style:normal; font-weight:lighter;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-style:normal; font-weight:lighter;"</p>
<p style="font-style:normal; font-weight:100;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-style:normal; font-weight:100;"</p>
<p style="font-style:normal; font-weight:200;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-style:normal; font-weight:200;"</p>
<p style="font-style:normal; font-weight:300;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-style:normal; font-weight:300;"</p>
<p style="font-style:normal; font-weight:400;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-style:normal; font-weight:400;"</p>
<p style="font-style:normal; font-weight:500;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-style:normal; font-weight:500;"</p>
<p style="font-style:normal; font-weight:600;">abcdefghijk ABCDEFGHIJK - serif - bold - "font-style:normal; font-weight:600;"</p>
<p style="font-style:normal; font-weight:700;">abcdefghijk ABCDEFGHIJK - serif - bold - "font-style:normal; font-weight:700;"</p>
<p style="font-style:normal; font-weight:800;">abcdefghijk ABCDEFGHIJK - serif - bold - "font-style:normal; font-weight:800;"</p>
<p style="font-style:normal; font-weight:900;">abcdefghijk ABCDEFGHIJK - serif - bold - "font-style:normal; font-weight:900;"</p>
<p style="font-style:normal; font-weight:bold;">abcdefghijk ABCDEFGHIJK - serif - bold - "font-style:normal; font-weight:bold;"</p>
<p style="font-style:normal; font-weight:bolder;">abcdefghijk ABCDEFGHIJK - serif - bold - "font-style:normal; font-weight:bolder;"</p>
<p style="font-style:italic; font-weight:normal;">abcdefghijk ABCDEFGHIJK - serif - italic - "font-style:italic; font-weight:normal;"</p>
<p style="font-style:oblique; font-weight:normal;">abcdefghijk ABCDEFGHIJK - serif - italic - "font-style:oblique; font-weight:normal;"</p>
<p style="font-style:italic; font-weight:bold;">abcdefghijk ABCDEFGHIJK - serif - bold_italic - "font-style:italic; font-weight:bold;"</p>
<p style="font-variant:small-caps; font-style:normal; font-weight:normal;">abcdefghijk ABCDEFGHIJK - serif - normal - "font-variant:small-caps; font-style:normal; font-weight:normal;"</p>
<h2>Font size</h2>
<p style="font-size:xx-small">abcdefghijk ABCDEFGHIJK - xx-small</p>
<p style="font-size:x-small">abcdefghijk ABCDEFGHIJK - x-small</p>
<p style="font-size:small">abcdefghijk ABCDEFGHIJK - small</p>
<p style="font-size:medium">abcdefghijk ABCDEFGHIJK - medium</p>
<p style="font-size:large">abcdefghijk ABCDEFGHIJK - large</p>
<p style="font-size:x-large">abcdefghijk ABCDEFGHIJK - x-large</p>
<p style="font-size:xx-large">abcdefghijk ABCDEFGHIJK - xx-large</p>
<p style="font-size:10pt">abcdefghijk ABCDEFGHIJK - 10pt</p>
<p style="font-size:12pt">abcdefghijk ABCDEFGHIJK - 12pt</p>
<p style="font-size:14pt">abcdefghijk ABCDEFGHIJK - l4pt</p>
<p style="font-size:smaller">abcdefghijk ABCDEFGHIJK - smaller</p>
<p style="font-size:larger">abcdefghijk ABCDEFGHIJK - larger</p>
<h2>Line height</h2>
<p style="line-height:100%">abcdefghijk ABCDEFGHIJK<br>abcdefghijk ABCDEFGHIJK 100%</p>
<p style="line-height:120%">abcdefghijk ABCDEFGHIJK<br>abcdefghijk ABCDEFGHIJK 120%</p>
<p style="line-height:140%">abcdefghijk ABCDEFGHIJK<br>abcdefghijk ABCDEFGHIJK 140%</p>
<p style="font-size:xx-large;line-height:100%">abcdefghijk ABCDEFGHIJK<br>abcdefghijk ABCDEFGHIJK 100%</p>
<p style="font-size:xx-large;line-height:120%">abcdefghijk ABCDEFGHIJK<br>abcdefghijk ABCDEFGHIJK 120%</p>
<p style="font-size:xx-large;line-height:140%">abcdefghijk ABCDEFGHIJK<br>abcdefghijk ABCDEFGHIJK 140%</p>
<h2>Font combined setting</h2>
<p style="font:italic small-caps bold 14pt/160% sans-serif;">style="font:italic small-caps bold 14pt/160% sans-serif;"<br>(all attributes)</p>
<p style="font:normal 10pt/160% sans-serif;">style="font:normal 10pt/160% sans-serif;"<br>(partial attributes)</p>
<p style="font:700 10pt/160% sans-serif;">style="font:700 10pt/160% sans-serif;"<br>(partial attributes)</p>
<p style="font:small sans-serif;">style="font:small sans-serif;"<br>(partial attributes)</p>
<div style="font:italic small-caps bold 14pt/160% sans-serif;">
<p>inherit style="font:italic small-caps bold 14pt/160% sans-serif;" :</p>
<p style="font:small sans-serif;">
style="font:small sans-serif;"<br>
(partial attributes - reset inherited)<br>
<span style="font-weight:bold;">style="font-weight:bold;"<br>
(partial overwrite)</span><br>
(resume partial attributes)
</p>
<p>continue inherited</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,54 @@
<!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-15">
<style>
ul { line-height:160% }
a {
border-bottom:dashed 1pt red !important;
text-decoration:none !important;
}
.monospace { font-family:monospace !important; }
</style>
</head>
<body>
<h1>Handling of "!important" property flag</h1>
<p>
Normally later css style properties defined later are overriding earlier ones.<br>
Except if they are marked with the flag "!important".<br>
Those can only be overridden by style properties which are also marked "!important".
</p>
<p>There are two classes of property overriding</p>
<ul>
<li>inherit (nested html tags)</li>
<li>merging (more css properties to the same html tag)</li>
</ul>
<p>This is handled similarly for all styles, so we check only examples here</p>
<p>ul { line-height:160% }<p>
<h2>merge a { border-bottom:dashed 1pt red !important; text-decoration:none !important; }</h2>
<p>dummy links, text decoration/border bottom:</p>
<ul>
<li><a href="">(default)</a></li>
<li><a href="" style="border-bottom-style:none;">border-bottom-style:none; (ignore)</a></li>
<li><a href="" style="border:1pt solid blue;">border:1pt solid blue; (ignore)</a></li>
<li><a href="" style="border-bottom-style:none!important;">border-bottom-style:none!important; (override)</a></li>
<li><a href="" style="border:1pt solid blue!important;">border:1pt solid blue!important; (override)</a></li>
</ul>
<h2>Inherit .monospace { font-family:monospace !important; }</h2>
<p>font family selection:</p>
<ul class="monospace">
<li>(default)</li>
<li class="font-family:sans-serif;">font-family:sans-serif; (ignored)</li>
<li style="font-family:sans-serif!important;">font-family:sans-serif!important; (override)</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,102 @@
<!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-15">
<style>
p {
font-size: 150%;
}
div {
page-break-after: always;
}
.example5 {
letter-spacing: 5px;
}
.example4 {
letter-spacing: 4px;
}
.example3 {
letter-spacing: 3px;
}
.example2 {
letter-spacing: 2px;
}
.example1 {
letter-spacing: 1px;
}
.example_1 {
letter-spacing: -1px;
}
.example_2 {
letter-spacing: -2px;
}
.example_3 {
letter-spacing: -3px;
}
.example_4 {
letter-spacing: -4px;
}
.example_5 {
letter-spacing: -5px;
}
</style>
</head>
<body>
<div style="text-align: left;">
<p class="example5">This has <strong>letter spacing</strong> of 5px</p>
<p class="example4">This has <strong>letter spacing</strong> of 4px</p>
<p class="example3">This has <strong>letter spacing</strong> of 3px</p>
<p class="example2">This has <strong>letter spacing</strong> of 2px</p>
<p class="example1">This has <strong>letter spacing</strong> of 1px</p>
<p>This has <strong>normal letter</strong> spacing</p>
<p class="example_1">This has <strong>letter spacing</strong> of -1px</p>
<p class="example_2">This has <strong>letter spacing</strong> of -2px</p>
<p class="example_3">This has <strong>letter spacing</strong> of -3px</p>
<p class="example_4">This has <strong>letter spacing</strong> of -4px</p>
<p class="example_5">This has <strong>letter spacing</strong> of -5px</p>
</div>
<div style="text-align: right;">
<p class="example5">This has <strong>letter spacing</strong> of 5px</p>
<p class="example4">This has <strong>letter spacing</strong> of 4px</p>
<p class="example3">This has <strong>letter spacing</strong> of 3px</p>
<p class="example2">This has <strong>letter spacing</strong> of 2px</p>
<p class="example1">This has <strong>letter spacing</strong> of 1px</p>
<p>This has <strong>normal letter</strong> spacing</p>
<p class="example_1">This has <strong>letter spacing</strong> of -1px</p>
<p class="example_2">This has <strong>letter spacing</strong> of -2px</p>
<p class="example_3">This has <strong>letter spacing</strong> of -3px</p>
<p class="example_4">This has <strong>letter spacing</strong> of -4px</p>
<p class="example_5">This has <strong>letter spacing</strong> of -5px</p>
</div>
<div style="text-align: center;">
<p class="example5">This has <strong>letter spacing</strong> of 5px</p>
<p class="example4">This has <strong>letter spacing</strong> of 4px</p>
<p class="example3">This has <strong>letter spacing</strong> of 3px</p>
<p class="example2">This has <strong>letter spacing</strong> of 2px</p>
<p class="example1">This has <strong>letter spacing</strong> of 1px</p>
<p>This has <strong>normal letter</strong> spacing</p>
<p class="example_1">This has <strong>letter spacing</strong> of -1px</p>
<p class="example_2">This has <strong>letter spacing</strong> of -2px</p>
<p class="example_3">This has <strong>letter spacing</strong> of -3px</p>
<p class="example_4">This has <strong>letter spacing</strong> of -4px</p>
<p class="example_5">This has <strong>letter spacing</strong> of -5px</p>
</div>
<div style="text-align: justify;">
<p class="example5">This has <strong>letter spacing</strong> of 5px. This has <strong>letter spacing</strong> of 5px. This has <strong>letter spacing</strong> of 5px. </p>
<p class="example4">This has <strong>letter spacing</strong> of 4px. This has <strong>letter spacing</strong> of 4px. This has <strong>letter spacing</strong> of 4px. </p>
<p class="example3">This has <strong>letter spacing</strong> of 3px. This has <strong>letter spacing</strong> of 3px. This has <strong>letter spacing</strong> of 3px. </p>
<p class="example2">This has <strong>letter spacing</strong> of 2px. This has <strong>letter spacing</strong> of 2px. This has <strong>letter spacing</strong> of 2px. </p>
<p class="example1">This has <strong>letter spacing</strong> of 1px. This has <strong>letter spacing</strong> of 1px. This has <strong>letter spacing</strong> of 1px. </p>
<p>This has <strong>normal letter</strong> spacing. This has <strong>normal letter</strong> spacing. This has <strong>normal letter</strong> spacing. </p>
<p class="example_1">This has <strong>letter spacing</strong> of -1px. This has <strong>letter spacing</strong> of -1px. This has <strong>letter spacing</strong> of -1px. </p>
<p class="example_2">This has <strong>letter spacing</strong> of -2px. This has <strong>letter spacing</strong> of -2px. This has <strong>letter spacing</strong> of -2px. </p>
<p class="example_3">This has <strong>letter spacing</strong> of -3px. This has <strong>letter spacing</strong> of -3px. This has <strong>letter spacing</strong> of -3px. </p>
<p class="example_4">This has <strong>letter spacing</strong> of -4px. This has <strong>letter spacing</strong> of -4px. This has <strong>letter spacing</strong> of -4px. </p>
<p class="example_5">This has <strong>letter spacing</strong> of -5px. This has <strong>letter spacing</strong> of -5px. This has <strong>letter spacing</strong> of -5px. </p>
</div>
</body> </html>

View File

@@ -0,0 +1,63 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html LANG="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS Line Height Inheritance</title>
<style type="text/css">
<!--
h1 {margin-top: 0; margin-bottom: 0;}
h2 {font-size: 125%; margin-top: 0;}
h3 {font-size: medium; margin-bottom: .5ex;}
div {border: 1px solid red;}
div div {border: 1px solid blue;}
a:link img, a:visited img { border-style: none;}
.admin {
background-color: #E0E0FF;
width: 15ex;
margin: 2ex;
padding: 1ex;
text-align: center;
font-size: .85em;
border: 0;
z-index: 10;
}
-->
</style>
</head>
<body>
<h1>Use only &lt;number&gt; for line-height</h1>
<h2>unless you like solving inexplicable inheritance problems or setting an explicit line-height on every element</h2>
<h3>div {line-height: 1}; div div {font-size: 200%}</h3>
<div style="line-height: 1;">The quick brown fox<br>jumps over the crazy
<div style="font-size: 200%;">The quick brown fox<br>jumps over the crazy</div></div>
<h3>div {line-height: 1em}; div div {font-size: 200%}</h3>
<div style="line-height: 1em;">The quick brown fox<br>jumps over the crazy
<div style="font-size: 200%;">The quick brown fox<br>jumps over the crazy</div></div>
<h3>div {line-height: 100%}; div div {font-size: 200%}</h3>
<div style="line-height: 100%;">The quick brown fox<br>jumps over the crazy
<div style="font-size: 200%;">The quick brown fox<br>jumps over the crazy</div></div>
<div class="updir" style="border: 0; margin-top: 2ex;">
<p>When rendered according to the
<a href="http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height">css 2.1 spec</a>,
the 200% text in the second two div divs, those for which line-height of the parent
are specified in em or %, will overlap, the child divs being 1/2 the height of their containing
divs; while the first div div will be 2/3 the height of its containing div,
and its text won't overlap. The overlapping text in the latter div divs is because the spec requires the calculated
line-height specified in em or % be inherited by the children. In contrast, it is &lt;number&gt; itself that is inherited by
the children, which allows the line-height specified to be applied in reference to the font-size of the child div instead of
the ancestor.</p>
<hr>
<a href="http://fm.no-ip.com/Auth/IE/line-heightIE.html">IE has an additional problem with line-height.</a>
<hr>
</div>
<div class="admin">
<a href="http://validator.w3.org/check/referer">
<img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88"></a>
<br>
Last Modified<br>2005.11.29<br>&#169; Felix Miata<br>
<A HREF="http://fm.no-ip.com/Auth/">Felix's Home</A>
</div>
</body>
</html>

View File

@@ -0,0 +1,38 @@
<!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-15">
<style>
p { width: 50%; text-align: justify; }
</style>
</head>
<body>
<p style="margin: 1em;"><strong>(margin: 1em;)</strong> The PHP Development
Team would like to announce the immediate availability of PHP 5.0.1. This is
a maintenance release that in addition to many non-critical bug fixes also
includes new UNIX and Windows installation docs which are now auto-generated
from the PHP Manual.</p>
<p style="margin: 1em 1em 1em 50%;"><strong>(margin: 1em 1em 1em
50%;)</strong> PHP 4.3.9RC1 has been released for testing. This is the first
release candidate and should have a very low number of problems and/or
bugs. Nevertheless, please download and test it as much as possible on
real-life applications to uncover any remaining issues.</p>
<p style="margin: 4em 1em 4em 4em;"><strong>(margin: 4em 1em 4em
1em;)</strong> PHP Tunisie has just released the second issue of its monthly
french PHP Magazine. In this issue you'll find a large plan on PostgreSQL,
Databases abstractions with PHP, your mini template engine, an article on
images generation with PHP, the migration towards PHP5 with
EasyPHP1.7... And many other articles and latests PHP news.</p>
<p style="margin: 1em auto 1em auto;"><strong>(margin: 1em auto 1em
auto;)</strong> The traditional International PHP Conference 2004 will be
taking place from 7th November to 10th November in Frankfurt (FFM). The Call
for Papers has been issued, so if you have an interesting talk, the
organizers would love to hear about it! You can expect a gathering of PHP
experts and core developers.</P>
</body> </html>

View File

@@ -0,0 +1,150 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
<link rel="stylesheet" media="screen, projection" href="css/linkdisplay.css">
<link rel="stylesheet" media="print" href="css/linkprint.css">
<link rel="stylesheet" media="all" href="css/linkall.css">
<link rel="stylesheet" href="css/linkdefault.css">
<style>
@page { margin:1cm; color:#0000ff; font-family:sans-serif;}
@media print {
p.media {background-color:#eeeeee;}
}
@media screen {
p.media {background-color:#c0c0ff;}
}
@media projection {
p.media {background-color:#ffffc0;}
}
@import url(css/importall.css);
@import url(css/importprint.css) print;
@import url(css/importdisplay.css) projection, screen;
@import url(css/importsub.css);
@import url(/absimagetest/importabs.css);
body { background-color:#eeeeee; margin:0pt; padding:1cm; border:0.5pt solid red; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
</head>
<body>
<h1>css @media media types</h1>
<p class="media">
Depending on dompdf_config.inc.php setting DOMPDF_DEFAULT_MEDIA_TYPE here the
background color appeares different:
</p>
<ul>
<li>print: light gray</li>
<li>screen: light blue</li>
<li>projection: light yellow</li>
</ul>
<h1>css @import media types</h1>
<p class="import">
Depending on dompdf_config.inc.php setting DOMPDF_DEFAULT_MEDIA_TYPE here the
background color appeares different:
</p>
<ul>
<li>print: light gray</li>
<li>screen or projection: light blue</li>
<li class="import">all: this line yellow</li>
</ul>
<p class="importsub">yellow by import css from subfolder</p>
<p class="importabs">yellow by import css from absolute local folder.
Note: Only works if www\test\images/importabs.css was copied to /absimagetest/importabs.css
</p>
<h1>css link media types</h1>
<p class="link">
Depending on dompdf_config.inc.php setting DOMPDF_DEFAULT_MEDIA_TYPE here the
background color appeares different:
</p>
<ul>
<li>print: light gray</li>
<li>screen or projection: light blue</li>
<li class="link">all: this line yellow background with red color</li>
</ul>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
<p>x</p>
</html>

View File

@@ -0,0 +1,18 @@
<!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" lang="en">
<head>
<style>
.a { font-style: italic; }
.b { font-weight: bold; }
.c { color: red; }
</style>
</head>
<body>
<p class="a">class="a"</p>
<p class="b">class="b"</p>
<p class="c">class="c"</p>
<p class="a b">class="a b"</p>
<p class="a b c">class="a b c"</p>
</body>
</html>

View File

@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Selector :nth-child</title>
<style type="text/css">
p {
margin: 2px;
}
div {
margin-bottom: 1em;
border: 1px solid #ddd;
}
div div {
margin: 0;
}
.nth-child-1 p:nth-child(1) strong,
.nth-child-3 p:nth-child(3) strong,
.nth-child-odd p:nth-child(odd) strong,
.nth-child-even p:nth-child(even) strong,
.nth-child-n p:nth-child(n) strong,
.nth-child-3n p:nth-child(3n) strong,
.nth-child-n2 p:nth-child(n+2) strong, /* won't work because of the split("+") */
.nth-child-2n1 p:nth-child(2n+1) strong, /* won't work because of the split("+") */
.nth-child-3nm2 p:nth-child(3n-2) strong {
background-color: #99ff99;
}
</style>
</head>
<body>
<h3>nth-child(1)</h3>
<div class="nth-child-1">
<p><strong>1</strong></p>
<p><strong>2</strong></p>
<p><strong>3</strong></p>
<p><strong>4</strong></p>
<p><strong>5</strong></p>
</div>
<h3>nth-child(3)</h3>
<div class="nth-child-3">
<p><strong>1</strong></p>
<p><strong>2</strong></p>
<p><strong>3</strong></p>
<p><strong>4</strong></p>
<p><strong>5</strong></p>
</div>
<h3>nth-child(odd)</h3>
<div class="nth-child-odd">
<p><strong>1</strong></p>
<p><strong>2</strong></p>
<p><strong>3</strong></p>
<p><strong>4</strong></p>
<p><strong>5</strong></p>
</div>
<h3>nth-child(even)</h3>
<div class="nth-child-even">
<p><strong>1</strong></p>
<p><strong>2</strong></p>
<p><strong>3</strong></p>
<p><strong>4</strong></p>
<p><strong>5</strong></p>
</div>
<h3>nth-child(n)</h3>
<div class="nth-child-n">
<p><strong>1</strong></p>
<p><strong>2</strong></p>
<p><strong>3</strong></p>
<p><strong>4</strong></p>
<p><strong>5</strong></p>
</div>
<h3>nth-child(3n)</h3>
<div class="nth-child-3n">
<p><strong>1</strong></p>
<p><strong>2</strong></p>
<p><strong>3</strong></p>
<p><strong>4</strong></p>
<p><strong>5</strong></p>
</div>
<h3>nth-child(n+2)</h3>
<div class="nth-child-n2">
<p><strong>1</strong></p>
<p><strong>2</strong></p>
<p><strong>3</strong></p>
<p><strong>4</strong></p>
<p><strong>5</strong></p>
</div>
<h3>nth-child(2n+1)</h3>
<div class="nth-child-2n1">
<p><strong>1</strong></p>
<p><strong>2</strong></p>
<p><strong>3</strong></p>
<p><strong>4</strong></p>
<p><strong>5</strong></p>
</div>
<h3>nth-child(3n-2)</h3>
<div class="nth-child-3nm2">
<p><strong>1</strong></p>
<p><strong>2</strong></p>
<p><strong>3</strong></p>
<p><strong>4</strong></p>
<p><strong>5</strong></p>
</div>
</body>
</html>

View File

@@ -0,0 +1,107 @@
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
div {
border: 2px solid #000;
width: 50px;
height: 50px;
margin: 10px;
background: green;
}
</style>
</head>
<body>
<h1>Nested block elements</h1>
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
<div style="opacity: 0.8;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>Inline elements</h1>
<span style="width: 100%;">
<span style="opacity: 0.1">ab</span>
<span style="opacity: 0.2">cb</span>
<span style="opacity: 0.3">ef</span>
<span style="opacity: 0.4">gh</span>
<span style="opacity: 0.5">ij</span>
<span style="opacity: 0.6">kl</span>
<span style="opacity: 0.7">mn</span>
<span style="opacity: 0.8">op</span>
<span style="opacity: 0.9">qr</span>
<span style="opacity: 1.0">st</span>
</span>
<br/>
<span style="width: 100%; opacity: 0.5;">
<span style="opacity: 0.1">ab</span>
<span style="opacity: 0.2">cb</span>
<span style="opacity: 0.3">ef</span>
<span style="opacity: 0.4">gh</span>
<span style="opacity: 0.5">ij</span>
<span style="opacity: 0.6">kl</span>
<span style="opacity: 0.7">mn</span>
<span style="opacity: 0.8">op</span>
<span style="opacity: 0.9">qr</span>
<span style="opacity: 1.0">st</span>
</span>
<div style="opacity: 0.1;">0.1</div>
<div style="opacity: 0.2;">0.2</div>
<div style="opacity: 0.3;">0.3</div>
<div style="opacity: 0.4;">0.4</div>
<div style="opacity: 0.5;">0.5</div>
<div style="opacity: 0.6;">0.6</div>
<div style="opacity: 0.7;">0.7</div>
<div style="opacity: 0.8;">0.8</div>
<div style="opacity: 0.9;">0.9</div>
<div style="opacity: 1.0;">1.0</div>
<div style="opacity: 1.0;">1.0 opacity</div>
<div>No opacity</div>
<div style="opacity: 0.5; height: auto;">
<div style="opacity: 0.5;">
<div style="opacity: 1.0;"></div>
<div style="opacity: 0.5;"></div>
</div>
<div style="opacity: 0.5;"></div>
</div>
</body> </html>

View File

@@ -0,0 +1,77 @@
<!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-15">
<style>
table {
border-spacing: 15px;
margin: 2em auto;
}
td {
outline-width: 5px;
border: thin dotted gray;
padding: 1em;
}
td.dotted { outline-style: dotted; color: maroon;}
td.dashed { outline-style: dashed; color: orange; }
td.solid { outline-style: solid; color: yellow; }
td.double { outline-style: double; color: olive; }
td.groove { outline-style: groove; color: green; }
td.ridge { outline-style: ridge; color: lime; }
td.inset { outline-style: inset; color: teal; }
td.outset { outline-style: outset; color: blue; }
div { margin: 5pt; }
div.full { outline:thin blue solid;}
div.partialthinsolid,
div.partial1,
div.partial2 { outline:thin solid;}
div.partial1 { outline-color:green; }
div.partial2 { outline:blue;}
div.partial3 { outline-style:dashed; }
div.partial4 { outline-width:thick; }
div.partial5 { outline-width:medium; }
div.partial6 { outline-width:3pt; }
</style>
</head>
<body>
<table>
<tr>
<th colspan="4">The dotted gray line is the border box</th>
</tr>
<tr>
<td class="dotted">dotted</td>
<td class="dashed">dashed</td>
<td class="solid">solid</td>
<td class="double">double</td>
</tr>
<tr>
<td class="groove">groove</td>
<td class="ridge">ridge</td>
<td class="inset">inset</td>
<td class="outset">outset</td>
</tr>
</table>
<h2>partial attributes merged</h2>
<div style="outline:thin solid red;">outline:thin solid red;</div>
<div style="outline:red thin solid;">outline:red thin solid;</div>
<div class="partialthinsolid partial2">{ outline:thin solid; }{outline:blue; } (merged, reset all - color has no effect)</div>
<div class="partialthinsolid partial1">{ outline:thin solid; }{outline-color:green; } (merged, overwrite only color)</div>
<div class="partial2">{ outline:thin solid; }{outline:blue; } (merged, reset all - color has no effect)</div>
<div class="partial1">{ outline:thin solid; }{outline-color:green; } (merged, overwrite only color)</div>
<div class="full partial1">{ outline:thin blue solid; }{outline-color:green; } (merged, overwrite only color)</div>
<div class="full partial3">{ outline:thin blue solid; }{outline-style:dashed; } (merged, overwrite only style)</div>
<div class="full partial4">{ outline:thin blue solid; }{outline-width:thick; } (merged, overwrite only width)</div>
<div class="full partial5">{ outline:thin blue solid; }{outline-width:medium; } (merged, overwrite only width)</div>
<div class="full partial6">{ outline:thin blue solid; }{outline-width:3pt; } (merged, overwrite only width)</div>
</body> </html>

View File

@@ -0,0 +1,38 @@
<!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" lang="en">
<head>
<style>
body {
font-family: sans-serif;
}
div {
margin: 0.5em;
width: 50pt;
height: 200pt;
border: 1pt dotted;
padding: 10px;
}
img {
border: 1pt dotted red;
}
</style>
</head>
<body>
<h3>overflow: hidden</h3>
<div style="overflow: hidden;">
<img src="images/dompdf_simple.png" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
</div>
<h3>overflow: visible</h3>
<div style="overflow: visible;">
<img src="images/dompdf_simple.png" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
</div>
</body>
</html>

View File

@@ -0,0 +1,60 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Printed document</title>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 10pt;
background: #eee;
}
div.absolute {
border: 2px dotted green;
position: absolute;
padding: 0.5em;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<!--
<div class="absolute" style="left: 20px; right: 20px;">
left/right
</div>-->
<div class="absolute" style="top: 40px; left: 40px;">
top/left
</div>
<div class="absolute" style="top: 40px; right: 40px;">
top/right
</div>
<div class="absolute" style="top: 80px; left: 40px; right: 40px;">
top/left/right
</div>
<div class="absolute" style="top: 160px; left: 160px; right: 160px; bottom: 160px; ">
top/left/right/bottom
</div>
<div class="absolute" style="bottom: 40px; right: 40px;">
bottom/right
</div>
<div class="absolute" style="bottom: 40px; left: 40px;">
bottom/left
</div>
<div class="absolute" style="bottom: 80px; left: 40px; right: 40px;">
bottom/left/right
</div>
</body>
</html>

View File

@@ -0,0 +1,379 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Printed document</title>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 10pt;
}
/* These inline styles will always be active even if an alternate stylesheet is selected with the stylesheet swticher */
.example {
width: 400px;
page-break-after: always;
margin-bottom: 10em;
}
.div-before, .div-after {
background-color: #88d;
color: #000;
}
.div-1 {
background-color: #000;
color: #fff;
}
.div-1-padding {
padding: 10px;
}
.div-1a {
background-color: #d33;
color: #fff;
}
.div-1b {
background-color: #3d3;
color: #fff;
}
.div-1c {
background-color: #33d;
color: #fff;
}
.example div p {
margin: 0 .25em;
padding: .25em 0;
}
#example-1 .div-1 {
position: static;
}
#example-2 .div-1 {
position: relative;
top:20px;
left:-40px;
}
#example-3 .div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#example-4 .div-1 {
position:relative;
}
#example-4 .div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#example-5 .div-1 {
position:relative;
}
#example-5 .div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#example-5 .div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
#example-6 .div-1 {
position:relative;
height:250px;
}
#example-6 .div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#example-6 .div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
#example-7 .div-1a {
float:left;
width:200px;
}
#example-8 .div-1a {
float:left;
width:150px;
}
#example-8 .div-1b {
float:left;
width:150px;
}
#example-9 .div-1a {
float:left;
width:190px;
}
#example-9 .div-1b {
float:left;
width:190px;
}
#example-9 .div-1c {
clear:both;
}
</style>
</head>
<body>
<h3>Examples from <br />http://www.barelyfitz.com/screencast/html-training/css/positioning/</h3>
position: static
<div id="example-1" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
position: relative
<div id="example-2" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
position: absolute
<div id="example-3" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
position: relative + position: absolute
<div id="example-4" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
two column absolute
<div id="example-5" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
two column absolute height
<div id="example-6" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
float
<div id="example-7" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
float columns
<div id="example-8" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
float columns with clear
<div id="example-9" class="example">
<div class="div-before"><p>div-before</p></div>
<div class="div-1">
<div class="div-1-padding">
<p>div-1</p>
<div class="div-1a">
<p>div-1a</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
</div>
<div class="div-1b">
<p>div-1b</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
</div>
<div class="div-1c"><p>div-1c</p></div>
</div>
</div>
<div class="div-after"><p>div-after</p></div>
</div>
</body>
</html>

View File

@@ -0,0 +1,215 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Printed document</title>
<style type="text/css">
@page {
margin: 0;
}
body {
margin-top: 3.5cm;
margin-bottom: 1cm;
margin-left: 3.5cm;
font-family: sans-serif;
text-align: justify;
}
div.header,
div.footer {
position: fixed;
background: #ddd;
width: 100%;
border: 0px solid #888;
overflow: hidden;
padding: 0.1cm;
}
div.leftpane {
position: fixed;
background: #ddd;
width: 3cm;
border-right: 1px solid #888;
top: 0cm;
left: 0cm;
height: 30cm;
}
div.header {
top: 0cm;
left: 0cm;
border-bottom-width: 1px;
height: 3cm;
}
div.footer {
bottom: 0cm;
left: 0cm;
border-top-width: 1px;
height: 1cm;
}
div.footer table {
width: 100%;
text-align: center;
}
hr {
page-break-after: always;
border: 0;
}
</style>
</head>
<body>
<div class="header">
<div style="text-align: right;">
Header line 1<br/>
Header line 2<br/>
Header line 3<br/>
Header line 4<br/>
</div>
</div>
<div class="footer">
<div style="text-align: right;">On line footer content aligned to the right. <a href="http://fr.selfhtml.org/css/proprietes/printlayouts.htm">More info on print layouts</a></div>
</div>
<div class="leftpane">
<div style="text-align: center;">
<img src="images/dompdf_simple.png" width="80" style="margin: 1cm;" />
</div>
</div>
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula
massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci
nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit
amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat
in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo
in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue
blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales
hendrerit.</p>
<hr/>
<h2>Section 2</h2>
<p>Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut
orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius,
ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus
sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer
id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae
elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et
sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue
eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non
elementum posuere, metus purus iaculis lectus, et tristique ligula
justo vitae magna.</p>
<hr/>
<h2>Section 3</h2>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at
fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu
lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod
libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean
suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla
tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus,
felis magna fermentum augue, et ultricies lacus lorem varius purus.
Curabitur eu amet.</p>
</body></html>

View File

@@ -0,0 +1,53 @@
<!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" lang="en">
<head>
<style>
body {
color: red;
}
a {
display: block;
}
a[href$=ends_1] {color: green;}
a[href$='ends_2'] {color: green;}
a[href$="ends_3"] {color: green;}
a[href^=starts_1] {color: green;}
a[href^='starts_2'] {color: green;}
a[href^="starts_3"] {color: green;}
a[href*=contains_1] {color: green;}
a[href*='contains_2'] {color: green;}
a[href*="contains_3"] {color: green;}
a[target=equal_1] {color: green;}
a[target='equal_2'] {color: green;}
a[target="equal_3"] {color: green;}
</style>
</head>
<body>
<a href="#" target="equal_1">a[target=equal_1]</a>
<a href="#" target="equal_2">a[target='equal_2']</a>
<a href="#" target="equal_3">a[target="equal_3"]</a>
<a href="test/ends_1">a[href$=ends_1]</a>
<a href="test/ends_2">a[href$='ends_2']</a>
<a href="test/ends_3">a[href$="ends_3"]</a>
<p>
<a href="test/contains_1/test">a[href*=contains_1]</a>
<a href="test/contains_2/test">a[href*='contains_2']</a>
<a href="test/contains_3/test">a[href*="contains_3"]</a>
</p>
<a href="starts_1/test">a[href^=starts_1]</a>
<a href="starts_2/test">a[href^='starts_2']</a>
<a href="starts_3/test">a[href^="starts_3"]</a>
</body>
</html>

View File

@@ -0,0 +1,15 @@
<!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" lang="en">
<head>
</head>
<body>
<table style="height: 50%; border: 0.5pt solid black;">
<tbody>
<tr>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>

View File

@@ -0,0 +1,483 @@
<!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>Insert title here</title>
</head>
<body>
<table style="table-layout: fixed; width: 350px;" border="1">
<tbody>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>Reallyyyyyyyyyy Looooooong cell conteeeent</td>
<td>short</td>
<td>Normal cell content</td>
</tr>
<tr>
<td>short</td>
<td>ReallyyyyyyyyyyLooooooong cell conteeeent</td>
<td>Normal cell content</td>
</tr>
</tbody>
</table>
</body>
</html>

View File

@@ -0,0 +1,61 @@
<!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-15">
</head>
<body>
<h1>text-align: left</h1>
<div style="text-align: left;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at odio vitae libero tempus
convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Vestibulum purus mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel, adipiscing nec, massa.
<br />
Phasellus vitae felis sed lectus dapibus facilisis. In ultrices sagittis ipsum. In at est. Integer
iaculis turpis vel magna. Cras eu est. Integer porttitor ligula a tellus. Curabitur accumsan ipsum
a velit. Sed laoreet lectus quis leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.
</div>
<h1>text-align: center</h1>
<div style="text-align: center;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at odio vitae libero tempus
convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Vestibulum purus mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel, adipiscing nec, massa.
<br />
Phasellus vitae felis sed lectus dapibus facilisis. In ultrices sagittis ipsum. In at est. Integer
iaculis turpis vel magna. Cras eu est. Integer porttitor ligula a tellus. Curabitur accumsan ipsum
a velit. Sed laoreet lectus quis leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.
</div>
<h1>text-align: right</h1>
<div style="text-align: right;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at odio vitae libero tempus
convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Vestibulum purus mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel, adipiscing nec, massa.
<br />
Phasellus vitae felis sed lectus dapibus facilisis. In ultrices sagittis ipsum. In at est. Integer
iaculis turpis vel magna. Cras eu est. Integer porttitor ligula a tellus. Curabitur accumsan ipsum
a velit. Sed laoreet lectus quis leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.
</div>
<h1>text-align: justify</h1>
<div style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at odio vitae libero tempus
convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Vestibulum purus mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel, adipiscing nec, massa.
<br />
Phasellus vitae felis sed lectus dapibus facilisis. In ultrices sagittis ipsum. In at est. Integer
iaculis turpis vel magna. Cras eu est. Integer porttitor ligula a tellus. Curabitur accumsan ipsum
a velit. Sed laoreet lectus quis leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.
</div>
</body>
</html>

View File

@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
p {
border: 1px dotted #999;
margin: 0.5em 0;
}
.underline {
text-decoration: underline;
color: red;
}
.overline {
text-decoration: overline;
color: green;
}
.line-through {
text-decoration: line-through;
color: blue;
}
</style>
</head>
<body style="font-size: 24px;">
<p style="font-family: sans-serif;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: sans-serif; font-weight: bold;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: sans-serif; font-style: italic;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: sans-serif; font-weight: bold; font-style: italic;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: serif;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: serif; font-weight: bold;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: serif; font-style: italic;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: serif; font-weight: bold; font-style: italic;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: monospace;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: monospace; font-weight: bold;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: monospace; font-style: italic;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: monospace; font-weight: bold; font-style: italic;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: 'DejaVu Sans';">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: 'DejaVu Sans'; font-weight: bold;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: 'DejaVu Sans'; font-style: italic;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: 'DejaVu Sans'; font-weight: bold; font-style: italic;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: 'DejaVu Serif';">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: 'DejaVu Serif'; font-weight: bold;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: 'DejaVu Serif'; font-style: italic;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
<p style="font-family: 'DejaVu Serif'; font-weight: bold; font-style: italic;">
<span class="underline">underline</span> <span class="line-through">line-through</span> <span class="overline">overline</span>
</p>
</body>
</html>

View File

@@ -0,0 +1,34 @@
<!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-15">
<style type="text/css">
p {
line-height: 1;
outline: 1px solid grey;
padding: 0;
}
p span {
border: 1px dotted red;
margin: -1px;
}
p span:after {
color: red;
content: " - " attr(style);
}
</style>
</head>
<body>
<p><IMG SRC="images/vblank.gif" alt="[Image]" height="20"><span style="vertical-align: sub;">test</span></p>
<p><IMG SRC="images/vblank.gif" alt="[Image]" height="20"><span style="vertical-align: super;">test</span></p>
<p><IMG SRC="images/vblank.gif" alt="[Image]" height="20"><span style="vertical-align: top;">test</span></p>
<p><IMG SRC="images/vblank.gif" alt="[Image]" height="20"><span style="vertical-align: text-top;">test</span></p>
<p><IMG SRC="images/vblank.gif" alt="[Image]" height="20"><span style="vertical-align: middle;">test</span></p>
<p><IMG SRC="images/vblank.gif" alt="[Image]" height="20"><span style="vertical-align: bottom;">test</span></p>
<p><IMG SRC="images/vblank.gif" alt="[Image]" height="20"><span style="vertical-align: text-bottom;">test</span></p>
<p><IMG SRC="images/vblank.gif" alt="[Image]" height="20"><span style="vertical-align: baseline;">test</span></p>
</body>
</html>

View File

@@ -0,0 +1,286 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>CSS1 Test Suite: 5.4.4 vertical-align</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css">
p {font-size: 12pt; border: 1px dotted orange;}
.one {vertical-align: sub;}
.two {vertical-align: super;}
.three {vertical-align: top; font-size: 12pt;}
.four {vertical-align: text-top; font-size: 12pt;}
.five {vertical-align: middle; font-size: 12pt;}
.six {vertical-align: bottom; font-size: 12pt;}
.seven {vertical-align: text-bottom; font-size: 12pt;}
.eight {vertical-align: baseline; font-size: 12pt;}
.nine {vertical-align: 50%; font-size: 12px; line-height: 16px;}
P.example {font-size: 14pt;}
BIG {font-size: 16pt;}
SMALL {font-size: 12pt;}
.ttopalign {vertical-align: text-top;}
.topalign {vertical-align: top;}
.midalign {vertical-align: middle;}
</STYLE>
</HEAD>
<BODY><P>The style declarations which apply to the text below are:</P>
<PRE>P {font-size: 12pt;}
.one {vertical-align: sub;}
.two {vertical-align: super;}
.three {vertical-align: top; font-size: 12pt;}
.four {vertical-align: text-top; font-size: 12pt;}
.five {vertical-align: middle; font-size: 12pt;}
.six {vertical-align: bottom; font-size: 12pt;}
.seven {vertical-align: text-bottom; font-size: 12pt;}
.eight {vertical-align: baseline; font-size: 12pt;}
.nine {vertical-align: 50%; font-size: 12px; line-height: 16px;}
P.example {font-size: 14pt;}
BIG {font-size: 16pt;}
SMALL {font-size: 12pt;}
.ttopalign {vertical-align: text-top;}
.topalign {vertical-align: top;}
.midalign {vertical-align: middle;}
</PRE>
<HR>
<P>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50"><SPAN class="one">The first four words</SPAN> in this sentence should be subscript-aligned. The font size of the superscripted text should not be different from that of the parent element.
</P>
<P>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50"><SPAN class="two">The first four words</SPAN> in this sentence should be superscript-aligned. The font size of the subscripted text should not be different from that of the parent element.
</P>
<P>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50"><SPAN class="three">The first four words</SPAN> in this sentence should be top-aligned, which will align their tops with the top of the tallest element in the line (probably the orange rectangle).
</P>
<P>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50">
<SPAN style="font-size: 200%;">
<SPAN class="four">The first four words</SPAN> in this sentence should be text-top-aligned, which should align their tops with the top of the tallest text in the line.
</SPAN>
</P>
<P>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50" class="five">
The image at the beginning of this sentence should be middle-aligned, which should align its middle with the point defined as the text baseline plus half the x-height.
</P>
<P>
<IMG SRC="images/vblank.gif" align="top" alt="[Image]" height="50">
<SPAN style="font-size: 200%;">
<SPAN class="six">The first four words</SPAN> in this sentence should be 12pt in size and bottom-aligned, which should align their bottom with the bottom of the lowest element in the line.
</SPAN>
</P>
<P>
<IMG SRC="images/vblank.gif" align="top" alt="[Image]" height="50">
<SPAN style="font-size: 200%;">
<SPAN class="seven">The first eight words ("eight" has a descender)</SPAN> in this sentence should be 12pt in size and text-bottom-aligned, which should align their bottom with the bottom of the lowest text (including descenders) in the line.
</SPAN>
</P>
<P>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50">
<SPAN style="font-size: 200%;">
<SPAN class="eight">The first four words</SPAN> in this sentence should be 12pt in size and baseline-aligned, which should align their baseline with the baseline of the rest of the text in the line.
</SPAN>
</P>
<P>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50"><SPAN class="nine">The first four words</SPAN> in this sentence should have a font-size of 12px and a line-height of 16px; they are also 50%-aligned, which should raise them 8px relative to the natural baseline.
</P>
<P>
In the following paragraph, all images should be aligned with the top of the 14-point text, which is identical to the first section of text, whereas any size text should be aligned with the text baseline (which is the default value).
</P>
<P class="example">
This paragraph
<IMG SRC="images/vblank.gif" alt="[Image]" height="30" class="ttopalign">
<SPAN style="font-size: 250%;">contains many images</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50" class="ttopalign">
<BIG>of varying heights</BIG>
<IMG SRC="images/vblank.gif" alt="[Image]" height="10" class="ttopalign">
<SMALL>and widths</SMALL>
<IMG SRC="images/vblank.gif" alt="[Image]" height="20" class="ttopalign">
all of which
<IMG SRC="images/vblank.gif" alt="[Image]" height="65" class="ttopalign">
<SPAN style="font-size: 2em;">should be aligned</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="35" class="ttopalign">
with the top of
<IMG SRC="images/vblank.gif" alt="[Image]" height="30" class="ttopalign">
<SPAN style="font-size: 150%;">a <SPAN style="font-size: 250%;">14-point</SPAN> text element</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50" class="ttopalign">
<SMALL>regardless of the line in which</SMALL>
<IMG SRC="images/vblank.gif" alt="[Image]" height="15" class="ttopalign">
<BIG>the images appear.</BIG>
<IMG SRC="images/vblank.gif" alt="[Image]" height="90" class="ttopalign">
</P>
<P class="explain">
In the following paragraph, all images should be aligned with the middle of the default text, whereas any text should be aligned with the text baseline (which is the default value).
</P>
<P>
This paragraph
<IMG SRC="images/vblank.gif" alt="[Image]" height="30" class="midalign">
<SPAN style="font-size: 250%;">contains many images</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50" class="midalign">
of varying heights
<IMG SRC="images/vblank.gif" alt="[Image]" height="10" class="midalign">
<SMALL>and widths</SMALL>
<IMG SRC="images/vblank.gif" alt="[Image]" height="20" class="midalign">
all of which
<IMG SRC="images/vblank.gif" alt="[Image]" height="65" class="midalign">
should be aligned
<IMG SRC="images/vblank.gif" alt="[Image]" height="35" class="midalign">
<SPAN style="font-size: 2em;">with the middle of</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50" class="midalign">
<SPAN style="font-size: 150%;">a <SPAN style="font-size: 250%;">14-point</SPAN> text element</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50" class="midalign">
<SMALL>regardless of the line in which</SMALL>
<IMG SRC="images/vblank.gif" alt="[Image]" height="15" class="midalign">
<BIG>the images appear.</BIG>
<IMG SRC="images/vblank.gif" alt="[Image]" height="90" class="midalign">
</P>
<P class="explain">
In the following paragraph, all elements should be aligned with the top of the tallest element on the line, whether that element is an image or not. Each fragment of text has been SPANned appropriately in order to cause this to happen.
</P>
<P>
<SPAN class="topalign">This paragraph</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="10" class="topalign">
<SPAN style="font-size: 250%;" class="topalign">contains many images</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="10" class="topalign">
<SPAN class="topalign">and some text</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="10" class="topalign">
<SPAN class="topalign">of varying heights</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="10" class="topalign">
<BIG class="topalign">and widths</BIG>
<IMG SRC="images/vblank.gif" alt="[Image]" height="20" class="topalign">
<SPAN class="topalign">all of which</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="65" class="topalign">
<SPAN class="topalign">should be aligned</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="35" class="topalign">
<SPAN style="font-size: 2em;" class="topalign">with the top of</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50" class="topalign">
<SPAN class="topalign">the tallest element in</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="15" class="topalign">
<BIG class="topalign">whichever line the elements appear.</BIG>
<IMG SRC="images/vblank.gif" alt="[Image]" height="90" class="topalign">
</P>
<STRONG>TABLE Testing Section</STRONG>
<P>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50"><SPAN class="one">The first four words</SPAN> in this sentence should be subscript-aligned. The font size of the superscripted text should not be different from that of the parent element.
</P>
<P>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50"><SPAN class="two">The first four words</SPAN> in this sentence should be superscript-aligned. The font size of the subscripted text should not be different from that of the parent element.
</P>
<P>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50"><SPAN class="three">The first four words</SPAN> in this sentence should be top-aligned, which will align their tops with the top of the tallest element in the line (probably the orange rectangle).
</P>
<P>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50">
<SPAN style="font-size: 200%;">
<SPAN class="four">The first four words</SPAN> in this sentence should be text-top-aligned, which should align their tops with the top of the tallest text in the line.
</SPAN>
</P>
<P>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50" class="five">
The image at the beginning of this sentence should be middle-aligned, which should align its middle with the point defined as the text baseline plus half the x-height.
</P>
<P>
<IMG SRC="images/vblank.gif" align="top" alt="[Image]" height="50">
<SPAN style="font-size: 200%;">
<SPAN class="six">The first four words</SPAN> in this sentence should be 12pt in size and bottom-aligned, which should align their bottom with the bottom of the lowest element in the line.
</SPAN>
</P>
<P>
<IMG SRC="images/vblank.gif" align="top" alt="[Image]" height="50">
<SPAN style="font-size: 200%;">
<SPAN class="seven">The first eight words ("eight" has a descender)</SPAN> in this sentence should be 12pt in size and text-bottom-aligned, which should align their bottom with the bottom of the lowest text (including descenders) in the line.
</SPAN>
</P>
<P>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50">
<SPAN style="font-size: 200%;">
<SPAN class="eight">The first four words</SPAN> in this sentence should be 12pt in size and baseline-aligned, which should align their baseline with the baseline of the rest of the text in the line.
</SPAN>
</P>
<P>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50"><SPAN class="nine">The first four words</SPAN> in this sentence should have a font-size of 12px and a line-height of 16px; they are also 50%-aligned, which should raise them 8px relative to the natural baseline.
</P>
<P>
In the following paragraph, all images should be aligned with the top of the 14-point text, which is identical to the first section of text, whereas any size text should be aligned with the text baseline (which is the default value).
</P>
<P class="example">
This paragraph
<IMG SRC="images/vblank.gif" alt="[Image]" height="30" class="ttopalign">
<SPAN style="font-size: 250%;">contains many images</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50" class="ttopalign">
<BIG>of varying heights</BIG>
<IMG SRC="images/vblank.gif" alt="[Image]" height="10" class="ttopalign">
<SMALL>and widths</SMALL>
<IMG SRC="images/vblank.gif" alt="[Image]" height="20" class="ttopalign">
all of which
<IMG SRC="images/vblank.gif" alt="[Image]" height="65" class="ttopalign">
<SPAN style="font-size: 2em;">should be aligned</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="35" class="ttopalign">
with the top of
<IMG SRC="images/vblank.gif" alt="[Image]" height="30" class="ttopalign">
<SPAN style="font-size: 150%;">a <SPAN style="font-size: 250%;">14-point</SPAN> text element</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50" class="ttopalign">
<SMALL>regardless of the line in which</SMALL>
<IMG SRC="images/vblank.gif" alt="[Image]" height="15" class="ttopalign">
<BIG>the images appear.</BIG>
<IMG SRC="images/vblank.gif" alt="[Image]" height="90" class="ttopalign">
</P>
<P class="explain">
In the following paragraph, all images should be aligned with the middle of the default text, whereas any text should be aligned with the text baseline (which is the default value).
</P>
<P>
This paragraph
<IMG SRC="images/vblank.gif" alt="[Image]" height="30" class="midalign">
<SPAN style="font-size: 250%;">contains many images</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50" class="midalign">
of varying heights
<IMG SRC="images/vblank.gif" alt="[Image]" height="10" class="midalign">
<SMALL>and widths</SMALL>
<IMG SRC="images/vblank.gif" alt="[Image]" height="20" class="midalign">
all of which
<IMG SRC="images/vblank.gif" alt="[Image]" height="65" class="midalign">
should be aligned
<IMG SRC="images/vblank.gif" alt="[Image]" height="35" class="midalign">
<SPAN style="font-size: 2em;">with the middle of</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50" class="midalign">
<SPAN style="font-size: 150%;">a <SPAN style="font-size: 250%;">14-point</SPAN> text element</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50" class="midalign">
<SMALL>regardless of the line in which</SMALL>
<IMG SRC="images/vblank.gif" alt="[Image]" height="15" class="midalign">
<BIG>the images appear.</BIG>
<IMG SRC="images/vblank.gif" alt="[Image]" height="90" class="midalign">
</P>
<P class="explain">
In the following paragraph, all elements should be aligned with the top of the tallest element on the line, whether that element is an image or not. Each fragment of text has been SPANned appropriately in order to cause this to happen.
</P>
<P>
<SPAN class="topalign">This paragraph</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="10" class="topalign">
<SPAN style="font-size: 250%;" class="topalign">contains many images</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="10" class="topalign">
<SPAN class="topalign">and some text</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="10" class="topalign">
<SPAN class="topalign">of varying heights</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="10" class="topalign">
<BIG class="topalign">and widths</BIG>
<IMG SRC="images/vblank.gif" alt="[Image]" height="20" class="topalign">
<SPAN class="topalign">all of which</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="65" class="topalign">
<SPAN class="topalign">should be aligned</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="35" class="topalign">
<SPAN style="font-size: 2em;" class="topalign">with the top of</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="50" class="topalign">
<SPAN class="topalign">the tallest element in</SPAN>
<IMG SRC="images/vblank.gif" alt="[Image]" height="15" class="topalign">
<BIG class="topalign">whichever line the elements appear.</BIG>
<IMG SRC="images/vblank.gif" alt="[Image]" height="90" class="topalign">
</P>
</BODY>
</HTML>

View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS white-space property</title>
<link rel="Stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<style>
#wrap { margin:30px auto; width:600px; font-family:sans-serif; color:#444; cursor:default; }
h1 { font-size:40px; text-align:center; font-weight:bold; margin-bottom:30px; text-shadow:0 0 3px #ddd; }
pre { background-color:#eee; margin:10px 0; padding:5px; }
p.demo { background-color:orange; width:100px; margin:10px 0; font-family:monospace; }
</style>
</head>
<body>
<div id="wrap">
<h1>CSS white-space property</h1>
<p> Given this CSS code: </p>
<pre>
p {
width:100px;
background-color:orange;
margin:10px 0;
font-family:monospace;
}
</pre>
<p> and this HTML code: </p>
<pre>
&lt;p&gt;
P
A
R
A
G
R
A
P
H
&lt;/p&gt;
</pre>
<p> Depending on the white-space property, the resulting presentation will be: </p>
<hr>
<p> normal </p>
<p class="demo" style="white-space:normal">
P
A
R
A
G
R
A
P
H
</p>
<hr>
<p> nowrap </p>
<p class="demo" style="white-space:nowrap">
P
A
R
A
G
R
A
P
H
</p>
<hr>
<p> pre </p>
<p class="demo" style="white-space:pre">
P
A
R
A
G
R
A
P
H
</p>
<hr>
<p> pre-wrap </p>
<p class="demo" style="white-space:pre-wrap">
P
A
R
A
G
R
A
P
H
</p>
<hr>
<p> pre-line </p>
<p class="demo" style="white-space:pre-line">
P
A
R
A
G
R
A
P
H
</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,36 @@
<!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" lang="en"><head>
<title></title>
<style type="text/css">
div {
background: #EDEDED;
border: solid 1px #CCC;
padding: 10px;
width: 50px;
margin: 10px;
}
.break-word {
word-wrap: break-word;
}
</style>
</head>
<body>
<h3>break-word</h3>
<div class="break-word">
<p>I'm a veeeeeeeerryyyyyy loooooooonggggggg teeeeexxxtttt</p>
<p>http://www.w3.org/TR/2011/WD-css3-text-20110412/</p>
</div>
<h3>normal</h3>
<div class="normal">
<p>I'm a veeeeeeeerryyyyyy loooooooonggggggg teeeeexxxtttt</p>
<p>http://www.w3.org/TR/2011/WD-css3-text-20110412/</p>
</div>
</body>
</html>

View File

@@ -0,0 +1,40 @@
<!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>z-index</title>
<style type="text/css">
div {
position: absolute;
}
</style>
</head>
<body>
<div style="background: #fff; opacity: 0.8; border: 6px solid red; z-index: 3; padding: 3em; top: 3em; left: 2em; width: 6em;">
z-index: 3, order: 1
</div>
<div style="background: #fff; opacity: 0.8; border: 6px solid green; z-index: 2; padding: 3em; top: 6em; left: 6em; width: 6em;">
z-index: 2, order: 2
</div>
<div style="background: #fff; opacity: 0.8; border: 6px solid blue; z-index: 1; padding: 3em; top: 1em; left: 4em; width: 6em;">
z-index: 1, order: 3
</div>
<div style="background: #fff; opacity: 0.8; border: 6px solid red; z-index: auto; padding: 3em; top: 23em; left: 2em; width: 6em;">
z-index: auto, order: 1
</div>
<div style="background: #fff; opacity: 0.8; border: 6px solid green; z-index: auto; padding: 3em; top: 26em; left: 6em; width: 6em;">
z-index: auto, order: 2
</div>
<div style="background: #fff; opacity: 0.8; border: 6px solid blue; z-index: auto; padding: 3em; top: 21em; left: 4em; width: 6em;">
z-index: auto, order: 3
</div>
</body>
</html>

View File

@@ -0,0 +1,214 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="STYLESHEET" href="css/print_static.css" type="text/css" />
</head>
<body>
<div id="body">
<div id="section_header">
</div>
<div id="content">
<div class="page" style="font-size: 7pt">
<table style="width: 100%;" class="header">
<tr>
<td><h1 style="text-align: left">SCHEDULE A</h1></td>
<td><h1 style="text-align: right">Job: 132-003</h1></td>
</tr>
</table>
<table style="width: 100%; font-size: 8pt;">
<tr>
<td>Job: <strong>132-003</strong></td>
<td>Purchasers(s): <strong>Palmer</strong></td>
</tr>
<tr>
<td>Created: <strong>2004-08-13</strong></td>
<td>Last Change: <strong>2004-08-16 9:28 AM</strong></td>
</tr>
<tr>
<td>Address: <strong>667 Pine Lodge Dr.</strong></td>
<td>Legal: <strong>N/A</strong></td>
</tr>
</table>
<table style="width: 100%; border-top: 1px solid black; border-bottom: 1px solid black; font-size: 8pt;">
<tr>
<td>Model: <strong>Franklin</strong></td>
<td>Elevation: <strong>B</strong></td>
<td>Size: <strong>1160 Cu. Ft.</strong></td>
<td>Style: <strong>Reciprocating</strong></td>
</tr>
</table>
<table class="change_order_items">
<tr><td colspan="6"><h2>Standard Items:</h2></td></tr>
<tbody>
<tr>
<th>Item</th>
<th>Description</th>
<th>Quantity</th>
<th colspan="2">Unit Cost</th>
<th>Total</th>
</tr>
<tr class="even_row">
<td style="text-align: center">1</td>
<td>Sprockets (13 tooth)</td>
<td style="text-align: center">50</td>
<td style="text-align: right; border-right-style: none;">$10.00</td>
<td class="change_order_unit_col" style="border-left-style: none;">Ea.</td>
<td class="change_order_total_col">$5,000.00</td>
</tr>
<tr class="odd_row">
<td style="text-align: center">2</td>
<td>Cogs (Cylindrical)</td>
<td style="text-align: center">45</td>
<td style="text-align: right; border-right-style: none;">$25.00</td>
<td class="change_order_unit_col" style="border-left-style: none;">Ea.</td>
<td class="change_order_total_col">$1125.00</td>
</tr>
<tr class="even_row">
<td style="text-align: center">3</td>
<td>Gears (15 tooth)</td>
<td style="text-align: center">32</td>
<td style="text-align: right; border-right-style: none;">$19.00</td>
<td class="change_order_unit_col" style="border-left-style: none;">Ea.</td>
<td class="change_order_total_col">$608.00</td>
</tr>
<tr class="odd_row">
<td style="text-align: center">4</td>
<td>Leaf springs (13 N/m)</td>
<td style="text-align: center">6</td>
<td style="text-align: right; border-right-style: none;">$125.00</td>
<td class="change_order_unit_col" style="border-left-style: none;">Ea.</td>
<td class="change_order_total_col">$750.00</td>
</tr>
<tr class="even_row">
<td style="text-align: center">5</td>
<td>Coil springs (6 N/deg)</td>
<td style="text-align: center">7</td>
<td style="text-align: right; border-right-style: none;">$11.00</td>
<td class="change_order_unit_col" style="border-left-style: none;">Ea.</td>
<td class="change_order_total_col">$77.00</td>
</tr>
</tbody>
<tr>
<td colspan="3" style="text-align: right;">(Tax is not included; it will be collected on closing.)</td>
<td colspan="2" style="text-align: right;"><strong>GRAND TOTAL:</strong></td>
<td class="change_order_total_col"><strong>$7560.00</strong></td></tr>
</table>
<table class="sa_signature_box" style="border-top: 1px solid black; padding-top: 2em; margin-top: 2em;">
<tr>
<td>WITNESS:</td><td class="written_field" style="padding-left: 2.5in">&nbsp;</td>
<td style="padding-left: 1em">PURCHASER:</td><td class="written_field" style="padding-left: 2.5in; text-align: right;">X</td>
</tr>
<tr>
<td colspan="3" style="padding-top: 0em">&nbsp;</td>
<td style="text-align: center; padding-top: 0em;">Mr. Leland Palmer</td>
</tr>
<tr><td colspan="4" style="white-space: normal">
This change order shall have no force or effect until approved and signed
by an authorizing signing officer of the supplier. Any change or special
request not noted on this document is not contractual.
</td>
</tr>
<tr>
<td colspan="2">ACCEPTED THIS
<span class="written_field" style="padding-left: 4em">&nbsp;</span>
DAY OF <span class="written_field" style="padding-left: 8em;">&nbsp;</span>,
20<span class="written_field" style="padding-left: 4em">&nbsp;</span>.
</td>
<td colspan="2" style="padding-left: 1em;">TWIN PEAKS SUPPLY LTD.<br/><br/>
PER:
<span class="written_field" style="padding-left: 2.5in">&nbsp;</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/php">
if ( isset($pdf) ) {
$font = Font_Metrics::get_font("verdana");
// If verdana isn't available, we'll use sans-serif.
if (!isset($font)) { Font_Metrics::get_font("sans-serif"); }
$size = 6;
$color = array(0,0,0);
$text_height = Font_Metrics::get_font_height($font, $size);
$foot = $pdf->open_object();
$w = $pdf->get_width();
$h = $pdf->get_height();
// Draw a line along the bottom
$y = $h - 2 * $text_height - 24;
$pdf->line(16, $y, $w - 16, $y, $color, 1);
$y += $text_height;
$text = "Job: 132-003";
$pdf->text(16, $y, $text, $font, $size, $color);
$pdf->close_object();
$pdf->add_object($foot, "all");
global $initials;
$initials = $pdf->open_object();
// Add an initals box
$text = "Initials:";
$width = Font_Metrics::get_text_width($text, $font, $size);
$pdf->text($w - 16 - $width - 38, $y, $text, $font, $size, $color);
$pdf->rectangle($w - 16 - 36, $y - 2, 36, $text_height + 4, array(0.5,0.5,0.5), 0.5);
$pdf->close_object();
$pdf->add_object($initials);
// Mark the document as a duplicate
$pdf->text(110, $h - 240, "DUPLICATE", Font_Metrics::get_font("verdana", "bold"),
110, array(0.85, 0.85, 0.85), 0, 0, -52);
$text = "Page {PAGE_NUM} of {PAGE_COUNT}";
// Center the text
$width = Font_Metrics::get_text_width("Page 1 of 2", $font, $size);
$pdf->page_text($w / 2 - $width / 2, $y, $text, $font, $size, $color);
}
</script>
</body>
</html>

View File

@@ -0,0 +1,210 @@
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
body {
margin: 18pt 18pt 24pt 18pt;
}
* {
font-family: georgia,serif;
font-weight: bold;
}
p {
text-align: justify;
font-size: 1em;
margin: 0.5em;
padding: 10px;
}
</style>
</head>
<body>
<script type="text/php">
if ( isset($pdf) ) {
$font = Font_Metrics::get_font("verdana");;
$size = 6;
$color = array(0,0,0);
$text_height = Font_Metrics::get_font_height($font, $size);
$foot = $pdf->open_object();
$w = $pdf->get_width();
$h = $pdf->get_height();
// Draw a line along the bottom
$y = $h - $text_height - 24;
$pdf->line(16, $y, $w - 16, $y, $color, 0.5);
$pdf->close_object();
$pdf->add_object($foot, "all");
$text = "Page {PAGE_NUM} of {PAGE_COUNT}";
// Center the text
$width = Font_Metrics::get_text_width("Page 1 of 2", $font, $size);
$pdf->page_text($w / 2 - $width / 2, $y, $text, $font, $size, $color);
}
</script>
<h1>Lorem ipsum dolor sit amet</h1>
<h2><a name="anchor1">Anchor 1</a></h2>
<p><a href="#anchor3">link to anchor3</a></p>
<p><a href="http://dompdf.github.com/">dompdf.github.com</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at
odio vitae libero tempus convallis. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Vestibulum purus
mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel,
adipiscing nec, massa. Phasellus vitae felis sed lectus dapibus
facilisis. In ultrices sagittis ipsum. In at est. Integer iaculis
turpis vel magna. Cras eu est. Integer porttitor ligula a
tellus. Curabitur accumsan ipsum a velit. Sed laoreet lectus quis
leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.</p>
<p>Curabitur ut diam eu dui vestibulum pharetra. Nam pellentesque, justo
non hendrerit venenatis, mi orci pretium mi, et vehicula leo arcu quis
diam. Nullam mattis laoreet quam. Morbi mollis sem ut tellus. Nam mi
massa, lobortis eu, sollicitudin et, iaculis et, massa. Maecenas purus
mauris, luctus sit amet, pharetra in, facilisis sit amet, elit. Nullam
vel erat tempus purus molestie suscipit. Vestibulum odio lorem,
sollicitudin non, volutpat sit amet, tincidunt vel, nunc. Nulla quis
ante vestibulum odio feugiat facilisis. Proin lorem nisl, viverra at,
rhoncus quis, semper nec, mi. Donec euismod enim vitae velit. Nulla
sed lectus. Vivamus placerat, lacus sed vehicula sagittis, arcu massa
adipiscing lorem, bibendum luctus nisl tortor vitae leo.</p>
<p>Etiam a mauris. Proin justo elit, accumsan sit amet, tempus et,
blandit id, tellus. Morbi varius, nisi id iaculis aliquam, lacus
ligula facilisis velit, ac pharetra ipsum augue a massa. Etiam rhoncus
commodo orci. Mauris ullamcorper sagittis turpis. Nullam magna libero,
sagittis sed, auctor faucibus, accumsan vitae, urna. Pellentesque
volutpat. Aliquam sapien ipsum, eleifend nec, imperdiet vitae,
consectetuer id, quam. Donec a urna. Suspendisse sit amet
velit. Curabitur quis nisi id dui viverra ornare. Sed condimentum enim
quis tortor. Ut condimentum, magna non tempus tincidunt, leo nibh
molestie tellus, vitae convallis dolor ante sed ante. Nunc et
metus. Phasellus ultricies. Fusce faucibus tortor sit amet mauris.</p>
<p>Aliquam enim. Duis et diam. Praesent porta, mauris quis pellentesque
volutpat, erat elit vulputate eros, vitae pulvinar augue velit sit
amet sem. Fusce eu urna eu nisi condimentum posuere. Vivamus sed
felis. Duis eget urna vitae eros interdum dignissim. Proin justo eros,
eleifend in, porttitor in, malesuada non, neque. Etiam sed
augue. Nulla sit amet magna. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Mauris facilisis. Curabitur massa magna, pulvinar a,
nonummy eget, egestas vitae, mauris. Quisque vel elit sit amet lorem
malesuada facilisis. Vestibulum porta, metus sit amet egestas
interdum, urna justo euismod erat, id tristique urna leo quis
nibh. Morbi non erat.</p>
<p>Cras fringilla, nulla id egestas elementum, augue nunc iaculis nibh,
ac adipiscing nibh justo id tortor. Donec vel orci a nisi ultricies
aliquet. Nunc urna quam, adipiscing molestie, vehicula non,
condimentum non, magna. Integer magna. Donec quam metus, pulvinar id,
suscipit eget, euismod ac, orci. Nulla facilisi. Nullam nec
mauris. Morbi in mi. Etiam urna lectus, pulvinar ac, sollicitudin eu,
euismod ac, lectus. Fusce elit. Sed ultricies odio ac felis.</p>
<h1>Cras iaculis. Nulla facilisi.</h1>
<h2><a name="anchor2">Anchor 2</a></h2>
<p><a href="#anchor1">link to anchor1</a></p>
<p>Cras iaculis. Nulla facilisi. Fusce vitae arcu. Integer lectus mauris,
ornare vel, accumsan eget, scelerisque vel, nunc. Maecenas justo urna,
volutpat vel, vehicula vel, ullamcorper nec, odio. Suspendisse laoreet
nisi sed erat. Cras convallis sollicitudin sapien. Phasellus ac erat
eu mi rutrum rhoncus. Morbi et velit. Morbi odio nisi, pharetra eget,
sollicitudin sed, aliquam at, nisl. Quisque euismod diam in
sapien. Integer accumsan urna in risus.</p>
<p>Proin sit amet nisl. Phasellus dui ipsum, laoreet a, pulvinar id,
fringilla ut, libero. In hac habitasse platea dictumst. Maecenas mi
magna, cursus sed, rutrum eget, molestie nec, dui. Suspendisse
lacus. Vivamus nibh urna, accumsan sit amet, gravida sed, convallis a,
leo. Cras sollicitudin orci sit amet eros. Pellentesque eu odio et
velit tempor dignissim. Morbi vehicula malesuada enim. Pellentesque
tincidunt, tellus ac fringilla tempor, justo libero interdum nunc, eu
sollicitudin tortor augue nec tellus. Nullam eget leo quis tellus
gravida faucibus. Nam gravida. Curabitur rhoncus egestas
nunc. Curabitur mollis, nisi sed suscipit gravida, enim felis interdum
justo, vel accumsan magna nunc ut libero. Ut fermentum. Fusce luctus,
est sit amet feugiat lobortis, nisl eros bibendum libero, ut suscipit
felis ligula in massa. Proin congue elit et nisi. Cras ac nisl. Nunc
ullamcorper neque vel diam.</p>
<h1>Ut pellentesque arcu ac lectus.</h1>
<p>Sed ac lorem. Ut pellentesque arcu ac lectus. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Pellentesque ultrices metus sollicitudin pede. Donec fermentum
est a velit fringilla mollis. Duis ligula. Fusce viverra laoreet
odio. Suspendisse sit amet ligula. Maecenas nunc velit, sagittis eu,
bibendum eu, placerat at, nibh. Praesent ut erat eget nisi gravida
imperdiet. Quisque vitae sapien. Ut eros.</p>
<p>Donec eros ligula, dignissim vel, ultricies id, mattis in, massa. Duis
lobortis dui nec orci. Sed ullamcorper metus non massa. Aliquam eget
mauris ac nulla elementum posuere. Sed porta, augue vitae rhoncus
aliquet, felis quam eleifend est, vitae rutrum metus arcu vel
lorem. Proin laoreet, mauris sit amet aliquet eleifend, nisl sem
molestie nisi, eu varius eros ligula non erat. Integer ac
sem. Suspendisse lectus. Aliquam erat volutpat. Fusce sit amet leo
faucibus erat molestie ultrices. Maecenas lacinia lectus eget
dui. Etiam porta porttitor ante. Phasellus sit amet lacus adipiscing
enim mollis iaculis. Fusce congue, nulla a commodo aliquam, erat dui
fermentum dui, pellentesque faucibus orci enim at mauris. Pellentesque
a diam porta magna tempor posuere. Donec lorem.</p>
<p>Sed viverra aliquam turpis. Aliquam lacus. Duis id massa. Nullam
ante. Suspendisse condimentum. Donec adipiscing, felis vel semper
sollicitudin, lacus justo pretium est, sed blandit pede risus eu
ante. Praesent ante nulla, fringilla id, ultrices et, feugiat a,
metus. Proin ac velit a metus suscipit fermentum. Integer aliquet. Sed
sapien nulla, placerat at, rutrum at, condimentum quis, libero. In
accumsan, tellus nec tincidunt malesuada, pede arcu commodo ipsum, ac
mattis tortor urna vitae enim. Aenean nonummy, mauris eget commodo
bibendum, augue sem ultrices nunc, eget rhoncus metus erat placerat
lectus. Aliquam mollis lectus in justo. Vivamus iaculis lacus sit amet
ligula. Etiam consectetuer convallis diam. Curabitur sollicitudin,
felis eu vehicula scelerisque, nisl urna aliquam orci, sit amet
laoreet mi turpis id ligula. Donec at enim non nulla adipiscing
dapibus. Aenean nisl.</p>
<p>Ut in lacus nec enim volutpat pellentesque. Integer euismod. In odio
eros, malesuada in, mattis vel, tempor nec, sem. In libero tellus,
varius vitae, bibendum in, elementum quis, nisl. Duis tortor. Etiam at
justo. Pellentesque facilisis mauris non nunc. Praesent eros mi,
dapibus eget, placerat ac, lobortis quis, sem. Nulla rhoncus
turpis. Nulla vitae mi. Proin id massa. Nunc eros.</p>
<h1>Aliquam molestie pulvinar ligula.</h1>
<h2><a name="anchor3">Anchor 3</a></h2>
<p><a href="#anchor2">link to anchor2</a></p>
<p>Vestibulum dui risus, varius ut, semper et, consequat ultrices,
felis. Pellentesque iaculis urna in velit. Ut pharetra. Nunc
fringilla, nisi vitae fringilla placerat, enim justo semper erat,
mollis feugiat leo neque eu sem. Vestibulum orci urna, suscipit a,
accumsan nec, fringilla in, risus. Nullam ante. Nullam nec
eros. Nullam varius. Nulla facilisi. In auctor libero in
metus. Aliquam porttitor congue eros. Nulla facilisi. Mauris euismod
turpis ut felis. Ut nunc nisl, cursus quis, eleifend at, viverra
bibendum, lacus. Donec consequat lacus eu sapien. Fusce pulvinar
lectus quis nunc. In hac habitasse platea dictumst.</p>
<p>Aliquam molestie pulvinar ligula. Maecenas imperdiet, urna eget
ultrices adipiscing, nibh ante elementum neque, id molestie massa quam
ut nunc. Nullam porta. Phasellus a magna in sem volutpat
viverra. Quisque aliquet nunc ac turpis. Mauris dolor enim, viverra
rutrum, placerat et, laoreet et, justo. In id nulla. Donec
erat. Phasellus nec mi sed velit mollis cursus. Vestibulum
tincidunt. Praesent dui libero, facilisis eu, vulputate eget, aliquet
nec, ipsum. Pellentesque in nisl in mauris pretium euismod.</p>
</body> </html>

View File

@@ -0,0 +1,46 @@
<!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" lang="en"><head>
<title></title>
</head>
<body>
<h1>Line break test</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at
odio vitae libero tempus convallis. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Vestibulum purus
mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel,<br/>
adipiscing nec, massa. Phasellus vitae felis sed lectus dapibus
facilisis. In ultrices sagittis ipsum. In at est. Integer iaculis
turpis vel magna. Cras eu est. Integer porttitor ligula a
<br/>
<br/>
tellus. Curabitur accumsan ipsum a velit. Sed laoreet lectus quis
leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.</p>
<p>Line break at beginning of next paragraph:</p>
<p style="border: 0.5pt solid blue"><br/>
Line 2</p>
<p>Line break within a font tag:
<font face="Trebuchet MS,Arial,Helvetica,sans-serif">ABCDE<br/>FGHIJK</font></p>
<p>Line break within two nested spans: <span>span 1 <span>2<br/>break</span></span></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at
odio vitae libero tempus convallis. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Vestibulum purus
mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel,<br/>
adipiscing nec, massa. Phasellus vitae felis sed lectus dapibus
facilisis. In ultrices sagittis ipsum. In at est. Integer iaculis
turpis vel magna. Cras eu est. Integer porttitor ligula a
<br/>
<br/>
tellus. Curabitur accumsan ipsum a velit. Sed laoreet lectus quis
leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.</p>
</body>
</html>

View File

@@ -0,0 +1,34 @@
<!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>Insert title here</title>
</head>
<body>
<fieldset>
<legend>legend</legend>
<input type="text" value="input type text" /><br />
<input type="password" value="input type password" /><br />
<input type="checkbox" value="input type checkbox" /><br />
<input type="checkbox" checked value="input type checkbox" /><br />
<input type="radio" value="input type radio" /><br />
<input type="radio" checked value="input type radio" /><br />
<input type="submit" value="input type submit" /><br />
<input type="reset" value="input type reset" /><br />
<input type="file" value="input type file" /><br />
<input type="hidden" value="input type hidden" />&lt;&lt; input type hidden<br />
<input type="image" value="input type image" />&lt;&lt; input type image<br />
<input type="button" value="input type button" /><br />
<button>button</button><br />
<textarea>textarea
this is a
test
foo
</textarea><br />
<select>
<option>FOO</option>
<option selected>BAR</option>
</select><br />
</fieldset>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,43 @@
<html>
<style>
table { margin: auto; }
td {
font-size: 0.8em;
padding: 4pt;
text-align: center;
font-family: sans-serif;
}
</style>
<body>
<table>
<thead>
<tr>
<td colspan="20">Header</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="20">Footer</td>
</tr>
</tfoot>
<?php
$i_max = 40;
$j_max = 20;
for ( $i = 1; $i <= $i_max; $i++): ?>
<tr>
<?php
for ( $j = 1; $j <= $j_max; $j++) {
$r = (int)(255*$i / $i_max);
$b = (int)(255*$j / $j_max);
$g = (int)(255*($i + $j)/($i_max + $j_max));
$c = "black;";
$bg = "rgb($r,$g,$b)";
echo "<td style=\"color: $c; background-color: $bg;\">" . ($i * $j) . "</td>\n";
}
?>
</tr>
<?php endfor; ?>
</table>
</body>
</html>

View File

@@ -0,0 +1,6 @@
<!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" lang="en"><head>
<title></title>
</head>
<body><p style="font-family: verdana">a&#xA0;b&nbsp;c&nbsp;</p></body></html>

View File

@@ -0,0 +1,62 @@
<!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" lang="en">
<head>
<style>
table { border-collapse: separate; border-spacing: 5px; margin: 1px; border: 1px solid black; }
td { border: 1px solid grey; width: 10px; height: 10px; padding: 2px;}
td td { border: 1px solid green; }
td td td { border: 1px solid red; }
</style>
</head>
<body>
<table>
<tr>
<td>
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="margin-top: 1em; width: 300px;">
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td colspan="2">a</td>
</tr>
<tr>
<td>b</td>
<td>c</td>
</tr>
</table>
</td>
<td rowspan="2">d</td>
</tr>
<tr>
<td>e</td>
</tr>
</table>
</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
</tr>
</table>
</body>
</html>

View File

@@ -0,0 +1,162 @@
<!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-15">
<style>
body {
color: #7d7a7a;
font-family: DejaVu Sans, 'trebuchet ms', verdana, sans-serif;
font-size: 11px;
}
.none li { list-style-type: none; }
.decimal li { list-style-type: decimal; }
.lower-alpha li { list-style-type: lower-alpha; }
.lower-latin li { list-style-type: lower-latin; }
.lower-roman li { list-style-type: lower-roman; }
.lower-greek li { list-style-type: lower-greek; }
.upper-alpha li { list-style-type: upper-alpha; }
.upper-latin li { list-style-type: upper-latin; }
.upper-roman li { list-style-type: upper-roman; }
.upper-greek li { list-style-type: upper-greek; }
.decimal-leading-zero li { list-style-type: decimal-leading-zero; }
</style>
</head>
<body>
<h3>none</h3>
<ol class="none">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>decimal</h3>
<ol class="decimal">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>lower-alpha</h3>
<ol class="lower-alpha">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>lower-latin</h3>
<ol class="lower-latin">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>lower-roman</h3>
<ol class="lower-roman">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>lower-greek</h3>
<ol class="lower-greek">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>upper-alpha</h3>
<ol class="upper-alpha">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>upper-latin</h3>
<ol class="upper-latin">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>upper-roman</h3>
<ol class="upper-roman">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3 style="page-break-before: always;">Advanced</h3>
<ol class="decimal">
<li>Item 1</li>
<li>Item 2
<ol class="lower-roman">
<li>Item 1
<ol class="upper-roman">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</li>
<li>Item 2</li>
<li>Item 3
<ol class="decimal-leading-zero">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</li>
</ol>
</li>
<li>Item 3</li>
</ol>
<h3>"start" attribute (8)</h3>
<ol start="8">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h3>"value" attributes (1, 5, none)</h3>
<ol>
<li value="1">Item 1</li>
<li value="5">Item 2</li>
<li>Item 3</li>
</ol>
<h3>decimal-leading-zero</h3>
<ol class="decimal-leading-zero">
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
<li>Item #</li>
</ol>
</body> </html>

View File

@@ -0,0 +1,39 @@
<!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-15">
</head>
<body>
<p>Here's a simple list from my favourite website:</p>
<ul>
<li>The Zend Engine II with a new object model and dozens of new features.</li>
<li>XML support has been completely redone in PHP 5, all extensions are
now focused around the excellent libxml2 library
(http://www.xmlsoft.org/).</li>
<li>A new SimpleXML extension for easily accessing and manipulating XML
as PHP objects. It can also interface with the DOM extension and
vice-versa.</li>
<li>A brand new built-in SOAP extension for interoperability with Web Services.</li>
<li>A new MySQL extension named MySQLi for developers using MySQL 4.1 and
later. This new extension includes an object-oriented interface in
addition to a traditional interface; as well as support for many of
MySQL's new features, such as prepared statements.</li>
<li>SQLite has been bundled with PHP. For more information on SQLite,
please visit their website. </li>
<li>Streams have been greatly improved, including the ability to access low-level socket operations on streams.</li>
<li>And lots more...</li>
<ul><li>Sublists</li><li>work</li><li>too!</li></ul>
</ul>
</body> </html>

View File

@@ -0,0 +1,108 @@
<!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-15">
<style>
body { font-family: verdana, sans-serif;}
table {
margin-bottom: 2em;
}
thead {
background-color: #eeeeee;
}
tbody {
background-color: #ffffee;
}
th,td {
padding: 3pt;
}
table.separate {
border-collapse: separate;
border-spacing: 5pt;
border: 3pt solid #33d;
}
table.separate td {
border: 2pt solid #33d;
}
table.collapse {
border-collapse: collapse;
border: 1pt solid black;
}
table.collapse td {
border: 1pt solid black;
}
</style>
</head>
<body>
border-collapse: separate
<table class="separate">
<thead>
<tr>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
<th>head 4</th>
</tr>
</thead>
<tr>
<td rowspan="2">cell 1</td>
<td>cell 2</td>
<td colspan="2">cell 3</td>
</tr>
<tr>
<td style="border: 4px double black" colspan="2">cell 4</td>
<td rowspan="2">cell 5</td>
</tr>
<tr>
<td colspan="3">cell 6</td>
</tr>
<tr>
<td colspan="4">cell 7</td>
</tr>
</table>
border-collapse: collapse
<table class="collapse">
<thead>
<tr>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
<th>head 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</tr>
<tr>
<td colspan="2">cell 5</td>
<td>cell 6</td>
<td>cell 7</td>
</tr>
<tr>
<td>cell 8</td>
<td>cell 9</td>
<td colspan="2">cell 10</td>
</tr>
</tbody>
<tr>
<td colspan="4">cell 11</td>
</tr>
</table>
</body> </html>

View File

@@ -0,0 +1,19 @@
<!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" lang="en"><head>
<title></title>
</head>
<body>
<table>
<tr>
<td><img src="images/dompdf_simple.png"/></td>
<td>Some Text</td>
</tr>
<tr>
<td>More Text</td>
<td>Blah</td>
</tr>
</table>
</body>
</html>

View File

@@ -0,0 +1,312 @@
<!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-15">
<style>
.disc li { list-style-type: disc; }
.circle li { list-style-type: circle; }
.square li { list-style-type: square; }
.image li { list-style-type: square; list-style-image:url(images/png.png)}
.missing li { list-style-type: square; list-style-image:url(dummy.png)}
.nobullet li { list-style-type: none;}
.noimage li { list-style-type: none; list-style-image:url(dummy.png)}
.bigimage li { list-style-type: square; list-style-image:url(images/dokuwiki-128.png)}
.mindentimage li { list-style-type: square; list-style-image:url(images/png.png); margin-left:50px;}
.mindentimage2 li { list-style-type: square; list-style-image:url(images/png.png); margin-left:100px;}
.pindentimage li { list-style-type: square; list-style-image:url(images/png.png); padding-left:50px;}
.pindentimage2 li { list-style-type: square; list-style-image:url(images/png.png); padding-left:100px;}
.mindentsquare li { list-style-type: square; margin-left:50px;}
.mindentsquare2 li { list-style-type: square; margin-left:100px;}
.pindentsquare li { list-style-type: square; padding-left:50px;}
.pindentsquare2 li { list-style-type: square; padding-left:100px;}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul><li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</ul>
<ul class="circle">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at
odio vitae libero tempus convallis. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Vestibulum purus
mauris, dapibus eu, sagittis quis, sagittis quis, mi. Morbi fringilla
massa quis velit. Curabitur metus massa, semper mollis, molestie vel,
adipiscing nec, massa. Phasellus vitae felis sed lectus dapibus
facilisis. In ultrices sagittis ipsum. In at est. Integer iaculis
turpis vel magna. Cras eu est. Integer porttitor ligula a
tellus. Curabitur accumsan ipsum a velit. Sed laoreet lectus quis
leo. Nulla pellentesque molestie ante. Quisque vestibulum est id
justo. Ut pellentesque ante in neque.</li>
<li>Curabitur ut diam eu dui vestibulum pharetra. Nam pellentesque, justo
non hendrerit venenatis, mi orci pretium mi, et vehicula leo arcu quis
diam. Nullam mattis laoreet quam. Morbi mollis sem ut tellus. Nam mi
massa, lobortis eu, sollicitudin et, iaculis et, massa. Maecenas purus
mauris, luctus sit amet, pharetra in, facilisis sit amet, elit. Nullam
vel erat tempus purus molestie suscipit. Vestibulum odio lorem,
sollicitudin non, volutpat sit amet, tincidunt vel, nunc. Nulla quis
ante vestibulum odio feugiat facilisis. Proin lorem nisl, viverra at,
rhoncus quis, semper nec, mi. Donec euismod enim vitae velit. Nulla
sed lectus. Vivamus placerat, lacus sed vehicula sagittis, arcu massa
adipiscing lorem, bibendum luctus nisl tortor vitae leo.</li>
<li style="list-style-position: inside">Inside. Aliquam enim. Duis et diam. Praesent porta, mauris quis pellentesque
volutpat, erat elit vulputate eros, vitae pulvinar augue velit sit
amet sem. Fusce eu urna eu nisi condimentum posuere. Vivamus sed
felis. Duis eget urna vitae eros interdum dignissim. Proin justo eros,
eleifend in, porttitor in, malesuada non, neque. Etiam sed
augue. Nulla sit amet magna. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Mauris facilisis. Curabitur massa magna, pulvinar a,
nonummy eget, egestas vitae, mauris. Quisque vel elit sit amet lorem
malesuada facilisis. Vestibulum porta, metus sit amet egestas
interdum, urna justo euismod erat, id tristique urna leo quis
nibh. Morbi non erat.</li>
</ul>
<ul class="disc">
<li>Item 1 disc</li>
<li>Item 2 disc</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 disc</li>
</ul>
<ul class="circle">
<li>Item 1 circle</li>
<li>Item 2 circle</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 circle</li>
</ul>
<ul class="square">
<li>Item 1 square</li>
<li>Item 2 square</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 square </li>
</ul>
<ul class="image">
<li>Item 1 image</li>
<li>Item 2 image</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 image</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-image:none">Item 7 noimage</li>
<ul>
<li>sub Item 1 image</li>
<li>sub Item 2 image</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-image:none">sub Item 5 noimage</li>
</ul>
</ul>
<ul class="missing">
<li>Item 1 missing image - fallback square</li>
<li>Item 2 missing image - fallback square</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 missing image - fallback square</li>
</ul>
<ul class="nobullet">
<li>Item 1 nobullet</li>
<li>Item 2 nobullet</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 nobullet</li>
</ul>
<ul class="noimage">
<li>Item 1 missing image - fallback none</li>
<li>Item 2 missing image - fallback none</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 missing image - fallback none</li>
</ul>
<ul class="bigimage">
<li>Item 1 bigimage</li>
<li>Item 2 bigimage</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>Item 4 bigimage</li>
</ul>
<ul class="mindentimage">
<li>margin Item 1 image</li>
<li>margin Item 2 image</li>
<li>Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li>margin Item 4 image</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-image:none">margin Item 7 noimage</li>
<ul class="mindentimage2">
<li>margin sub Item 1 image</li>
<li>margin sub Item 2 image</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-position: outside">Outside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<li style="list-style-image:none">margin sub Item 5 noimage</li>
</ul>
</ul>
<ul class="pindentimage">
<li>padding Item 1 image</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<ul class="pindentimage2">
<li>padding sub Item 1 image</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
</ul>
</ul>
<ul class="mindentsquare">
<li>margin Item 1 square</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<ul class="mindentsquare2">
<li>margin sub Item 1 square</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
</ul>
</ul>
<ul class="pindentsquare">
<li>padding Item 1 square</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
<ul class="pindentsquare2">
<li>padding sub Item 1 square</li>
<li style="list-style-position: inside">Inside. Lorem ipsum dolor sit amet, consectetuer sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.</li>
</ul>
</ul>
<h1>combined list attributes list-style</h1>
<ul style="list-style:square inside url(dummy.png);">
<li>list-style:square inside url(dummy.png);</li>
<li style="list-style-position:outside;">list-style:outside;[overwrites only position]</li>
</ul>
<ul style="list-style:square inside url(images/png.png);">
<li>list-style:square inside url(images/png.png);</li>
<li style="list-style-position:outside;">list-style-position:outside;[overwrites only position]</li>
<li style="list-style:outside;">list-style-position:outside;[overwrite attributes - firefox3: all; dompdf, internet explorer 8: only position]</li>
<li style="list-style:none;">list-style:none; [resets both, bullet and image]</li>
</ul>
</body> </html>

View File

@@ -0,0 +1,14 @@
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
p.serif { font-family: "DejaVu Serif", serif; }
p.sans-serif { font-family: "DejaVu Sans", sans-serif; }
</style>
</head>
<body>
<p class="serif">&eacute; &copy; &laquo; avoir et &ecirc;tre &alpha; &beta;</p>
<p class="sans-serif">&eacute; &copy; &laquo; avoir et &ecirc;tre &alpha; &beta;</p>
</body> </html>

File diff suppressed because it is too large Load Diff

Some files were not shown because too many files have changed in this diff Show More