From bf43ab6d30846b1ac856ae5c033019f50fe3a152 Mon Sep 17 00:00:00 2001
From: Richard Worth <rdworth@gmail.com>
Date: Sat, 21 Feb 2009 11:34:08 +0000
Subject: [PATCH] Added diffs to static and visual markup side-by-side tests

---
 external/jsdiff/jsdiff.js                     | 159 ++++++++++++++++++
 tests/index.html                              |  84 +++------
 tests/slider.html                             |  63 +++++++
 tests/static/draggable/default.html           |   6 +-
 tests/static/droppable/default.html           |   4 +-
 tests/static/slider/default.html              |   4 +-
 tests/static/slider/default_vertical.html     |   4 +-
 tests/static/slider/slider_horizontal.html    |   4 +-
 .../slider/slider_horizontal_range.html       |   6 +-
 .../slider/slider_horizontal_range_max.html   |   5 +-
 .../slider/slider_horizontal_range_min.html   |   5 +-
 tests/static/slider/slider_vertical.html      |   4 +-
 .../static/slider/slider_vertical_range.html  |   6 +-
 .../slider/slider_vertical_range_max.html     |   5 +-
 .../slider/slider_vertical_range_min.html     |   5 +-
 tests/static/sortable/default.html            |   6 +-
 tests/static/tabs/default.html                |   6 +-
 tests/tests.css                               |   8 +
 tests/tests.js                                |  56 ++++++
 tests/visual/dialog/default.html              |   4 +-
 tests/visual/draggable/default.html           |   8 +-
 tests/visual/droppable/default.html           |   8 +-
 tests/visual/resizable/default.html           |   6 +-
 tests/visual/selectable/default.html          |   1 -
 tests/visual/slider/default.html              |   4 +-
 tests/visual/slider/default_vertical.html     |  23 +++
 tests/visual/slider/slider_horizontal.html    |   4 +-
 .../slider/slider_horizontal_range.html       |   4 +-
 .../slider/slider_horizontal_range_max.html   |   4 +-
 .../slider/slider_horizontal_range_min.html   |   4 +-
 tests/visual/slider/slider_vertical.html      |   4 +-
 .../visual/slider/slider_vertical_range.html  |   4 +-
 .../slider/slider_vertical_range_max.html     |   4 +-
 .../slider/slider_vertical_range_min.html     |   4 +-
 tests/visual/sortable/default.html            |   9 +-
 35 files changed, 381 insertions(+), 154 deletions(-)
 create mode 100644 external/jsdiff/jsdiff.js
 create mode 100644 tests/slider.html
 create mode 100644 tests/tests.css
 create mode 100644 tests/tests.js
 create mode 100644 tests/visual/slider/default_vertical.html

