aboutsummaryrefslogtreecommitdiffstats
path: root/tests/visual
diff options
context:
space:
mode:
Diffstat (limited to 'tests/visual')
-rw-r--r--tests/visual/compound/dialog_widgets.html11
-rw-r--r--tests/visual/compound/tabs_selectmenu.html53
-rw-r--r--tests/visual/selectmenu/selectmenu.html248
3 files changed, 311 insertions, 1 deletions
diff --git a/tests/visual/compound/dialog_widgets.html b/tests/visual/compound/dialog_widgets.html
index f5b0be95e..25bbd123f 100644
--- a/tests/visual/compound/dialog_widgets.html
+++ b/tests/visual/compound/dialog_widgets.html
@@ -22,8 +22,10 @@
<script src="../../../ui/jquery.ui.slider.js"></script>
<script src="../../../ui/jquery.ui.tabs.js"></script>
<script src="../../../ui/jquery.ui.tooltip.js"></script>
+ <script src="../../../ui/jquery.ui.selectmenu.js"></script>
<script>
$(function() {
+ $( "#dialog" ).dialog();
$( "[title]" ).tooltip();
$( "#accordion" ).accordion();
$( "#autocomplete" ).autocomplete({
@@ -45,7 +47,7 @@
}
});
$( "#tabs" ).tabs();
- $( "#dialog" ).dialog();
+ $( '#select' ).selectmenu();
$( "#dialog2" ).dialog({
autoOpen: false,
width: 100,
@@ -92,6 +94,13 @@
<div id="tabs-2">Phasellus mattis tincidunt nibh.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
+ <select id="select">
+ <option>Slower</option>
+ <option>Slow</option>
+ <option>Medium</option>
+ <option>Fast</option>
+ <option>Faster</option>
+ </select>
</div>
<div id="dialog2">
Yay, another dialog.
diff --git a/tests/visual/compound/tabs_selectmenu.html b/tests/visual/compound/tabs_selectmenu.html
new file mode 100644
index 000000000..9554562c5
--- /dev/null
+++ b/tests/visual/compound/tabs_selectmenu.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Compound Visual Test : Selectmenu in Tabs</title>
+ <link rel="stylesheet" href="../visual.css">
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.10.2.js"></script>
+ <script src="../../../ui/jquery.ui.core.js"></script>
+ <script src="../../../ui/jquery.ui.widget.js"></script>
+ <script src="../../../ui/jquery.ui.position.js"></script>
+ <script src="../../../ui/jquery.ui.menu.js"></script>
+ <script src="../../../ui/jquery.ui.selectmenu.js"></script>
+ <script src="../../../ui/jquery.ui.tabs.js"></script>
+ <script>
+ $(function() {
+ $( "#tabs" ).tabs();
+ $( "select" ).selectmenu();
+ });
+ </script>
+ <style>
+ select { width: 200px; }
+ </style>
+</head>
+<body>
+
+<div id="tabs">
+ <ul>
+ <li><a href="#tabs-1">First</a></li>
+ <li><a href="#tabs-2">Second</a></li>
+ </ul>
+ <div id="tabs-1">
+ <select>
+ <option>Slower</option>
+ <option>Slow</option>
+ <option>Medium</option>
+ <option>Fast</option>
+ <option>Faster</option>
+ </select>
+ </div>
+ <div id="tabs-2">
+ <select>
+ <option>Slower</option>
+ <option>Slow</option>
+ <option>Medium</option>
+ <option>Fast</option>
+ <option>Faster</option>
+ </select>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/tests/visual/selectmenu/selectmenu.html b/tests/visual/selectmenu/selectmenu.html
new file mode 100644
index 000000000..1b343a8d4
--- /dev/null
+++ b/tests/visual/selectmenu/selectmenu.html
@@ -0,0 +1,248 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Selectmenu Visual Test: Default</title>
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.10.2.js"></script>
+ <script src="../../../ui/jquery.ui.core.js"></script>
+ <script src="../../../ui/jquery.ui.widget.js"></script>
+ <script src="../../../ui/jquery.ui.position.js"></script>
+ <script src="../../../ui/jquery.ui.menu.js"></script>
+ <script src="../../../ui/jquery.ui.selectmenu.js"></script>
+ <script>
+ $(function() {
+ var log = $("#log"),
+ index = 0,
+ text;
+
+ function logger( event, ui ) {
+ text = "#" + index++ + " " + event.type.replace("selectmenu","");
+ if ( ui.item ) {
+ text += ": " + ui.item.index + " => " + ui.item.label;
+ }
+ $( "<p>" ).text( text ).prependTo( "#log" );
+ }
+
+ /* events */
+ var eventsSelectmenu = $('#control select').selectmenu({
+ open: logger,
+ close: logger,
+ focus : logger,
+ select: logger,
+ change: logger
+ });
+ eventsSelectmenu.show();
+
+ $("#destroy").click( function() {
+ eventsSelectmenu.selectmenu("destroy");
+ return false;
+ });
+
+ $("#refresh_add").click( function() {
+ eventsSelectmenu.append('<option value="fastsound">Speed of light</option>');
+ eventsSelectmenu.selectmenu("refresh");
+ return false;
+ });
+
+ $("#refresh_selected").click( function() {
+ eventsSelectmenu[0].selectedIndex = 0;
+ eventsSelectmenu.selectmenu("refresh");
+ return false;
+ });
+
+ $("#refresh").click( function() {
+ eventsSelectmenu.selectmenu("refresh");
+ return false;
+ });
+
+ $("#open").click( function() {
+ eventsSelectmenu.selectmenu("open");
+ return false;
+ });
+
+ $("#close").click( function() {
+ eventsSelectmenu.selectmenu("close");
+ return false;
+ });
+
+ /* disabled */
+ $('#disabled1, #disabled2, #disabled3').selectmenu();
+ var disabled4 = $('#disabled4').selectmenu();
+
+ $("#disable_select").on("click", function() {
+ if (disable_select) {
+ disable_select = false;
+ disabled4.selectmenu("disable");
+ } else {
+ disable_select = true;
+ disabled4.removeAttr("disabled");
+ }
+ disabled4.selectmenu("refresh");
+ return false;
+ });
+
+ $("#disable_option").on("click", function() {
+ if (disable_option) {
+ disable_option = false;
+ disabled4.find("option:eq(0)").attr("disabled", "disabled");
+ } else {
+ disable_option = true;
+ disabled4.find("option:eq(0)").removeAttr("disabled");
+ }
+ disabled4.selectmenu("refresh");
+ return false;
+ });
+
+ $("#disable_optgroup").on("click", function() {
+ if (disable_optgroup) {
+ disable_optgroup = false;
+ disabled4.find("optgroup:eq(0)").attr("disabled", "disabled");
+ } else {
+ disable_optgroup = true;
+ disabled4.find("optgroup:eq(0)").removeAttr("disabled");
+ }
+ disabled4.selectmenu("refresh");
+ return false;
+ });
+
+ /* empty */
+ $('.empty select').selectmenu();
+ });
+ </script>
+ <style>
+ body { font-size:62.5%; }
+ fieldset { border: 0; }
+ label { display: block; }
+ select { width: 200px; }
+
+ .ui-selectmenu-button { display: block; margin-bottom: 1em;}
+ </style>
+</head>
+<body>
+
+<div id="control">
+ <h2>Event logging tests</h2>
+ <form action="#">
+ <button id="open">Open</button>
+ <button id="close">Close</button>
+ <button id="refresh_add">Add item</button>
+ <button id="refresh_selected">Change to first item</button>
+ <button id="refresh">Refresh</button>
+ <button id="destroy">Destroy</button>
+ <fieldset>
+ <select>
+ <option value="Slower">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium" selected="selected">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
+ </select>
+ </fieldset>
+ </form>
+</div>
+
+<form action="#">
+ <h2>Disabled tests</h2>
+ <fieldset>
+ <label for="disabled1">Disabled select</label>
+ <select disabled="disabled" name="disabled1" id="disabled1">
+ <option value="Slower">Slower</option>
+ <option value="Slow">Slow</option>
+ <option value="Medium" selected="selected">Medium</option>
+ <option value="Fast">Fast</option>
+ <option value="Faster">Faster</option>
+ </select>
+
+ <label for="disabled2">Disabled options</label>
+ <select name="disabled2" id="disabled2">
+ <option value="1" disabled="disabled">1</option>
+ <option value="2" selected="selected">2</option>
+ <option value="3">3</option>
+ <option disabled="disabled" value="4">4</option>
+ <option value="5">5</option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ <option disabled="disabled" value="8">8</option>
+ <option value="9">9</option>
+ <option value="10">10</option>
+ <option disabled="disabled" value="11">11</option>
+ <option value="12">12</option>
+ <option value="13">13</option>
+ <option disabled="disabled" value="14">14</option>
+ <option disabled="disabled" value="15">15</option>
+ <option value="16">16</option>
+ <option value="17">17</option>
+ <option value="18">18</option>
+ <option value="19">19</option>
+ </select>
+
+ <label for="disabled3">Disabled optgroup</label>
+ <select name="disabled3" id="disabled3">
+ <optgroup disabled="disabled" label="Scripts">
+ <option value="jquery">jQuery.js</option>
+ <option value="jqueryui">ui.jQuery.js</option>
+ </optgroup>
+ <optgroup label="Other files">
+ <option value="somefile">Some unknown file</option>
+ <option value="someotherfile">Some other file</option>
+ </optgroup>
+ </select>
+
+ <label for="disabled4">Disable specific element and refresh selectmenu on button click</label>
+ <select name="disabled4" id="disabled4">
+ <optgroup label="Scripts">
+ <option value="jquery">jQuery.js</option>
+ <option value="jqueryui">ui.jQuery.js</option>
+ </optgroup>
+ <optgroup label="Other files">
+ <option value="somefile">Some unknown file</option>
+ <option value="someotherfile">Some other file</option>
+ </optgroup>
+ </select>
+ <button id="disable_select">Toggle disable select</button>
+ <button id="disable_option">Toggle disable option</button>
+ <button id="disable_optgroup">Toggle disable optgroup</button>
+ </fieldset>
+
+ <h2>Empty tests</h2>
+ <fieldset class="empty">
+ <label for="empty1">Select with no option elements</label>
+ <select name="empty1" id="empty1"></select>
+
+ <label for="empty2">Select with one empty option element</label>
+ <select name="empty2" id="empty2">
+ <option value=""></option>
+ </select>
+
+ <label for="empty3">Select with some empty option elements</label>
+ <select name="empty3" id="empty3">
+ <option value="1">1</option>
+ <option value="2" selected="selected">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value=""></option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ <option value=""></option>
+ <option value="9">9</option>
+ </select>
+
+ <label for="empty4">Select with empty optgroup</label>
+ <select id="empty4" name="empty4" class="empty4">
+ <optgroup label="Scripts"></optgroup>
+ <optgroup label="Other files">
+ <option value="somefile">Some unknown file</option>
+ <option value="someotherfile">Some other file</option>
+ </optgroup>
+ </select>
+ </fieldset>
+</form>
+
+<div style="position: absolute; top: 1em; right: 1em;">
+ Log:
+ <div id="log" style="height: 400px; width: 300px; overflow: auto; border: 1px solid #000;"></div>
+</div>
+
+</body>
+</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-07 07:05:28 +0000