Permalink
Browse files

resizable visual tests: added tests for aspectRatio, and combining as…

…pectRatio with min and max height and width options
  • Loading branch information...
1 parent 256ea06 commit 252e24d9d90c5bbefb3bb266f92631a35c935386 @rdworth rdworth committed Jan 30, 2009
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Resizable Visual Test : Resizable option aspectRatio 0.5</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.1.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.resizable.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#resizable").resizable({
+ aspectRatio: 0.5
+ });
+ });
+ </script>
+ <style type="text/css">
+ #resizable { width: 100px; height: 100px; background: silver; }
+ </style>
+</head>
+<body>
+
+<div id="resizable">Resizable</div>
+
+</body>
+</html>
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Resizable Visual Test : Resizable option aspectRatio 1.0</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.1.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.resizable.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#resizable").resizable({
+ aspectRatio: 1.0
+ });
+ });
+ </script>
+ <style type="text/css">
+ #resizable { width: 100px; height: 100px; background: silver; }
+ </style>
+</head>
+<body>
+
+<div id="resizable">Resizable</div>
+
+</body>
+</html>
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Resizable Visual Test : Resizable option aspectRatio 1.5</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.1.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.resizable.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#resizable").resizable({
+ aspectRatio: 1.5
+ });
+ });
+ </script>
+ <style type="text/css">
+ #resizable { width: 100px; height: 100px; background: silver; }
+ </style>
+</head>
+<body>
+
+<div id="resizable">Resizable</div>
+
+</body>
+</html>
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Resizable Visual Test : Resizable option aspectRatio 1.0 maxHeight 150</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.1.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.resizable.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#resizable").resizable({
+ aspectRatio: 'preserve',
+ maxHeight: 150
+ });
+ });
+ </script>
+ <style type="text/css">
+ #resizable { width: 100px; height: 100px; background: silver; }
+ </style>
+</head>
+<body>
+
+<div id="resizable">Resizable</div>
+
+</body>
+</html>
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Resizable Visual Test : Resizable option aspectRatio 1.0 maxWidth 150</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.1.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.resizable.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#resizable").resizable({
+ aspectRatio: 'preserve',
+ maxWidth: 150
+ });
+ });
+ </script>
+ <style type="text/css">
+ #resizable { width: 100px; height: 100px; background: silver; }
+ </style>
+</head>
+<body>
+
+<div id="resizable">Resizable</div>
+
+</body>
+</html>
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Resizable Visual Test : Resizable option aspectRatio 1.0 minHeight 50</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.1.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.resizable.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#resizable").resizable({
+ aspectRatio: 'preserve',
+ minHeight: 50
+ });
+ });
+ </script>
+ <style type="text/css">
+ #resizable { width: 100px; height: 100px; background: silver; }
+ </style>
+</head>
+<body>
+
+<div id="resizable">Resizable</div>
+
+</body>
+</html>
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Resizable Visual Test : Resizable option aspectRatio 1.0 maxWidth 50</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.1.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.resizable.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#resizable").resizable({
+ aspectRatio: 'preserve',
+ minWidth: 50
+ });
+ });
+ </script>
+ <style type="text/css">
+ #resizable { width: 100px; height: 100px; background: silver; }
+ </style>
+</head>
+<body>
+
+<div id="resizable">Resizable</div>
+
+</body>
+</html>
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Resizable Visual Test : Default</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.1.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.resizable.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#resizable").resizable({
+ aspectRatio: 'preserve'
+ });
+ });
+ </script>
+ <style type="text/css">
+ #resizable { width: 100px; height: 100px; background: silver; }
+ </style>
+</head>
+<body>
+
+<div id="resizable">Resizable</div>
+
+</body>
+</html>
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Resizable Visual Test : Default</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.1.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.resizable.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#resizable").resizable({
+ aspectRatio: 'preserve'
+ });
+ });
+ </script>
+ <style type="text/css">
+ #resizable { width: 50px; height: 100px; background: silver; }
+ </style>
+</head>
+<body>
+
+<div id="resizable">Resizable</div>
+
+</body>
+</html>
@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>Resizable Visual Test : Default</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.1.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.resizable.js"></script>
+ <script type="text/javascript">
+ $(function() {
+ $("#resizable").resizable({
+ aspectRatio: 'preserve'
+ });
+ });
+ </script>
+ <style type="text/css">
+ #resizable { width: 100px; height: 50px; background: silver; }
+ </style>
+</head>
+<body>
+
+<div id="resizable">Resizable</div>
+
+</body>
+</html>

0 comments on commit 252e24d

Please sign in to comment.