github/jquery-ui
1
1
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2026-04-20 03:02:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

tests: new side-by-side comparison of static and visual tests

Browse Source
This commit is contained in:
Richard Worth
2009-01-25 12:06:25 +00:00
parent d3a81ddf67
commit beb388e3eb
11 changed files with 139 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
tests/index.html Normal file
View File

@@ -0,0 +1,96 @@
<!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.1.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>
</head>
<body>
<table id="matrix">
<thead>
<tr>
<th>Interaction</th>
<th style="width:220px;">Static</th>
<th style="width:220px;">Visual</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>
</tbody>
<thead>
<tr>
<th>Widget</th>
<th style="width:220px;">Static</th>
<th style="width:220px;">Visual</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>
</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>

21
tests/static/accordion/default.html
View File

@@ -12,31 +12,40 @@
<div class="ui-accordion ui-widget ui-helper-reset">
<div class="ui-accordion-group ui-accordion-selected">
<h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span><a href="#">First</a></h3>
<h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-s"></span>
<a href="#">Accordion Header 1</a>
</h3>
<div>
<div class="ui-accordion-content-wrap ui-helper-reset ui-widget-content ui-corner-bottom">
<div class="ui-accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
Accordion Content 1
</div>
</div>
</div>
</div>
<div class="ui-accordion-group">
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#">Second</a></h3>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 2</a>
</h3>
<div>
<div class="ui-accordion-content-wrap ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;">
<div class="ui-accordion-content">
<p>Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</p>
Accordion Content 2
</div>
</div>
</div>
</div>
<div class="ui-accordion-group">
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#">Third</a></h3>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a href="#">Accordion Header 3</a>
</h3>
<div>
<div class="ui-accordion-content-wrap ui-helper-reset ui-widget-content ui-corner-bottom" style="height: 95px; display: none;">
<div class="ui-accordion-content">
<p>Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</p>
Accordion Content 2
</div>
</div>
</div>

7
tests/static/dialog/default.html
View File

@@ -16,12 +16,7 @@
<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" title="Close"><span class="ui-icon ui-icon-closethick">Close</span></a>
</div>
<div class="ui-dialog-content ui-widget-content" style="height: 13em;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button class="ui-state-default ui-priority-primary ui-corner-all">Primary</button>
<button class="ui-state-default ui-priority-secondary ui-corner-all">Secondary</button>
<button class="ui-state-default ui-state-disabled ui-corner-all">Disabled</button>
<p> Dialog Content </p>
</div>
<div class="ui-resizable-n ui-resizable-handle"></div>
<div class="ui-resizable-s ui-resizable-handle"></div>

9
tests/static/selectable/default.html
View File

@@ -11,12 +11,9 @@
<body>
<div class="ui-selectable">
<p>
Selectable
</p>
<div class="ui-selectee">First</div>
<div class="ui-selectee">Second</div>
<div class="ui-selectee">Third</div>
<div class="ui-selectee">Selectable 1</div>
<div class="ui-selectee">Selectable 2</div>
<div class="ui-selectee">Selectable 3</div>
</div>
</body>

9
tests/static/sortable/default.html
View File

@@ -11,12 +11,9 @@
<body>
<div class="ui-sortable">
<p>
Sortable
</p>
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Sortable 1</div>
<div>Sortable 2</div>
<div>Sortable 3</div>
</div>
</body>

12
tests/visual/accordion/default.html
View File

@@ -17,21 +17,21 @@
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<h3><a href="#">Accordion Header 1</a></h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion Content 1
</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<h3><a href="#">Accordion Header 2</a></h3>
<div>
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
Accordion Content 2
</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<h3><a href="#">Accordion Header 3</a></h3>
<div>
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.
Accordion Content 3
</div>
</div>
</div>

4
tests/visual/dialog/default.html
View File

@@ -17,7 +17,9 @@
</head>
<body>
<div id="dialog"></div>
<div id="dialog" title="Dialog Title">
<p> Dialog Content </p>
</div>
</body>
</html>

6
tests/visual/draggable/default.html
View File

@@ -14,8 +14,8 @@
</script>
</head>
<body>
<div id="draggable">Draggable</div>
<div id="draggable">
<p> Draggable </p>
</div>
</body>
</html>

9
tests/visual/droppable/default.html
View File

@@ -10,16 +10,13 @@
<script type="text/javascript" src="../../../ui/ui.droppable.js"></script>
<script type="text/javascript">
$(function() {
$("#draggable").draggable();
$("#droppable").droppable();
});
</script>
</head>
<body>
<div id="draggable">Draggable</div>
<div id="droppable">Droppable</div>
<div id="droppable">
<p> Droppable </p>
</div>
</body>
</html>

6
tests/visual/selectable/default.html
View File

@@ -17,9 +17,9 @@
<body>
<div id="selectable">
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Selectable 1</div>
<div>Selectable 2</div>
<div>Selectable 3</div>
</div>
</body>

6
tests/visual/sortable/default.html
View File

@@ -17,9 +17,9 @@
<body>
<div id="sortable">
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Sortable 1</div>
<div>Sortable 2</div>
<div>Sortable 3</div>
</div>
</body>