aboutsummaryrefslogtreecommitdiffstats
path: root/tests/visual
diff options
context:
space:
mode:
authorScott González <scott.gonzalez@gmail.com>2010-01-07 03:19:50 +0000
committerScott González <scott.gonzalez@gmail.com>2010-01-07 03:19:50 +0000
commit90fb45dffafc2e891b1ebca948ad33e6b94de112 (patch)
tree6bd09ea116ef2cdd86ec0fa70bf740617f67d441 /tests/visual
parent975b02a82cdff29fd8469bfe4324472c2ae3f954 (diff)
downloadjquery-ui-90fb45dffafc2e891b1ebca948ad33e6b94de112.tar.gz
jquery-ui-90fb45dffafc2e891b1ebca948ad33e6b94de112.zip
Merged in /branches/dev r3251:3620 (excluding autocomplete, modal, tooltip, menu; including menu static tests).
Diffstat (limited to 'tests/visual')
-rw-r--r--tests/visual/accordion/accordion_option_fillSpace_true.html102
-rw-r--r--tests/visual/accordion/accordion_ticket_4322.html148
-rw-r--r--tests/visual/accordion/accordion_ticket_4444.html100
-rw-r--r--tests/visual/button/default.html137
-rw-r--r--tests/visual/dialog/dialog_option_modal_false.html2
-rw-r--r--tests/visual/dialog/dialog_option_modal_true.html2
-rw-r--r--tests/visual/index.html1
-rw-r--r--tests/visual/sortable/sortable_ticket_4551.html106
8 files changed, 368 insertions, 230 deletions
diff --git a/tests/visual/accordion/accordion_option_fillSpace_true.html b/tests/visual/accordion/accordion_option_fillSpace_true.html
index d03420523..5bcee045b 100644
--- a/tests/visual/accordion/accordion_option_fillSpace_true.html
+++ b/tests/visual/accordion/accordion_option_fillSpace_true.html
@@ -1,51 +1,51 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>Accordion Visual Test : Accordion option autoHeight true</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/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script>
- <script type="text/javascript">
- $(function() {
- $("#accordion").accordion({
- fillSpace: true
- });
- })
- </script>
-</head>
-<body>
-
-<div style="height: 500px; width: 500px; border: 1px solid red;">
- <div id="accordion" style="width:490px;">
- <h3><a href="#">Accordion Header 1</a></h3>
- <div style="padding-top: 1em">
- Accordion Content 1
- </div>
- <h3><a href="#">Accordion Header 2</a></h3>
- <div style="padding-top: 3em">
- Accordion Content 2
- <p>paragraph</p>
- <p>paragraph</p>
- <p>paragraph</p>
- <p>paragraph</p>
- <p>paragraph</p>
- <p>paragraph</p>
- <p>paragraph</p>
- </div>
- <h3><a href="#">Accordion Header 3</a></h3>
- <div style="padding-top: 0">
- Accordion Content 3
- <ul>
- <li>list item</li>
- <li>list item</li>
- <li>list item</li>
- </ul>
- </div>
- </div>
-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Accordion Visual Test : Accordion option autoHeight true</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/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#accordion").accordion({
+ fillSpace: true
+ });
+ })
+ </script>
+</head>
+<body>
+
+<div style="height: 500px; width: 500px; border: 1px solid red;">
+ <div id="accordion" style="width:490px;">
+ <h3><a href="#">Accordion Header 1</a></h3>
+ <div style="padding-top: 1em">
+ Accordion Content 1
+ </div>
+ <h3><a href="#">Accordion Header 2</a></h3>
+ <div style="padding-top: 3em">
+ Accordion Content 2
+ <p>paragraph</p>
+ <p>paragraph</p>
+ <p>paragraph</p>
+ <p>paragraph</p>
+ <p>paragraph</p>
+ <p>paragraph</p>
+ <p>paragraph</p>
+ </div>
+ <h3><a href="#">Accordion Header 3</a></h3>
+ <div style="padding-top: 0">
+ Accordion Content 3
+ <ul>
+ <li>list item</li>
+ <li>list item</li>
+ <li>list item</li>
+ </ul>
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/tests/visual/accordion/accordion_ticket_4322.html b/tests/visual/accordion/accordion_ticket_4322.html
index 9d82f61ae..1bfe2a05d 100644
--- a/tests/visual/accordion/accordion_ticket_4322.html
+++ b/tests/visual/accordion/accordion_ticket_4322.html
@@ -1,74 +1,74 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>Accordion Visual Test : Accordion ticket #4322</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/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script>
- <style>
- p {margin: .5em 0;}
- </style>
- <script type="text/javascript">
- $(function() {
- $("#accordion1, #accordion2").accordion();
- })
- </script>
-</head>
-<body>
-
-<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/4322">#4322 - Accordion going smaller and smaller in IE 6</a></h1>
-
- <div id="accordion1" style="width:200px">
- <h3><a href="#">Section 1</a></h3>
- <div>
-
- <p>
- Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
- ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
- amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
- odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
- </p>
- </div>
- <h3><a href="#">Section 2</a></h3>
- <div>
- <p>
- Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
- purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
- velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
- suscipit faucibus urna.
- </p>
- </div>
- </div>
-
- content below
-
- <div id="accordion2">
- <h3><a href="#">Section 1</a></h3>
- <div>
-
- <p>
- Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
- ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
- amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
- odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
- </p>
- </div>
- <h3><a href="#">Section 2</a></h3>
- <div>
- <p>
- Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
- purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
- velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
- suscipit faucibus urna.
- </p>
- </div>
- </div>
-
- content below
-
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Accordion Visual Test : Accordion ticket #4322</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/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script>
+ <style>
+ p {margin: .5em 0;}
+ </style>
+ <script type="text/javascript">
+ $(function() {
+ $("#accordion1, #accordion2").accordion();
+ })
+ </script>
+</head>
+<body>
+
+<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/4322">#4322 - Accordion going smaller and smaller in IE 6</a></h1>
+
+ <div id="accordion1" style="width:200px">
+ <h3><a href="#">Section 1</a></h3>
+ <div>
+
+ <p>
+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+ ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+ amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+ odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+ </p>
+ </div>
+ <h3><a href="#">Section 2</a></h3>
+ <div>
+ <p>
+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+ purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+ velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+ suscipit faucibus urna.
+ </p>
+ </div>
+ </div>
+
+ content below
+
+ <div id="accordion2">
+ <h3><a href="#">Section 1</a></h3>
+ <div>
+
+ <p>
+ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+ ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+ amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+ odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+ </p>
+ </div>
+ <h3><a href="#">Section 2</a></h3>
+ <div>
+ <p>
+ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+ purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+ velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+ suscipit faucibus urna.
+ </p>
+ </div>
+ </div>
+
+ content below
+
+
+</body>
+</html>
diff --git a/tests/visual/accordion/accordion_ticket_4444.html b/tests/visual/accordion/accordion_ticket_4444.html
index 121bf0cef..4cce368d3 100644
--- a/tests/visual/accordion/accordion_ticket_4444.html
+++ b/tests/visual/accordion/accordion_ticket_4444.html
@@ -1,50 +1,50 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>Accordion Visual Test : Accordion ticket #4444</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/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script>
- <script type="text/javascript">
- $(function() {
- $("#accordion").accordion({
- autoHeight: false
- });
- })
- </script>
-</head>
-<body>
-
-<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/4444">#4444 - Accordion Content disappears with autoHeight set to false in IE 6</a></h1>
-
-<div id="accordion" >
- <h3><a href="#">Section 1</a></h3>
- <div >
- Accordion Content 1<br>
- <a href="#">Link Test #1</a>
- </div>
-
- <h3><a href="#">Section 2</a></h3>
- <div>
- <a href="#" >Accordion Content 2</a>
- </div>
- <h3><a href="#">Section 3</a></h3>
- <div>
- <p>Accordion Content 3 </p>
- <ul>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
- <li>List item</li>
- </ul>
- </div>
-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Accordion Visual Test : Accordion ticket #4444</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/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.accordion.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#accordion").accordion({
+ autoHeight: false
+ });
+ })
+ </script>
+</head>
+<body>
+
+<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/4444">#4444 - Accordion Content disappears with autoHeight set to false in IE 6</a></h1>
+
+<div id="accordion" >
+ <h3><a href="#">Section 1</a></h3>
+ <div >
+ Accordion Content 1<br>
+ <a href="#">Link Test #1</a>
+ </div>
+
+ <h3><a href="#">Section 2</a></h3>
+ <div>
+ <a href="#" >Accordion Content 2</a>
+ </div>
+ <h3><a href="#">Section 3</a></h3>
+ <div>
+ <p>Accordion Content 3 </p>
+ <ul>
+ <li>List item</li>
+ <li>List item</li>
+ <li>List item</li>
+ <li>List item</li>
+ <li>List item</li>
+ <li>List item</li>
+ <li>List item</li>
+ </ul>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/tests/visual/button/default.html b/tests/visual/button/default.html
new file mode 100644
index 000000000..4eb457fc4
--- /dev/null
+++ b/tests/visual/button/default.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>Button Visual push: Default</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.all.css" type="text/css">
+ <style type="text/css">
+ #toolbar { margin-top: 2em; padding:0.2em; }
+ #ops1, #ops2, #format, #mode { margin-right: 1em }
+ </style>
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../../external/jquery.metadata.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ var buttons = $('#push button, #check').button();
+ var buttonSets = $('#radio0, #radio1, #radio2, #ops1, #format, #ops2, #mode, #inputs, #anchors').buttonset();
+
+ buttons.add(buttonSets).click(function(event) {
+ var target = $(event.target);
+ if (target.closest('.ui-button').length) {
+ $("<div></div>")
+ .text("Clicked " + (target.text() || target.val()))
+ .appendTo("#log");
+ }
+ });
+
+ $("#disable-widgets").toggle(function() {
+ buttons.button("disable");
+ buttonSets.buttonset("disable");
+ }, function() {
+ buttons.button("enable");
+ buttonSets.buttonset("enable");
+ });
+ $("#toggle-widgets").toggle(function() {
+ buttons.button();
+ buttonSets.buttonset();
+ }, function() {
+ buttons.button("destroy");
+ buttonSets.buttonset("destroy");
+ }).click();
+ });
+ </script>
+</head>
+<body>
+
+<div id="push">
+ <div>
+ No icon
+ <button>Simple button, only text</button>
+ <button class="ui-priority-secondary">Secondary priority button</button>
+ </div>
+ <br/>
+ <div>
+ With icon
+ <button class="{button:{icons:{primary:'ui-icon-locked'},text:false}}">Button with icon only</button>
+ <button class="{button:{icons:{primary:'ui-icon-locked'}}}">Button with icon on the left</button>
+ <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}}}">Button with two icons</button>
+ <button class="{button:{icons:{primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'},text:false}}">Button with two icons</button>
+ </div>
+</div>
+
+<div id="toggle" style="margin-top: 2em;">
+ <input type="checkbox" id="check" /><label for="check">Toggle</label>
+</div>
+
+<div id="radio0" style="margin-top: 2em;">
+ <input type="radio" id="radio01" name="radio" checked="checked" /><label for="radio01">Choice 1</label>
+ <input type="radio" id="radio02" name="radio" /><label for="radio02">Choice 2</label>
+ <input type="radio" id="radio03" name="radio" /><label for="radio03">Choice 3</label>
+</div>
+<form>
+ <div id="radio1" style="margin-top: 2em;">
+ <input type="radio" id="radio11" name="radio" /><label for="radio11">Choice 1</label>
+ <input type="radio" id="radio12" name="radio" checked="checked" /><label for="radio12">Choice 2</label>
+ <input type="radio" id="radio13" name="radio" /><label for="radio13">Choice 3</label>
+ </div>
+</form>
+<form>
+ <div id="radio2" style="margin-top: 2em;">
+ <input type="radio" id="radio21" name="radio" /><label for="radio21">Choice 1</label>
+ <input type="radio" id="radio22" name="radio" /><label for="radio22">Choice 2</label>
+ <input type="radio" id="radio23" name="radio" checked="checked" /><label for="radio23">Choice 3</label>
+ </div>
+</form>
+
+<div id="toolbar" class="ui-widget-header ui-corner-all ui-helper-clearfix">
+ <span id="ops1">
+ <button class="{button:{icons:{primary:'ui-icon-folder-open'},text:false}}">Open</button>
+ <button class="{button:{icons:{primary:'ui-icon-disk'},text:false}}">Save</button>
+ <button class="{button:{icons:{primary:'ui-icon-trash'},text:false}}">Delete</button>
+ </span>
+ <span id="format">
+ <input type="checkbox" id="check1" /><label for="check1">B</label>
+ <input type="checkbox" id="check2" /><label for="check2">I</label>
+ <input type="checkbox" id="check3" /><label for="check3">U</label>
+ </span>
+ <span id="ops2">
+ <button class="{button:{icons:{primary:'ui-icon-print'},text:false}}">Print...</button>
+ <button class="{button:{icons:{primary:'ui-icon-mail-closed'},text:false}}">Mail to...</button>
+ </span>
+ <span id="mode">
+ <input type="radio" id="mode1" name="radio2" checked="checked" /><label for="mode1">Edit</label>
+ <input type="radio" id="mode2" name="radio2" /><label for="mode2">View</label>
+ </span>
+</div>
+
+<div id="inputs" style="margin-top: 2em;">
+ <input type="submit" value="Submit button" />
+ <input type="reset" value="Reset button" class="{button:{label:'Custom reset'}}" />
+</div>
+
+<div id="anchors" style="margin-top: 2em;">
+ <a href="#">Anchor 1</a>
+ <a href="#" class="{button:{icons:{primary:'ui-icon-print'},text:false}}">Anchor 2</a>
+ <a href="#" class="{button:{icons:{primary:'ui-icon-mail-closed'},text:false}}">Anchor 3</a>
+ <a href="#">Anchor 4</a>
+</div>
+
+<div style="margin-top: 2em;">
+ <button id="disable-widgets">Toggle disabled</button>
+ <button id="toggle-widgets">Toggle widget</button>
+</div>
+<div id="log"></div>
+
+<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
+<script type="text/javascript">
+ $.fn.themeswitcher && $('<div></div>').css({
+ position: "absolute",
+ right: 10,
+ top: 10
+ }).appendTo(document.body).themeswitcher();
+</script>
+</body>
+</html>
diff --git a/tests/visual/dialog/dialog_option_modal_false.html b/tests/visual/dialog/dialog_option_modal_false.html
index 2a77881d9..45dad2fc3 100644
--- a/tests/visual/dialog/dialog_option_modal_false.html
+++ b/tests/visual/dialog/dialog_option_modal_false.html
@@ -21,7 +21,7 @@
</script>
</head>
<body>
-
+<input />
<div id="dialog" title="Dialog Title">
<p> Dialog Content </p>
</div>
diff --git a/tests/visual/dialog/dialog_option_modal_true.html b/tests/visual/dialog/dialog_option_modal_true.html
index 4ee3ded23..b6e10e0d0 100644
--- a/tests/visual/dialog/dialog_option_modal_true.html
+++ b/tests/visual/dialog/dialog_option_modal_true.html
@@ -21,7 +21,7 @@
</script>
</head>
<body>
-
+<input />
<div id="dialog" title="Dialog Title">
<p> Dialog Content </p>
</div>
diff --git a/tests/visual/index.html b/tests/visual/index.html
index 8f322f627..465dbc021 100644
--- a/tests/visual/index.html
+++ b/tests/visual/index.html
@@ -25,6 +25,7 @@
<h2>Widgets</h2>
<ul>
<li><a href="accordion/default.html">Accordion</a></li>
+ <li><a href="button/default.html">Button</a></li>
<li><a href="datepicker/default.html">Datepicker</a></li>
<li><a href="dialog/default.html">Dialog</a></li>
<li><a href="progressbar/default.html">Progressbar</a></li>
diff --git a/tests/visual/sortable/sortable_ticket_4551.html b/tests/visual/sortable/sortable_ticket_4551.html
index 8188d33f8..73f5791d6 100644
--- a/tests/visual/sortable/sortable_ticket_4551.html
+++ b/tests/visual/sortable/sortable_ticket_4551.html
@@ -1,53 +1,53 @@
-<!doctype html>
-<html lang="en">
-<head>
- <title>Sortable Visual Test : Sortable ticket #4551</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/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
- <script type="text/javascript" src="../../../ui/jquery.ui.sortable.js"></script>
- <script type="text/javascript">
- $(function() {
- $("#first, #second").sortable({
- connectWith: '.sortable'
- }).disableSelection();
- });
- </script>
- <style type="text/css">
- .sortable { margin: 0; padding: 0; }
- .sortable div { margin: 3px 3px 3px 0; background: #ccc; padding: 1px; border: 1px solid black; float:left; width: 100px; height: 140px; font-size: 1em; text-align: center; }
- #second div { background: #acc; }
- </style>
-</head>
-<body>
-
-<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/4551">#4551 - Sortable connectWith fails if item is floated</a></h1>
-
-<div id="first" class="sortable">
- <div>1</div>
- <div>2</div>
- <div>3</div>
- <div>4</div>
- <div>5</div>
- <div>6</div>
- <div>7</div>
- <div>8</div>
- <div>9</div>
- <div>10</div>
- <div>11</div>
- <div>12</div>
-</div>
-
-<br style="clear:both;">
-<hr />
-
-<div id="second" class="sortable">
- <div>12</div>
- <div>14</div>
-</div>
-
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Sortable Visual Test : Sortable ticket #4551</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/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
+ <script type="text/javascript" src="../../../ui/jquery.ui.sortable.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#first, #second").sortable({
+ connectWith: '.sortable'
+ }).disableSelection();
+ });
+ </script>
+ <style type="text/css">
+ .sortable { margin: 0; padding: 0; }
+ .sortable div { margin: 3px 3px 3px 0; background: #ccc; padding: 1px; border: 1px solid black; float:left; width: 100px; height: 140px; font-size: 1em; text-align: center; }
+ #second div { background: #acc; }
+ </style>
+</head>
+<body>
+
+<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/4551">#4551 - Sortable connectWith fails if item is floated</a></h1>
+
+<div id="first" class="sortable">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+ <div>4</div>
+ <div>5</div>
+ <div>6</div>
+ <div>7</div>
+ <div>8</div>
+ <div>9</div>
+ <div>10</div>
+ <div>11</div>
+ <div>12</div>
+</div>
+
+<br style="clear:both;">
+<hr />
+
+<div id="second" class="sortable">
+ <div>12</div>
+ <div>14</div>
+</div>
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 00:52:14 +0000