Skip to content
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
rdworth committed Jan 30, 2009
1 parent 256ea06 commit 252e24d9d90c5bbefb3bb266f92631a35c935386
@@ -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.
You can’t perform that action at this time.