aboutsummaryrefslogtreecommitdiffstats
path: root/tests/visual
diff options
context:
space:
mode:
authorFelix Nagel <info@felixnagel.com>2012-11-10 01:40:05 +0100
committerFelix Nagel <info@felixnagel.com>2012-11-10 01:40:05 +0100
commit7ce8e0515ea7cc513c3c065946c85cf2d1aa5652 (patch)
treea0337f9f7d8d0d27a7cdb78a63ee152d8357b32f /tests/visual
parent94b3a65c66e338fc6f697d13fc77d7f19b8666ae (diff)
parentd6c6b7dc3381432f50212b4f458931b2521ecb56 (diff)
downloadjquery-ui-7ce8e0515ea7cc513c3c065946c85cf2d1aa5652.tar.gz
jquery-ui-7ce8e0515ea7cc513c3c065946c85cf2d1aa5652.zip
Merge branch 'master' into selectmenu
Diffstat (limited to 'tests/visual')
-rw-r--r--tests/visual/dialog/animated.html52
-rw-r--r--tests/visual/dialog/complex-dialogs.html94
-rw-r--r--tests/visual/dialog/form.html69
-rw-r--r--tests/visual/dialog/performance.html1
-rw-r--r--tests/visual/position/position_feedback.html29
-rw-r--r--tests/visual/tooltip/tooltip.html26
6 files changed, 249 insertions, 22 deletions
diff --git a/tests/visual/dialog/animated.html b/tests/visual/dialog/animated.html
new file mode 100644
index 000000000..8fc296471
--- /dev/null
+++ b/tests/visual/dialog/animated.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Dialog Visual Test</title>
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.8.2.js"></script>
+ <script src="../../../ui/jquery.ui.core.js"></script>
+ <script src="../../../ui/jquery.ui.widget.js"></script>
+ <script src="../../../ui/jquery.ui.mouse.js"></script>
+ <script src="../../../ui/jquery.ui.draggable.js"></script>
+ <script src="../../../ui/jquery.ui.position.js"></script>
+ <script src="../../../ui/jquery.ui.resizable.js"></script>
+ <script src="../../../ui/jquery.ui.dialog.js"></script>
+ <script src="../../../ui/jquery.ui.effect.js"></script>
+ <script src="../../../ui/jquery.ui.effect-blind.js"></script>
+ <script src="../../../ui/jquery.ui.effect-explode.js"></script>
+ <script>
+ $(function() {
+ $( "#dialog" ).dialog({
+ autoOpen: false,
+ show: {
+ effect: "blind",
+ duration: 1000
+ },
+ hide: {
+ effect: "explode",
+ duration: 1000
+ },
+ modal: true
+ });
+
+ $( "#opener" ).click(function() {
+ $( "#dialog" ).dialog( "open" );
+ });
+ });
+ </script>
+</head>
+<body>
+
+<p>WHAT: A animated modal dialog, using blind effect to show, explode to hide.</p>
+<p>EXPECTED: Dialog shows up on top of the overlay and stays there during and after the animation. Focus is set to the input inside the dialog and stays there after the animation finishes.</p>
+
+<div id="dialog" title="Are you sure?">
+ <p>Please enter password to continue.</p>
+ <label for="password">Password</label><input id="password">
+</div>
+
+<button id="opener">Open Dialog</button>
+
+</body>
+</html>
diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html
new file mode 100644
index 000000000..f6d4aa162
--- /dev/null
+++ b/tests/visual/dialog/complex-dialogs.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Dialog Visual Test</title>
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.8.2.js"></script>
+ <script src="../../../ui/jquery.ui.core.js"></script>
+ <script src="../../../ui/jquery.ui.widget.js"></script>
+ <script src="../../../ui/jquery.ui.mouse.js"></script>
+ <script src="../../../ui/jquery.ui.draggable.js"></script>
+ <script src="../../../ui/jquery.ui.position.js"></script>
+ <script src="../../../ui/jquery.ui.resizable.js"></script>
+ <script src="../../../ui/jquery.ui.dialog.js"></script>
+
+ <!-- stuff needed to make things complex -->
+ <script src="../../../ui/jquery.ui.datepicker.js"></script>
+ <script src="../../../ui/jquery.ui.menu.js"></script>
+ <script src="../../../ui/jquery.ui.autocomplete.js"></script>
+ <script src="../../../ui/jquery.ui.tooltip.js"></script>
+
+ <script>
+ $(function() {
+ var dialog = $( "#dialog" ).dialog({
+ modal: true,
+ height: 300,
+ width: 500
+ }),
+
+ datepickerDialog = $( "#dialog-datepicker" ).dialog({
+ autoOpen: false,
+ modal: true
+ }),
+
+ autocompleteDialog = $( "#dialog-autocomplete" ).dialog({
+ autoOpen: false,
+ modal: false,
+ width: 600
+ });
+
+ $( "#open-dialog" ).click(function() {
+ dialog.dialog( "open" );
+ });
+
+ $( "#open-datepicker" ).click(function() {
+ datepickerDialog.dialog( "open" );
+ });
+
+ $( "#open-autocomplete" ).click(function() {
+ autocompleteDialog.dialog( "open" );
+ });
+
+ $( "#datepicker" ).datepicker();
+
+ $( "#autocomplete" ).autocomplete({
+ source: [
+ "ActionScript",
+ "AppleScript",
+ "Asp",
+ "BASIC",
+ "Scheme"
+ ]
+ });
+
+ $( document ).tooltip();
+ });
+ </script>
+</head>
+<body>
+
+<p>WHAT: A modal dialog opening another modal dialog (including a datepicker), opening a non-modal dialog (including an autocomplete with tooltip applied). A regular link on the page, outside of the dialogs.</p>
+<p>EXPECTED: As long as a modal dialog is open, focus stays within the dialogs. Both mouse and keyboard interactions are captured and restricted to the dialog. When the nested modal dialog is open, the first modal dialog can't be interacted with, until the nested dialog is closed. When the third dialog is open (not modal), switching between the two dialogs is possible, both can be interacted with.</p>
+
+<a href="#">Outside link</a>
+
+<button id="open-dialog">Reopen dialog</button>
+
+<div id="dialog" title="Basic dialog">
+ <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
+ <p><button id="open-datepicker">Open another window with a datepicker.</button></p>
+</div>
+
+<div id="dialog-datepicker" title="A dialog with a datepicker">
+ <p>Date: <input id="datepicker"></p>
+ <p><button id="open-autocomplete">Open another window with an autocomplete and a tooltip.</button></p>
+</div>
+
+<div id="dialog-autocomplete">
+ <label for="autocomplete">Tags: </label>
+ <input id="autocomplete" title="Try typing something!">
+</div>
+
+</body>
+</html>
diff --git a/tests/visual/dialog/form.html b/tests/visual/dialog/form.html
new file mode 100644
index 000000000..47ed5e0b5
--- /dev/null
+++ b/tests/visual/dialog/form.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Dialog Visual Test</title>
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+ <script src="../../../jquery-1.8.2.js"></script>
+ <script src="../../../ui/jquery.ui.core.js"></script>
+ <script src="../../../ui/jquery.ui.widget.js"></script>
+ <script src="../../../ui/jquery.ui.mouse.js"></script>
+ <script src="../../../ui/jquery.ui.draggable.js"></script>
+ <script src="../../../ui/jquery.ui.position.js"></script>
+ <script src="../../../ui/jquery.ui.resizable.js"></script>
+ <script src="../../../ui/jquery.ui.dialog.js"></script>
+ <script src="../../../ui/jquery.ui.effect.js"></script>
+ <script src="../../../ui/jquery.ui.effect-blind.js"></script>
+ <script src="../../../ui/jquery.ui.effect-explode.js"></script>
+ <script>
+ $(function() {
+ $( "#form-dialog, #prompt-dialog" ).dialog({
+ autoOpen: false,
+ modal: true
+ });
+
+ $( "#open-form" ).click(function() {
+ $( "#form-dialog" ).dialog( "open" );
+ });
+
+ $( "#open-prompt" ).click(function() {
+ $( "#prompt-dialog" ).dialog( "open" );
+ });
+ });
+ </script>
+ <style>
+ label {
+ display: block;
+ }
+ </style>
+</head>
+<body>
+
+<p>WHAT: A modal dialog containing form fields, with groups to describe each section. A second modal dialog with just an input and some text markup.</p>
+<p>EXPECTED: Dialog shows up, screenreader reads the dialog's title, the word "dialog" (or equivalent), the text before the first input (description of the first section) and the label of the first, focused input. When tabbing to the next group, the screenreader should announce the description of that group, along with the label of the focused field.</p>
+<p>For the second dialog, the behaviour should be similar, except that the whole content is read as the description of the dialog, likely causing the input's label to be read twice.</p>
+<p>NOTE: Using <code>fieldset</code> with <code>legend</code> seems to have the same result as using <code>role="group"</code> and <code>aria-describedby</code>. The latter needs an id-attribute, offers more flexibilty in markup order and has no built-in styling.</p>
+
+<div id="form-dialog" title="Profile Information">
+ <fieldset>
+ <legend>Please share some personal information</legend>
+ <label for="favorite-animal">Your favorite animal</label><input id="favorite-animal">
+ <label for="favorite-color">Your favorite color</label><input id="favorite-color">
+ </fieldset>
+ <div role="group" aria-describedby="section2">
+ <p id="section2">Some more (optional) information</p>
+ <label for="favorite-food">Favorite food</label><input id="favorite-food">
+ </div>
+</div>
+
+<button id="open-form">Open Form Dialog</button>
+
+<div id="prompt-dialog" title="Are you sure?">
+ <p>Please enter password to continue.</p>
+ <label for="password">Password</label><input id="password">
+</div>
+
+<button id="open-prompt">Open Prompt Dialog</button>
+
+</body>
+</html>
diff --git a/tests/visual/dialog/performance.html b/tests/visual/dialog/performance.html
index 0b3bc6e58..fb863488d 100644
--- a/tests/visual/dialog/performance.html
+++ b/tests/visual/dialog/performance.html
@@ -5,7 +5,6 @@
<title>Dialog Visual Test - Modal Dialog in Large DOM</title>
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
<script src="../../../jquery-1.8.2.js"></script>
- <script src="../../../external/jquery.bgiframe-2.1.2.js"></script>
<script src="../../../ui/jquery.ui.core.js"></script>
<script src="../../../ui/jquery.ui.position.js"></script>
<script src="../../../ui/jquery.ui.widget.js"></script>
diff --git a/tests/visual/position/position_feedback.html b/tests/visual/position/position_feedback.html
index fe1f04e5b..fb3bf00fd 100644
--- a/tests/visual/position/position_feedback.html
+++ b/tests/visual/position/position_feedback.html
@@ -55,25 +55,24 @@
});
element.width( 150 );
- $( document ).on( "mousemove", function( event ) {
- var base = {
+ function positionWithOffset( horizontal, vertical ) {
+ return {
my: "left top",
- at: "left top",
+ at: "left" + (horizontal < 0 ? horizontal : "+" + horizontal) + " " +
+ "top" + (vertical < 0 ? vertical : "+" + vertical),
of: target,
using: using
};
- element.position( $.extend({
- offset: (event.pageX - targetOffset.left) + " " + (event.pageY - targetOffset.top)
- }, base ));
- oppositeElement.position( $.extend({
- offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top))
- }, base ));
- leftElement.position( $.extend({
- offset: (-0.9 * (event.pageX - targetOffset.left)) + " " + (0.9 * (event.pageY - targetOffset.top))
- }, base ));
- rightElement.position( $.extend({
- offset: (0.9 * (event.pageX - targetOffset.left)) + " " + (-0.9 * (event.pageY - targetOffset.top))
- }, base) );
+ };
+ $( document ).on( "mousemove", function( event ) {
+ element.position( positionWithOffset(
+ event.pageX - targetOffset.left, event.pageY - targetOffset.top ) );
+ oppositeElement.position( positionWithOffset(
+ -1 * (event.pageX - targetOffset.left), -1 * (event.pageY - targetOffset.top) ) );
+ leftElement.position( positionWithOffset(
+ -0.9 * (event.pageX - targetOffset.left), 0.9 * (event.pageY - targetOffset.top) ) );
+ rightElement.position( positionWithOffset(
+ 0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) );
});
});
</script>
diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html
index 56e5db10e..706ed5091 100644
--- a/tests/visual/tooltip/tooltip.html
+++ b/tests/visual/tooltip/tooltip.html
@@ -66,8 +66,7 @@
tooltipClass: "ui-state-highlight",
position: {
my: "center top",
- at: "center bottom",
- offset: "0 10"
+ at: "center bottom+10"
}
});
@@ -86,10 +85,18 @@
$( "#buttons" ).tooltip({
position: {
my: "center bottom",
- at: "center top",
- offset: "0 -5"
+ at: "center top-5"
}
});
+
+ $( "#blurs-on-click" ).tooltip({
+ track: true,
+ show: {
+ delay: 500
+ }
+ }).click(function() {
+ $( "#focus-on-me" ).focus();
+ });
});
</script>
</head>
@@ -140,16 +147,23 @@
<div class="group" style="width: 300px;">
<p>Nested elements.</p>
<div id="context2">
- <div title="something else" style="border:1px solid red;">
+ <div title="nested parent" style="border:1px solid red;">
tooltipped
- <span title="something more" style="border:1px solid green; padding-left: 50px;">nested tooltipped</span>
+ <span title="nested child" style="border:1px solid green; padding-left: 25px;">
+ nested tooltipped
+ <span title="nested nested child" style="border:1px solid blue; padding-left: 25px;">third level</span>
+ </span>
</div>
+ <input title="nested input title">
</div>
<div id="childish" style="border: 1px solid black;" title="element with child elements">
Text in <strong>bold</strong>.
</div>
</div>
+ <button id="blurs-on-click" title="button title text">click me to focus something else</button>
+ <input id="focus-on-me">
+
<div class="group">
<p>Play around with focusing and hovering of form elements.</p>
<form>
generated by cgit v1.2.3 (git 2.39.1) at 2025-03-27 15:33:16 +0000