diff options
35 files changed, 381 insertions, 154 deletions
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, "&"); + n = n.replace(/</g, "<"); + n = n.replace(/>/g, ">"); + n = n.replace(/"/g, """); + + 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> |