diff --git a/external/jsdiff/jsdiff.js b/external/jsdiff/jsdiff.js
new file mode 100644
index 000000000..31c3a273e
--- /dev/null
+++ b/external/jsdiff/jsdiff.js
@@ -0,0 +1,159 @@
+/*
+ * Javascript Diff Algorithm
+ *  By John Resig (http://ejohn.org/)
+ *  Modified by Chu Alan "sprite"
+ *
+ * More Info:
+ *  http://ejohn.org/projects/javascript-diff-algorithm/
+ */
+
+function escape(s) {
+    var n = s;
+    n = n.replace(/&/g, "&amp;");
+    n = n.replace(/</g, "&lt;");
+    n = n.replace(/>/g, "&gt;");
+    n = n.replace(/"/g, "&quot;");
+
+    return n;
+}
+
+function diffString( o, n ) {
+  o = o.replace(/\s+$/, '');
+  n = n.replace(/\s+$/, '');
+
+  var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );
+  var str = "";
+
+  var oSpace = o.match(/\s+/g);
+  if (oSpace == null) {
+    oSpace = ["\n"];
+  } else {
+    oSpace.push("\n");
+  }
+  var nSpace = n.match(/\s+/g);
+  if (nSpace == null) {
+    nSpace = ["\n"];
+  } else {
+    nSpace.push("\n");
+  }
+
+  if (out.n.length == 0) {
+      for (var i = 0; i < out.o.length; i++) {
+        str += '<del>' + escape(out.o[i]) + oSpace[i] + "</del>";
+      }
+  } else {
+    if (out.n[0].text == null) {
+      for (n = 0; n < out.o.length && out.o[n].text == null; n++) {
+        str += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
+      }
+    }
+
+    for ( var i = 0; i < out.n.length; i++ ) {
+      if (out.n[i].text == null) {
+        str += '<ins>' + escape(out.n[i]) + nSpace[i] + "</ins>";
+      } else {
+        var pre = "";
+
+        for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++ ) {
+          pre += '<del>' + escape(out.o[n]) + oSpace[n] + "</del>";
+        }
+        str += " " + out.n[i].text + nSpace[i] + pre;
+      }
+    }
+  }
+  
+  return str;
+}
+
+function randomColor() {
+    return "rgb(" + (Math.random() * 100) + "%, " + 
+                    (Math.random() * 100) + "%, " + 
+                    (Math.random() * 100) + "%)";
+}
+function diffString2( o, n ) {
+  o = o.replace(/\s+$/, '');
+  n = n.replace(/\s+$/, '');
+
+  var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/) );
+
+  var oSpace = o.match(/\s+/g);
+  if (oSpace == null) {
+    oSpace = ["\n"];
+  } else {
+    oSpace.push("\n");
+  }
+  var nSpace = n.match(/\s+/g);
+  if (nSpace == null) {
+    nSpace = ["\n"];
+  } else {
+    nSpace.push("\n");
+  }
+
+  var os = "";
+  var colors = new Array();
+  for (var i = 0; i < out.o.length; i++) {
+      colors[i] = randomColor();
+
+      if (out.o[i].text != null) {
+          os += '<span style="background-color: ' +colors[i]+ '">' + 
+                escape(out.o[i].text) + oSpace[i] + "</span>";
+      } else {
+          os += "<del>" + escape(out.o[i]) + oSpace[i] + "</del>";
+      }
+  }
+
+  var ns = "";
+  for (var i = 0; i < out.n.length; i++) {
+      if (out.n[i].text != null) {
+          ns += '<span style="background-color: ' +colors[out.n[i].row]+ '">' + 
+                escape(out.n[i].text) + nSpace[i] + "</span>";
+      } else {
+          ns += "<ins>" + escape(out.n[i]) + nSpace[i] + "</ins>";
+      }
+  }
+
+  return { o : os , n : ns };
+}
+
+function diff( o, n ) {
+  var ns = new Object();
+  var os = new Object();
+  
+  for ( var i = 0; i < n.length; i++ ) {
+    if ( ns[ n[i] ] == null )
+      ns[ n[i] ] = { rows: new Array(), o: null };
+    ns[ n[i] ].rows.push( i );
+  }
+  
+  for ( var i = 0; i < o.length; i++ ) {
+    if ( os[ o[i] ] == null )
+      os[ o[i] ] = { rows: new Array(), n: null };
+    os[ o[i] ].rows.push( i );
+  }
+  
+  for ( var i in ns ) {
+    if ( ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1 ) {
+      n[ ns[i].rows[0] ] = { text: n[ ns[i].rows[0] ], row: os[i].rows[0] };
+      o[ os[i].rows[0] ] = { text: o[ os[i].rows[0] ], row: ns[i].rows[0] };
+    }
+  }
+  
+  for ( var i = 0; i < n.length - 1; i++ ) {
+    if ( n[i].text != null && n[i+1].text == null && n[i].row + 1 < o.length && o[ n[i].row + 1 ].text == null && 
+         n[i+1] == o[ n[i].row + 1 ] ) {
+      n[i+1] = { text: n[i+1], row: n[i].row + 1 };
+      o[n[i].row+1] = { text: o[n[i].row+1], row: i + 1 };
+    }
+  }
+  
+  for ( var i = n.length - 1; i > 0; i-- ) {
+    if ( n[i].text != null && n[i-1].text == null && n[i].row > 0 && o[ n[i].row - 1 ].text == null && 
+         n[i-1] == o[ n[i].row - 1 ] ) {
+      n[i-1] = { text: n[i-1], row: n[i].row - 1 };
+      o[n[i].row-1] = { text: o[n[i].row-1], row: i - 1 };
+    }
+  }
+  
+  return { o: o, n: n };
+}
+
diff --git a/tests/index.html b/tests/index.html
index 2c2968408..da3700d93 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -4,16 +4,10 @@
 	<title>jQuery UI Tests</title>
 	<link rel="stylesheet" href="../themes/base/ui.all.css" type="text/css" />
 	<script type="text/javascript" src="../jquery-1.3.2.js"></script>
-	<script type="text/javascript" src="../ui/ui.core.js"></script>
-	<script type="text/javascript" src="../ui/ui.draggable.js"></script>
-	<style type="text/css">
-		body { font-size: 62.5%; }
-		dd.plugin { margin-top: 0.3em; margin-bottom: 1em; }
-		iframe { border: 0; width: 200px; 150px; }
-		td { border: 1px solid silver; padding: 10px; }
-	</style>
+	<script type="text/javascript" src="../external/jsdiff/jsdiff.js"></script>
+	<link rel="stylesheet" href="tests.css" type="text/css" />
+	<script type="text/javascript" src="tests.js"></script>
 </head>
-
 <body>
 
 <table id="matrix">
