Added diffs to static and visual markup side-by-side tests

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, "&");
+    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 };
+}
+

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="../external/jsdiff/jsdiff.js"></script>
-	<script type="text/javascript" src="../ui/ui.draggable.js"></script>
+	<link rel="stylesheet" href="tests.css" type="text/css" />
-	<style type="text/css">
+	<script type="text/javascript" src="tests.js"></script>
-		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>
 </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-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></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></tr>
+	<tr class="test-resizable-default"><th>Resizable</th><td></td><td></td><td></td><td></td><td></td></tr>
-	<tr class="test-selectabe-default"><th>Selectable</th><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></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-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></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></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></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></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></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>

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>

tests/static/draggable/default.html

@@ -10,11 +10,7 @@
 </head>
 <body>
 
-<div class="ui-draggable">
+<div class="ui-draggable"><p>Draggable</p></div>
-	<p>
-		Draggable
-	</p>
-</div>
 
 </body>
 </html>

tests/static/droppable/default.html

@@ -10,9 +10,7 @@
 </head>
 <body>
 
-<div class="ui-droppable">
+<div class="ui-droppable"><p>Droppable</p></div>
-	Droppable
-</div>
 
 </body>
 </html>

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">
+<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>
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a>
-</div>
 
 </body>
 </html>

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">
+<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>
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="bottom: 0%;"></a>
-</div>
 
 </body>
 </html>

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">
+<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>
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 50%;"></a>
-</div>
 
 </body>
 </html>

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 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>
-	<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>
 
 </body>
 </html>

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 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>
-	<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>
 
 </body>
 </html>

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 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>
-	<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>
 
 </body>
 </html>

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">
+<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>
-	<a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="bottom: 50%;"></a>
-</div>
 
 </body>
 </html>

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 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>
-	<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>
 
 </body>
 </html>

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 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>
-	<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>
 
 </body>
 </html>

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 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>
-	<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>
 
 </body>
 </html>

tests/static/sortable/default.html

@@ -10,11 +10,7 @@
 </head>
 <body>
 
-<div class="ui-sortable">
+<div class="ui-sortable"><div>Sortable 1</div><div>Sortable 2</div><div>Sortable 3</div></div>
-	<div>Sortable 1</div>
-	<div>Sortable 2</div>
-	<div>Sortable 3</div>
-</div>
 
 </body>
 </html>

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>

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; }

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);
+	});
+
+});
+
+});

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>

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><p>Draggable</p></div>
-</div>
+
 </body>
 </html>

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><p>Droppable</p></div>
-</div>
+
 </body>
 </html>

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>

tests/visual/selectable/default.html

@@ -13,7 +13,6 @@
 	});
 	</script>
 </head>
-
 <body>
 
 <div id="selectable">

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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><div>Sortable 1</div><div>Sortable 2</div><div>Sortable 3</div></div>
-	<div>Sortable 1</div>
-	<div>Sortable 2</div>
-	<div>Sortable 3</div>
-</div>
 
 </body>
 </html>