From d2397d8d63a4e5325e0d6aff0ea8fc802da7468c Mon Sep 17 00:00:00 2001
From: Richard Worth <rdworth@gmail.com>
Date: Mon, 9 Jun 2008 05:42:13 +0000
Subject: [PATCH] added simple visual tests

---
 tests/visual/all.css         | 73 +++++++++++++++++++++++++++++++
 tests/visual/all.html        | 84 ++++++++++++++++++++++++++++++++++++
 tests/visual/datepicker.html | 28 ++++++++++++
 tests/visual/dialog.html     | 30 +++++++++++++
 tests/visual/draggable.html  | 25 +++++++++++
 tests/visual/resizable.html  | 26 +++++++++++
 tests/visual/selectable.html | 36 ++++++++++++++++
 tests/visual/sortable.html   | 36 ++++++++++++++++
 8 files changed, 338 insertions(+)
 create mode 100644 tests/visual/all.css
 create mode 100644 tests/visual/all.html
 create mode 100644 tests/visual/datepicker.html
 create mode 100644 tests/visual/dialog.html
 create mode 100644 tests/visual/draggable.html
 create mode 100644 tests/visual/resizable.html
 create mode 100644 tests/visual/selectable.html
 create mode 100644 tests/visual/sortable.html

diff --git a/tests/visual/all.css b/tests/visual/all.css
new file mode 100644
index 000000000..f7e5be506
--- /dev/null
+++ b/tests/visual/all.css
@@ -0,0 +1,73 @@
+
+body { margin: 0; padding: 20px; background: black; }
+ul.plugins { margin: 0; padding: 0; }
+ul.plugins li { margin: 0 12px 12px 0;
+	list-style-type: none; width: 210px; height: 220px; float: left;
+	color: white; border: 1px solid gray; text-align: center; font-weight: bold; }
+
+#accordion, #draggable, #droppable,
+#resizable, #selectable, #slider, #sortable, #tabs {
+	margin: 10px;
+	width: 190px; height: 180px;
+	text-align: center;
+	background: #FF9C08; color: white; font-weight: bold;
+}
+#selectable div {
+	width: 45px; height: 45px; float: left; margin: 6px;
+	border: 1px solid white;
+}
+#selectable .ui-selecting {
+	background: gray;
+}
+#selectable .ui-selected {
+	background: black;
+}
+#sortable div {
+	width: 45px; height: 45px; float: left; margin: 6px;
+	border: 1px solid white;
+}
+#sortable .ui-sortable-helper {
+	background: black;
+}
+
+.ui-dialog { background-color: #FF9C08; }
+.ui-dialog .ui-dialog-titlebar { background: black; padding: 0px; height: 28px;	_height: 29px; }
+.ui-dialog.ui-draggable .ui-dialog-titlebar { cursor: move; }
+
+.ui-dialog .ui-dialog-titlebar-close {
+	width: 16px; height: 16px; position: absolute; top: 6px; right: 7px;
+	cursor: default; color: white;
+}
+
+.ui-dialog .ui-dialog-titlebar-close-hover { color: #FF9C08; }
+
+.ui-dialog .ui-dialog-title {
+	margin-left: 5px; color: white; font-weight: bold;
+	position: relative; top: 7px; left: 4px;
+}
+
+.ui-dialog .ui-dialog-content {
+	margin: 1.2em;
+}
+
+.ui-dialog .ui-dialog-buttonpane {
+	position: absolute;
+	bottom: 8px;
+	right: 12px;
+	width: 100%;
+	text-align: right;
+}
+
+.ui-dialog .ui-dialog-buttonpane button {
+	margin: 6px;
+}
+
+/* Dialog handle styles */
+.ui-dialog .ui-resizable-n { cursor: n-resize; height: 6px; width: 100%; top: 0px; left: 0px; background: gray !important; border: none !important; }
+.ui-dialog .ui-resizable-s { cursor: s-resize; height: 8px; width: 100%; bottom: 0px; left: 0px; background: gray !important; border: none !important; }
+.ui-dialog .ui-resizable-e { cursor: e-resize; width: 7px; right: 0px; top: 0px; height: 100%; background: gray !important; border: none !important; }
+.ui-dialog .ui-resizable-w { cursor: w-resize; width: 7px; left: 0px; top: 0px; height: 100%; background: gray !important; border: none !important; }
+.ui-dialog .ui-resizable-se { cursor: se-resize; width: 9px; height: 9px; right: 0px; bottom: 0px; background: gray !important; border: none !important; }
+.ui-dialog .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: 0px; bottom: 0px; background: gray !important; border: none !important; }
+.ui-dialog .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 29px; left: 0px; top: 0px; background: gray !important; border: none !important; }
+.ui-dialog .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 29px; right: 0px; top: 0px; background: gray !important; border: none !important; }
diff --git a/tests/visual/all.html b/tests/visual/all.html
new file mode 100644
index 000000000..fe8cae919
--- /dev/null
+++ b/tests/visual/all.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Simple All</title>
+	<link rel="stylesheet" href="all.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="../../themes/ui.datepicker.css" type="text/css" media="screen">
+	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+	<script type="text/javascript" src="../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/ui.accordion.js"></script>
+	<script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
+	<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
+	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+	<script type="text/javascript" src="../../ui/ui.selectable.js"></script>
+	<script type="text/javascript" src="../../ui/ui.slider.js"></script>
+	<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+	<script type="text/javascript" src="../../ui/ui.tabs.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		$("#datepicker").datepicker();
+		$("#dialog").click(function() { $("<div/>").dialog(); });
+		$("#draggable").draggable();
+		$("#resizable").resizable();
+		$("#selectable").selectable();
+		$("#sortable").sortable();
+	});
+	</script>
+</head>
+<body>
+
+<ul class="plugins">
+<li>
+	Datepicker
+	<div style="text-align:left;margin-left:10px;">
+		<input type="text" id="datepicker">
+	</div>
+</li>
+<li>
+	Dialog
+	<div id="dialog">
+		<button>Open</button>
+	</div>
+</li>
+<li>
+	Draggable
+	<div id="draggable"></div>
+</li>
+<li>
+	Resizable
+	<div id="resizable"></div>
+</li>
+<li>
+	Selectable
+	<div id="selectable">
+		<div>1</div>
+		<div>2</div>
+		<div>3</div>
+		<div>4</div>
+		<div>5</div>
+		<div>6</div>
+		<div>7</div>
+		<div>8</div>
+		<div>9</div>
+	</div>
+</li>
+<li>
+	Sortable
+	<div id="sortable">
+		<div>C</div>
+		<div>I</div>
+		<div>G</div>
+		<div>F</div>
+		<div>D</div>
+		<div>H</div>
+		<div>A</div>
+		<div>E</div>
+		<div>B</div>
+	</div>
+</li>
+</ul>
+
+</body>
+</html>
diff --git a/tests/visual/datepicker.html b/tests/visual/datepicker.html
new file mode 100644
index 000000000..e8d63c61f
--- /dev/null
+++ b/tests/visual/datepicker.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Simple Datepicker</title>
+	<link rel="stylesheet" href="all.css" type="text/css" media="screen">
+	<link rel="stylesheet" href="../../themes/ui.datepicker.css" type="text/css" media="screen">
+	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+	<script type="text/javascript" src="../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		$("#datepicker").datepicker();
+	});
+	</script>
+</head>
+<body>
+
+<ul class="plugins">
+<li>
+	Datepicker
+	<div style="text-align:left;margin-left:10px;">
+		<input type="text" id="datepicker">
+	</div>
+</li>
+</ul>
+
+</body>
+</html>
diff --git a/tests/visual/dialog.html b/tests/visual/dialog.html
new file mode 100644
index 000000000..12e7c2b43
--- /dev/null
+++ b/tests/visual/dialog.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Simple Dialog</title>
+	<link rel="stylesheet" href="all.css" type="text/css" media="screen">
+	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+	<script type="text/javascript" src="../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
+	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		var offset = $("#dialog").offset();
+		$("#dialog").click(function() { $("<div/>").dialog(); });
+	});
+	</script>
+</head>
+<body class="flora">
+
+<ul class="plugins">
+<li>
+	Dialog
+	<div id="dialog">
+		<button>Open</button>
+	</div>
+</li>
+</ul>
+
+</body>
+</html>
diff --git a/tests/visual/draggable.html b/tests/visual/draggable.html
new file mode 100644
index 000000000..342265c07
--- /dev/null
+++ b/tests/visual/draggable.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Simple Draggable</title>
+	<link rel="stylesheet" href="all.css" type="text/css" media="screen">
+	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+	<script type="text/javascript" src="../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		$("#draggable").draggable();
+	});
+	</script>
+</head>
+<body>
+
+<ul class="plugins">
+<li>
+	Draggable
+	<div id="draggable"></div>
+</li>
+</ul>
+
+</body>
+</html>
diff --git a/tests/visual/resizable.html b/tests/visual/resizable.html
new file mode 100644
index 000000000..ba6e4ee96
--- /dev/null
+++ b/tests/visual/resizable.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Simple Resizable</title>
+	<link rel="stylesheet" href="all.css" type="text/css" media="screen">
+	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+	<script type="text/javascript" src="../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		$("#resizable").resizable();
+	});
+	</script>
+</head>
+
+<body>
+
+<ul class="plugins">
+<li>
+	Resizable
+	<div id="resizable"></div>
+</li>
+</ul>
+
+</body>
+</html>
diff --git a/tests/visual/selectable.html b/tests/visual/selectable.html
new file mode 100644
index 000000000..f96980ecc
--- /dev/null
+++ b/tests/visual/selectable.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Simple Selectable</title>
+	<link rel="stylesheet" href="all.css" type="text/css" media="screen">
+	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+	<script type="text/javascript" src="../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/ui.selectable.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		$("#selectable").selectable();
+	});
+	</script>
+</head>
+
+<body>
+
+<ul class="plugins">
+<li>
+	Selectable
+	<div id="selectable">
+		<div>1</div>
+		<div>2</div>
+		<div>3</div>
+		<div>4</div>
+		<div>5</div>
+		<div>6</div>
+		<div>7</div>
+		<div>8</div>
+		<div>9</div>
+	</div>
+</li>
+</ul>
+
+</body>
+</html>
diff --git a/tests/visual/sortable.html b/tests/visual/sortable.html
new file mode 100644
index 000000000..68cd71511
--- /dev/null
+++ b/tests/visual/sortable.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Simple Sortable</title>
+	<link rel="stylesheet" href="all.css" type="text/css" media="screen">
+	<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+	<script type="text/javascript" src="../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		$("#sortable").sortable();
+	});
+	</script>
+</head>
+
+<body>
+
+<ul class="plugins">
+<li>
+	Sortable
+	<div id="sortable">
+		<div>C</div>
+		<div>I</div>
+		<div>G</div>
+		<div>F</div>
+		<div>D</div>
+		<div>H</div>
+		<div>A</div>
+		<div>E</div>
+		<div>B</div>
+	</div>
+</li>
+</ul>
+
+</body>
+</html>
-- 
2.39.5