@@ -22,75 +16,37 @@
 		<th>Interaction</th>
 		<th style="width:220px;">Static</th>
 		<th style="width:220px;">Visual</th>
+		<th>Static</th>
+		<th>Visual</th>
+		<th>Diff</th>
 	</tr>
 </thead>
 <tbody>
-	<tr class="test-draggable-default"><th>Draggable</th><td></td><td></td></tr>
-	<tr class="test-droppable-default"><th>Droppable</th><td></td><td></td></tr>
-	<tr class="test-resizable-default"><th>Resizable</th><td></td><td></td></tr>
-	<tr class="test-selectabe-default"><th>Selectable</th><td></td><td></td></tr>
-	<tr class="test-sortable-default"><th>Sortable</th><td></td><td></td></tr>
+	<tr class="test-draggable-default"><th>Draggable</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<tr class="test-droppable-default"><th>Droppable</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<tr class="test-resizable-default"><th>Resizable</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<!--tr class="test-selectable-default"><th>Selectable</th><td></td><td></td><td></td><td></td><td></td></tr-->
+	<tr class="test-sortable-default"><th>Sortable</th><td></td><td></td><td></td><td></td><td></td></tr>
 </tbody>
 <thead>
 	<tr>
 		<th>Widget</th>
 		<th style="width:220px;">Static</th>
 		<th style="width:220px;">Visual</th>
+		<th>Static</th>
+		<th>Visual</th>
+		<th>Diff</th>
 	</tr>
 </thead>
 <tbody>
-	<tr class="test-accordion-default"><th>Accordion</th><td></td><td></td></tr>
-	<tr class="test-datepicker-default"><th>Datepicker</th><td></td><td></td></tr>
-	<tr class="test-dialog-default"><th>Dialog</th><td></td><td></td></tr>
-	<tr class="test-progressbar-default"><th>Progressbar</th><td></td><td></td></tr>
-	<tr class="test-slider-default"><th>slider</th><td></td><td></td></tr>
-	<tr class="test-tabs-default"><th>Tabs</th><td></td><td></td></tr>
+	<tr class="test-accordion-default"><th>Accordion</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<tr class="test-datepicker-default"><th>Datepicker</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<tr class="test-dialog-default"><th>Dialog</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<tr class="test-progressbar-default"><th>Progressbar</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<tr class="test-slider-default"><th>slider</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<tr class="test-tabs-default"><th>Tabs</th><td></td><td></td><td></td><td></td><td></td></tr>
 </tbody>
 </table>
 
-<dl id="plugins">
-
-</dl>
-
-<script type="text/javascript">
-
-var matrix = $("#matrix");
-
-matrix.children("tbody").children("tr").each(function() {
-
-	var tr = $(this), th = tr.find("th"), pluginName = th.text().toLowerCase(), staticTd = th.next(), visualTd = staticTd.next();
-
-	var staticUrl = 'static/' + pluginName + '/default.html';
-	var visualUrl = 'visual/' + pluginName + '/default.html';
-
-	$.get(staticUrl, function(data) {
-		data = data.replace(/<script.*>.*<\/script>/ig,""); // Remove script tags
-		data = data.replace(/<\/?link.*>/ig,""); //Remove link tags
-		data = data.replace(/<\/?html.*>/ig,""); //Remove html tag
-		data = data.replace(/<\/?body.*>/ig,""); //Remove body tag
-		data = data.replace(/<\/?head.*>/ig,""); //Remove head tag
-		data = data.replace(/<title.*>.*<\/title>/ig,""); // Remove title tags
-		data = data.replace(/\s*<\/?!doctype.*>\s*/ig,""); //Remove doctype
-		var staticHtml = $("<div></div>").html(data).html();
-		staticTd.html(staticHtml);
-	});
-
-	visualTd.append('<iframe src="' + visualUrl + '"></iframe>');
-
-	var iframe = visualTd.find("iframe");
-
-	iframe.load(function() {
-		//alert($("body", this.contentDocument).html());
-		$(this).after($("body", this.contentDocument).html()).remove();
-		(pluginName == 'dialog') && $("#dialog").parents(".ui-dialog").css({
-			position: "relative",
-			top: null, left: null
-		});
-	});
-
-});
-
-</script>
-
 </body>
 </html>
