diff options
Diffstat (limited to 'tests')
| -rw-r--r-- | tests/unit/dialog/dialog_methods.js | 21 | ||||
| -rw-r--r-- | tests/visual/dialog/stacking.html | 62 | ||||
| -rw-r--r-- | tests/visual/index.html | 4 |
3 files changed, 83 insertions, 4 deletions
diff --git a/tests/unit/dialog/dialog_methods.js b/tests/unit/dialog/dialog_methods.js index 60a7aa4d8..8918e8d36 100644 --- a/tests/unit/dialog/dialog_methods.js +++ b/tests/unit/dialog/dialog_methods.js @@ -144,8 +144,8 @@ test("moveToTop", function() { expect( 5 ); function order() { var actual = $( ".ui-dialog" ).map(function() { - return +$( this ).find( ".ui-dialog-content" ).attr( "id" ).replace( /\D+/, "" ); - }).get().reverse(); + return +$( this ).css( "z-index" ); + }).get(); deepEqual( actual, $.makeArray( arguments ) ); } var dialog1, dialog2, @@ -161,10 +161,23 @@ test("moveToTop", function() { equal( focusOn, "dialog2" ); } }); - order( 2, 1 ); + order( 100, 101 ); focusOn = "dialog1"; dialog1.dialog( "moveToTop" ); - order( 1, 2 ); + order( 102, 101 ); +}); + +test( "moveToTop: content scroll stays intact", function() { + expect( 2 ); + var otherDialog = $( "#dialog1" ).dialog(), + scrollDialog = $( "#form-dialog" ).dialog({ + height: 200 + }); + scrollDialog.scrollTop( 50 ); + equal( scrollDialog.scrollTop(), 50 ); + + otherDialog.dialog( "moveToTop" ); + equal( scrollDialog.scrollTop(), 50 ); }); test("open", function() { diff --git a/tests/visual/dialog/stacking.html b/tests/visual/dialog/stacking.html new file mode 100644 index 000000000..dcb7de280 --- /dev/null +++ b/tests/visual/dialog/stacking.html @@ -0,0 +1,62 @@ +<!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.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.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.button.js"></script> + <script src="../../../ui/jquery.ui.dialog.js"></script> + + <style> + body { + font-size: 62.5%; + } + </style> + <script> + $(function() { + var iframeDialog = $( "#dialog-iframe" ).dialog({ + position: { + my: "right-90 center" + }, + height: 400 + }), + + scrollingDialog = $( "#dialog-scrolling" ).dialog({ + maxHeight: 200, + position: { + my: "left+90 center" + } + }), + + otherDialog = $( "#dialog-other" ).dialog({ + width: 200, + height: 150 + }); + }); + </script> +</head> +<body> + +<p>WHAT: Two dialogs, one embedding an iframe, one having just scrollable content.</p> +<p>EXPECTED: When focusing on one or the other dialog, it shouldn't affect how the content is displayed on the other dialog. It shouldn't reload the iframe or reset the scroll.</p> + + +<div id="dialog-iframe" title="Dialog that embeds an iframe"> + <iframe src="animated.html" height="400"></iframe> +</div> + +<div id="dialog-scrolling" title="Dialog with scroll"> + <p style="height:600px;background:#eee">a bunch of content</p> +</div> + +<div id="dialog-other" title="placeholder">Just another dialog to test stacking</div> + +</body> +</html> diff --git a/tests/visual/index.html b/tests/visual/index.html index 730eb4553..bb46137f4 100644 --- a/tests/visual/index.html +++ b/tests/visual/index.html @@ -33,7 +33,11 @@ <h2>Dialog</h2> <ul> + <li><a href="dialog/animated.html">Animations</a></li> + <li><a href="dialog/complex-dialogs.html">Nested dialogs</a></li> + <li><a href="dialog/form.html">Forms in dialogs</a></li> <li><a href="dialog/performance.html">Performance</a></li> + <li><a href="dialog/stacking.html">Overlapping dialogs</a></li> </ul> <h2>Effects</h2> |