library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

resizable visual tests: added tests for aspectRatio, and combining aspectRatio with min and max height and width options

Browse Source
This commit is contained in:
Richard Worth 2009-01-30 04:59:41 +00:00
parent 256ea0670a
commit 252e24d9d9
10 changed files with 264 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
tests/visual/resizable/resizable_option_aspectRatio_0.5.html Normal file
View File

@ -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>

26
tests/visual/resizable/resizable_option_aspectRatio_1.0.html Normal file
View File

@ -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>

26
tests/visual/resizable/resizable_option_aspectRatio_1.5.html Normal file
View File

@ -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>

27
tests/visual/resizable/resizable_option_aspectRatio_preserve_maxHeight_150.html Normal file
View File

@ -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>

27
tests/visual/resizable/resizable_option_aspectRatio_preserve_maxWidth_150.html Normal file
View File

@ -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>

27
tests/visual/resizable/resizable_option_aspectRatio_preserve_minHeight_50.html Normal file
View File

@ -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>

27
tests/visual/resizable/resizable_option_aspectRatio_preserve_minWidth_50.html Normal file
View File

@ -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>

26
tests/visual/resizable/resizable_option_aspectRatio_preserve_w100xh100.html Normal file
View File

@ -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>

26
tests/visual/resizable/resizable_option_aspectRatio_preserve_w100xh50.html Normal file
View File

@ -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>

26
tests/visual/resizable/resizable_option_aspectRatio_preserve_w50xh100.html Normal file
View File

@ -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>