diff --git a/tests/slider.html b/tests/slider.html
new file mode 100644
index 000000000..78d86d95c
--- /dev/null
+++ b/tests/slider.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>jQuery UI Tests</title>
+	<link rel="stylesheet" href="../themes/base/ui.all.css" type="text/css" />
+	<script type="text/javascript" src="../jquery-1.3.2.js"></script>
+	<script type="text/javascript" src="../external/jsdiff/jsdiff.js"></script>
+	<link rel="stylesheet" href="tests.css" type="text/css" />
+	<script type="text/javascript" src="tests.js"></script>
+</head>
+<body>
+
+<table id="matrix">
+<thead>
+	<tr>
+		<th>Default Slider Tests</th>
+		<th style="width:220px;">Static</th>
+		<th style="width:220px;">Visual</th>
+		<th>Static</th>
+		<th>Visual</th>
+		<th>Diff</th>
+	</tr>
+</thead>
+<tbody>
+	<tr class="test-slider-default"><th>Default</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<tr class="test-slider-default-vertical"><th>Vertical</th><td></td><td></td><td></td><td></td><td></td></tr>
+</tbody>
+<thead>
+	<tr>
+		<th>Horizontal Slider Tests</th>
+		<th style="width:220px;">Static</th>
+		<th style="width:220px;">Visual</th>
+		<th>Static</th>
+		<th>Visual</th>
+		<th>Diff</th>
+	</tr>
+</thead>
+<tbody>
+	<tr class="test-slider-slider-horizontal"><th>Horizontal</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<tr class="test-slider-slider-horizontal-range"><th>Horizontal range</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<tr class="test-slider-slider-horizontal-range-max"><th>Horizontal range max</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<tr class="test-slider-slider-horizontal-range-min"><th>Horizontal range min</th><td></td><td></td><td></td><td></td><td></td></tr>
+</tbody>
+<thead>
+	<tr>
+		<th>Vertical Slider Tests</th>
+		<th style="width:220px;">Static</th>
+		<th style="width:220px;">Visual</th>
+		<th>Static</th>
+		<th>Visual</th>
+		<th>Diff</th>
+	</tr>
+</thead>
+<tbody>
+	<tr class="test-slider-slider-vertical"><th>Vertical</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<tr class="test-slider-slider-vertical-range"><th>Vertical range</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<tr class="test-slider-slider-vertical-range-max"><th>Vertical range max</th><td></td><td></td><td></td><td></td><td></td></tr>
+	<tr class="test-slider-slider-vertical-range-min"><th>Vertical range min</th><td></td><td></td><td></td><td></td><td></td></tr>
+</tbody>
+</table>
+
+</body>
+</html>
diff --git a/tests/static/draggable/default.html b/tests/static/draggable/default.html
index 3bf844b18..d5d92ef25 100644
--- a/tests/static/draggable/default.html
+++ b/tests/static/draggable/default.html
@@ -10,11 +10,7 @@
 </head>
 <body>
 
-<div class="ui-draggable">
-	<p>
-		Draggable
-	</p>
-</div>
+<div class="ui-draggable"><p>Draggable</p></div>
 
 </body>
 </html>
diff --git a/tests/static/droppable/default.html b/tests/static/droppable/default.html
index c010ab767..61504bc18 100644
--- a/tests/static/droppable/default.html
+++ b/tests/static/droppable/default.html
@@ -10,9 +10,7 @@
 </head>
 <body>
 
-<div class="ui-droppable">
-	Droppable
-</div>
+<div class="ui-droppable"><p>Droppable</p></div>
 
 </body>
 </html>
diff --git a/tests/static/slider/default.html b/tests/static/slider/default.html
index 2bda5f322..fba92d9eb 100644
--- a/tests/static/slider/default.html
+++ b/tests/static/slider/default.html
@@ -10,9 +10,7 @@
 </head>
 <body>
 
-<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a>
-</div>
+<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
 
 </body>
 </html>
diff --git a/tests/static/slider/default_vertical.html b/tests/static/slider/default_vertical.html
index b47dc4bbb..208c3c77c 100644
--- a/tests/static/slider/default_vertical.html
+++ b/tests/static/slider/default_vertical.html
@@ -10,9 +10,7 @@
 </head>
 <body>
 
-<div class="ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all">
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="bottom: 0%;"></a>
-</div>
+<div class="ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all"><a style="bottom: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
 
 </body>
 </html>
diff --git a/tests/static/slider/slider_horizontal.html b/tests/static/slider/slider_horizontal.html
index c4275d608..de510a835 100644
--- a/tests/static/slider/slider_horizontal.html
+++ b/tests/static/slider/slider_horizontal.html
@@ -10,9 +10,7 @@
 </head>
 <body>
 
-<div id="slider-horizontal" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 50%;"></a>
-</div>
+<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><a style="left: 50%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
 
 </body>
 </html>
diff --git a/tests/static/slider/slider_horizontal_range.html b/tests/static/slider/slider_horizontal_range.html
index 7ab6e6cd7..d19babde8 100644
--- a/tests/static/slider/slider_horizontal_range.html
+++ b/tests/static/slider/slider_horizontal_range.html
@@ -10,11 +10,7 @@
 </head>
 <body>
 
-<div id="slider-horizontal-range" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
-	<div class="ui-slider-range ui-widget-header" style="width:50%; left: 25%;"></div>
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 25%;"></a>
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 75%;"></a>
-</div>
+<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div style="left: 25%; width: 50%;" class="ui-slider-range ui-widget-header"></div><a style="left: 25%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a><a style="left: 75%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
 
 </body>
 </html>
diff --git a/tests/static/slider/slider_horizontal_range_max.html b/tests/static/slider/slider_horizontal_range_max.html
index 03466e3f8..e0f3d0080 100644
--- a/tests/static/slider/slider_horizontal_range_max.html
+++ b/tests/static/slider/slider_horizontal_range_max.html
@@ -10,10 +10,7 @@
 </head>
 <body>
 
-<div id="slider-horizontal-range-max" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
-	<div class="ui-slider-range ui-slider-range-max ui-widget-header" style="width:25%;"></div>
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 75%;"></a>
-</div>
+<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div style="width:25%;" class="ui-slider-range ui-slider-range-max ui-widget-header"></div><a style="left: 75%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
 
 </body>
 </html>
diff --git a/tests/static/slider/slider_horizontal_range_min.html b/tests/static/slider/slider_horizontal_range_min.html
index 72741b0dc..7c553668d 100644
--- a/tests/static/slider/slider_horizontal_range_min.html
+++ b/tests/static/slider/slider_horizontal_range_min.html
@@ -10,10 +10,7 @@
 </head>
 <body>
 
-<div id="slider-horizontal-range-min" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
-	<div class="ui-slider-range ui-slider-range-min ui-widget-header" style="width:25%;"></div>
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 25%;"></a>
-</div>
+<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div style="width: 25%;" class="ui-slider-range ui-slider-range-min ui-widget-header"></div><a style="left: 25%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
 
 </body>
 </html>
diff --git a/tests/static/slider/slider_vertical.html b/tests/static/slider/slider_vertical.html
index 75579caea..dc729cf40 100644
--- a/tests/static/slider/slider_vertical.html
+++ b/tests/static/slider/slider_vertical.html
@@ -10,9 +10,7 @@
 </head>
 <body>
 
-<div id="slider-vertical" class="ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all">
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="bottom: 50%;"></a>
-</div>
+<div class="ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all"><a style="bottom: 50%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
 
 </body>
 </html>
diff --git a/tests/static/slider/slider_vertical_range.html b/tests/static/slider/slider_vertical_range.html
index deb839c0b..f0a772b13 100644
--- a/tests/static/slider/slider_vertical_range.html
+++ b/tests/static/slider/slider_vertical_range.html
@@ -10,11 +10,7 @@
 </head>
 <body>
 
-<div id="slider-vertical-range" class="ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all">
-	<div class="ui-slider-range ui-widget-header" style="bottom: 25%; height:50%;"></div>
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="bottom: 25%;"></a>
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="bottom: 75%;"></a>
-</div>
+<div class="ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all"><div style="bottom: 25%; height: 50%;" class="ui-slider-range ui-widget-header"></div><a style="bottom: 25%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a><a style="bottom: 75%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
 
 </body>
 </html>
diff --git a/tests/static/slider/slider_vertical_range_max.html b/tests/static/slider/slider_vertical_range_max.html
index e7bac01a1..d35e1e455 100644
--- a/tests/static/slider/slider_vertical_range_max.html
+++ b/tests/static/slider/slider_vertical_range_max.html
@@ -10,10 +10,7 @@
 </head>
 <body>
 
-<div id="slider-vertical-range-max" class="ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all">
-	<div class="ui-slider-range ui-slider-range-max ui-widget-header" style="height: 75%;"></div>
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="bottom: 25%;"></a>
-</div>
+<div class="ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all"><div style="height: 25%;" class="ui-slider-range ui-slider-range-max ui-widget-header"></div><a style="bottom: 75%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
 
 </body>
 </html>
diff --git a/tests/static/slider/slider_vertical_range_min.html b/tests/static/slider/slider_vertical_range_min.html
index 6494688ee..946428f2d 100644
--- a/tests/static/slider/slider_vertical_range_min.html
+++ b/tests/static/slider/slider_vertical_range_min.html
@@ -10,10 +10,7 @@
 </head>
 <body>
 
-<div id="slider-vertical-range-min" class="ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all">
-	<div class="ui-slider-range ui-slider-range-min ui-widget-header" style="height:25%;"></div>
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="bottom: 25%;"></a>
-</div>
+<div class="ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all"><div style="height:25%;" class="ui-slider-range ui-slider-range-min ui-widget-header"></div><a style="bottom: 25%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div>
 
 </body>
 </html>
diff --git a/tests/static/sortable/default.html b/tests/static/sortable/default.html
index 88d150aa5..bd70859f6 100644
--- a/tests/static/sortable/default.html
+++ b/tests/static/sortable/default.html
@@ -10,11 +10,7 @@
 </head>
 <body>
 
-<div class="ui-sortable">
-	<div>Sortable 1</div>
-	<div>Sortable 2</div>
-	<div>Sortable 3</div>
-</div>
+<div class="ui-sortable"><div>Sortable 1</div><div>Sortable 2</div><div>Sortable 3</div></div>
 
 </body>
 </html>
diff --git a/tests/static/tabs/default.html b/tests/static/tabs/default.html
index 66dd06da9..d99e8b75c 100644
--- a/tests/static/tabs/default.html
+++ b/tests/static/tabs/default.html
@@ -1,15 +1,15 @@
 <!doctype html>
 <html>
 <head>
-	<title>jQuery UI Tabs Static Markup Test Page</title>
+	<title>Tabs Static Test : Default</title>
+	<link rel="stylesheet" href="../static.css" type="text/css" />
 	<link rel="stylesheet" href="../../../themes/base/ui.base.css" type="text/css" />
 	<link rel="stylesheet" href="../../../themes/base/ui.theme.css" type="text/css" title="ui-theme" />
 	<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
 	<script type="text/javascript" src="../static.js"></script>
 </head>
-<body style="font-size: 62.5%;">
+<body>
 
-<!-- Tabs -->
 <div class="ui-tabs ui-widget ui-widget-content ui-corner-all">
 	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
 		<li class="ui-state-default ui-state-active ui-tabs-selected ui-corner-top"><a href="#fragment-1">First</a></li>
diff --git a/tests/tests.css b/tests/tests.css
new file mode 100644
index 000000000..abb595963
--- /dev/null
+++ b/tests/tests.css
@@ -0,0 +1,8 @@
+/* tests.css */
+
+body { font-size: 62.5%; }
+iframe { border: 0; width: 200px; 150px; }
+td { border: 1px solid silver; padding: 10px; }
+td textarea { font-size: 10px; }
+del { background: #FFE6E6; }
+ins { background: #E6FFE6; }
diff --git a/tests/tests.js b/tests/tests.js
new file mode 100644
index 000000000..7f5f4fc17
--- /dev/null
+++ b/tests/tests.js
@@ -0,0 +1,56 @@
+/* tests.js */
+
+$(function() {
+
+var matrix = $("#matrix");
+
+matrix.children("tbody").children("tr").each(function() {
+
+	var tr = $(this), th = tr.find("th"), pluginName = th.text().toLowerCase(),
+		staticTd = th.next(), visualTd = staticTd.next(),
+		staticHtmlTd = visualTd.next(), visualHtmlTd = staticHtmlTd.next(),
+		diffTd = visualHtmlTd.next();
+
+	var className = tr.attr("className");
+	var classNames = className.split('-');
+
+	classNames.shift(); // remove 'test'
+	var folder = classNames.shift();
+	var filename = classNames.join('_') + '.html';
+
+	var staticUrl = 'static/' + folder + '/' + filename;
+	var visualUrl = 'visual/' + folder + '/' + filename;
+
+	$.get(staticUrl, function(data) {
+		data = data.replace(/<script.*>.*<\/script>/ig,""); // Remove script tags
+		data = data.replace(/<\/?link.*>/ig,""); //Remove link tags
+		data = data.replace(/<\/?html.*>/ig,""); //Remove html tag
+		data = data.replace(/<\/?body.*>/ig,""); //Remove body tag
+		data = data.replace(/<\/?head.*>/ig,""); //Remove head tag
+		data = data.replace(/<title.*>.*<\/title>/ig,""); // Remove title tags
+		data = data.replace(/\s*<\/?!doctype.*>\s*/ig,""); //Remove doctype
+		var staticHtml = $("<div></div>").html(data).html();
+		staticTd.html(staticHtml);
+		staticHtmlTd.append("<textarea>" + staticHtml + "</textarea>");
+	});
+
+	visualTd.append('<iframe src="' + visualUrl + '"></iframe>');
+
+	var iframe = visualTd.find("iframe");
+
+	iframe.load(function() {
+		var visualHtml = $("body", this.contentDocument).html()
+		$(this).after(visualHtml).remove();
+		(pluginName == 'dialog') && $("#dialog").parents(".ui-dialog").css({
+			position: "relative",
+			top: null, left: null
+		});
+		visualHtmlTd.append("<textarea>" + $.trim(visualHtml) + "</textarea>");
+		var diffHtml = diffString(escape(staticHtmlTd.find("textarea").val()), escape(visualHtmlTd.find("textarea").val()));
+		console.log(diffHtml);
+		diffTd.html(diffHtml);
+	});
+
+});
+
+});
diff --git a/tests/visual/dialog/default.html b/tests/visual/dialog/default.html
index 678f61c9e..b5cc04570 100644
--- a/tests/visual/dialog/default.html
+++ b/tests/visual/dialog/default.html
@@ -18,7 +18,9 @@
 <body>
 
 <div id="dialog" title="Dialog Title">
-	<p> Dialog Content </p>
+	<p>
+		Dialog Content
+	</p>
 </div>
 
 </body>
diff --git a/tests/visual/draggable/default.html b/tests/visual/draggable/default.html
index 224640f2a..925631fa9 100644
--- a/tests/visual/draggable/default.html
+++ b/tests/visual/draggable/default.html
@@ -9,13 +9,13 @@
 	<script type="text/javascript" src="../../../ui/ui.draggable.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#draggable").draggable();
+		$("body").children(":first").draggable();
 	});
 	</script>
 </head>
 <body>
-<div id="draggable">
-	<p> Draggable </p>
-</div>
+
+<div><p>Draggable</p></div>
+
 </body>
 </html>
diff --git a/tests/visual/droppable/default.html b/tests/visual/droppable/default.html
index f1728d3ea..1afc1acfa 100644
--- a/tests/visual/droppable/default.html
+++ b/tests/visual/droppable/default.html
@@ -10,13 +10,13 @@
 	<script type="text/javascript" src="../../../ui/ui.droppable.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#droppable").droppable();
+		$("body").children(":first").droppable();
 	});
 	</script>
 </head>
 <body>
-<div id="droppable">
-	<p> Droppable </p>
-</div>
+
+<div><p>Droppable</p></div>
+
 </body>
 </html>
diff --git a/tests/visual/resizable/default.html b/tests/visual/resizable/default.html
index 1063d926a..9a122f6b1 100644
--- a/tests/visual/resizable/default.html
+++ b/tests/visual/resizable/default.html
@@ -15,7 +15,11 @@
 </head>
 <body>
 
-<div id="resizable">Resizable</div>
+<div id="resizable">
+	<p>
+		Resizable
+	</p>
+</div>
 
 </body>
 </html>
diff --git a/tests/visual/selectable/default.html b/tests/visual/selectable/default.html
index e99751cba..e22738306 100644
--- a/tests/visual/selectable/default.html
+++ b/tests/visual/selectable/default.html
@@ -13,7 +13,6 @@
 	});
 	</script>
 </head>
-
 <body>
 
 <div id="selectable">
diff --git a/tests/visual/slider/default.html b/tests/visual/slider/default.html
index 4713d8f7e..dc57608b7 100644
--- a/tests/visual/slider/default.html
+++ b/tests/visual/slider/default.html
@@ -9,13 +9,13 @@
 	<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#slider").slider();
+		$("body").children(":first").slider();
 	});
 	</script>
 </head>
 <body>
 
-<div id="slider"></div>
+<div></div>
 
 </body>
 </html>
diff --git a/tests/visual/slider/default_vertical.html b/tests/visual/slider/default_vertical.html
new file mode 100644
index 000000000..e0e5618be
--- /dev/null
+++ b/tests/visual/slider/default_vertical.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<title>Slider Visual Test : Default vertical</title>
+	<link rel="stylesheet" href="../visual.css" type="text/css" />
+	<link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
+	<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.core.js"></script>
+	<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
+	<script type="text/javascript">
+	$(function() {
+		$("body").children(":first").slider({
+			orientation: 'vertical'
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div></div>
+
+</body>
+</html>
diff --git a/tests/visual/slider/slider_horizontal.html b/tests/visual/slider/slider_horizontal.html
index c816a718b..fb6fe1027 100644
--- a/tests/visual/slider/slider_horizontal.html
+++ b/tests/visual/slider/slider_horizontal.html
@@ -9,7 +9,7 @@
 	<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#slider-horizontal").slider({
+		$("body").children(":first").slider({
 			orientation: 'horizontal',
 			value: 50
 		});
@@ -18,7 +18,7 @@
 </head>
 <body>
 
-<div id="slider-horizontal"></div>
+<div></div>
 
 </body>
 </html>
diff --git a/tests/visual/slider/slider_horizontal_range.html b/tests/visual/slider/slider_horizontal_range.html
index 975a318df..182e27a1a 100644
--- a/tests/visual/slider/slider_horizontal_range.html
+++ b/tests/visual/slider/slider_horizontal_range.html
@@ -9,7 +9,7 @@
 	<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#slider-horizontal-range").slider({
+		$("body").children(":first").slider({
 			orientation: 'horizontal',
 			range: true,
 			values: [25, 75]
@@ -19,7 +19,7 @@
 </head>
 <body>
 
-<div id="slider-horizontal-range"></div>
+<div></div>
 
 </body>
 </html>
diff --git a/tests/visual/slider/slider_horizontal_range_max.html b/tests/visual/slider/slider_horizontal_range_max.html
index a1e5d1732..68fd374a4 100644
--- a/tests/visual/slider/slider_horizontal_range_max.html
+++ b/tests/visual/slider/slider_horizontal_range_max.html
@@ -9,7 +9,7 @@
 	<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#slider-horizontal-range-max").slider({
+		$("body").children(":first").slider({
 			orientation: 'horizontal',
 			range: 'max',
 			value: 75
@@ -19,7 +19,7 @@
 </head>
 <body>
 
-<div id="slider-horizontal-range-max"></div>
+<div></div>
 
 </body>
 </html>
diff --git a/tests/visual/slider/slider_horizontal_range_min.html b/tests/visual/slider/slider_horizontal_range_min.html
index ba0a2b0aa..cbf2d7f36 100644
--- a/tests/visual/slider/slider_horizontal_range_min.html
+++ b/tests/visual/slider/slider_horizontal_range_min.html
@@ -9,7 +9,7 @@
 	<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#slider-horizontal-range-min").slider({
+		$("body").children(":first").slider({
 			orientation: 'horizontal',
 			range: 'min',
 			value: 25
@@ -19,7 +19,7 @@
 </head>
 <body>
 
-<div id="slider-horizontal-range-min"></div>
+<div></div>
 
 </body>
 </html>
diff --git a/tests/visual/slider/slider_vertical.html b/tests/visual/slider/slider_vertical.html
index c68696fb0..5ec02be21 100644
--- a/tests/visual/slider/slider_vertical.html
+++ b/tests/visual/slider/slider_vertical.html
@@ -9,7 +9,7 @@
 	<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#slider-vertical").slider({
+		$("body").children(":first").slider({
 			orientation: 'vertical',
 			value: 50
 		});
@@ -18,7 +18,7 @@
 </head>
 <body>
 
-<div id="slider-vertical"></div>
+<div></div>
 
 </body>
 </html>
diff --git a/tests/visual/slider/slider_vertical_range.html b/tests/visual/slider/slider_vertical_range.html
index e1670b51f..d59fd5f57 100644
--- a/tests/visual/slider/slider_vertical_range.html
+++ b/tests/visual/slider/slider_vertical_range.html
@@ -9,7 +9,7 @@
 	<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#slider-vertical-range").slider({
+		$("body").children(":first").slider({
 			orientation: 'vertical',
 			range: true,
 			values: [25, 75]
@@ -19,7 +19,7 @@
 </head>
 <body>
 
-<div id="slider-vertical-range"></div>
+<div></div>
 
 </body>
 </html>
diff --git a/tests/visual/slider/slider_vertical_range_max.html b/tests/visual/slider/slider_vertical_range_max.html
index 20e722787..d68eae585 100644
--- a/tests/visual/slider/slider_vertical_range_max.html
+++ b/tests/visual/slider/slider_vertical_range_max.html
@@ -9,7 +9,7 @@
 	<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#slider-vertical-range-max").slider({
+		$("body").children(":first").slider({
 			orientation: 'vertical',
 			range: 'max',
 			value: 75
@@ -19,7 +19,7 @@
 </head>
 <body>
 
-<div id="slider-vertical-range-max"></div>
+<div></div>
 
 </body>
 </html>
diff --git a/tests/visual/slider/slider_vertical_range_min.html b/tests/visual/slider/slider_vertical_range_min.html
index 4452aedd3..5ce2c2a4d 100644
--- a/tests/visual/slider/slider_vertical_range_min.html
+++ b/tests/visual/slider/slider_vertical_range_min.html
@@ -9,7 +9,7 @@
 	<script type="text/javascript" src="../../../ui/ui.slider.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#slider-vertical-range-min").slider({
+		$("body").children(":first").slider({
 			orientation: 'vertical',
 			range: 'min',
 			value: 25
@@ -19,7 +19,7 @@
 </head>
 <body>
 
-<div id="slider-vertical-range-min"></div>
+<div></div>
 
 </body>
 </html>
diff --git a/tests/visual/sortable/default.html b/tests/visual/sortable/default.html
index 4e82d27db..0af09ffd4 100644
--- a/tests/visual/sortable/default.html
+++ b/tests/visual/sortable/default.html
@@ -9,18 +9,13 @@
 	<script type="text/javascript" src="../../../ui/ui.sortable.js"></script>
 	<script type="text/javascript">
 	$(function() {
-		$("#sortable").sortable();
+		$("body").children(":first").sortable();
 	});
 	</script>
 </head>
-
 <body>
 
-<div id="sortable">
-	<div>Sortable 1</div>
-	<div>Sortable 2</div>
-	<div>Sortable 3</div>
-</div>
+<div><div>Sortable 1</div><div>Sortable 2</div><div>Sortable 3</div></div>
 
 </body>
 </html>
-- 
2.39.5