diff options
| author | Richard Worth <rdworth@gmail.com> | 2009-03-18 10:13:09 +0000 |
|---|---|---|
| committer | Richard Worth <rdworth@gmail.com> | 2009-03-18 10:13:09 +0000 |
| commit | 8120dfa0d02611a5c3dfc83192fa51115eab956b (patch) | |
| tree | 522bce74f643f5ed933023d049f2bcbedf0c2a4e /tests/visual | |
| parent | b025e6725981c2dbfe7f34a4d4fb07451836aee2 (diff) | |
| download | jquery-ui-8120dfa0d02611a5c3dfc83192fa51115eab956b.tar.gz jquery-ui-8120dfa0d02611a5c3dfc83192fa51115eab956b.zip | |
#4251 - Added visual test pages
Diffstat (limited to 'tests/visual')
| -rw-r--r-- | tests/visual/animate/animate_backgroundColor_hex.html | 43 | ||||
| -rw-r--r-- | tests/visual/animate/animate_backgroundColor_rgb.html | 34 | ||||
| -rw-r--r-- | tests/visual/animate/animate_color_hex.html | 43 | ||||
| -rw-r--r-- | tests/visual/animate/animate_color_rgb.html | 34 |
4 files changed, 154 insertions, 0 deletions
diff --git a/tests/visual/animate/animate_backgroundColor_hex.html b/tests/visual/animate/animate_backgroundColor_hex.html new file mode 100644 index 000000000..55c5ba8e6 --- /dev/null +++ b/tests/visual/animate/animate_backgroundColor_hex.html @@ -0,0 +1,43 @@ +<!doctype html> +<html lang="en"> +<head> + <title>Animate Visual Test : Animate backgroundColor hex</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.2.js"></script> + <script type="text/javascript" src="../../../ui/effects.core.js"></script> + <script type="text/javascript"> + function hexFromRGB (r, g, b) { + var hex = [ + r.toString(16), + g.toString(16), + b.toString(16) + ]; + $.each(hex, function (nr, val) { + if (val.length == 1) { + hex[nr] = '0' + val; + } + }); + return hex.join('').toUpperCase(); + } + function randomColorHex() { + return '#' + hexFromRGB(Math.floor(Math.random()*256), Math.floor(Math.random()*256), Math.floor(Math.random()*256)); + } + $(function() { + $("#go").click(function() { + $("#animate-backgroundColor").stop().animate({ backgroundColor: randomColorHex() }, "fast"); + }); + }) + </script> + <style type="text/css"> + #animate-backgroundColor { width: 100px; height: 100px; background-color: gray; } + </style> +</head> +<body> + +<div id="animate-backgroundColor"></div> + +<button id="go">Go</button> + +</body> +</html> diff --git a/tests/visual/animate/animate_backgroundColor_rgb.html b/tests/visual/animate/animate_backgroundColor_rgb.html new file mode 100644 index 000000000..8419d1113 --- /dev/null +++ b/tests/visual/animate/animate_backgroundColor_rgb.html @@ -0,0 +1,34 @@ +<!doctype html> +<html lang="en"> +<head> + <title>Animate Visual Test : Animate backgroundColor rgb</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.2.js"></script> + <script type="text/javascript" src="../../../ui/effects.core.js"></script> + <script type="text/javascript"> + function randomColorRGB() { + return 'rgb(' + + Math.floor(Math.random()*256) + + ', ' + Math.floor(Math.random()*256) + + ', ' + Math.floor(Math.random()*256) + + ')'; + } + $(function() { + $("#go").click(function() { + $("#animate-backgroundColor").stop().animate({ backgroundColor: randomColorRGB() }, "fast"); + }); + }) + </script> + <style type="text/css"> + #animate-backgroundColor { width: 100px; height: 100px; background-color: gray; } + </style> +</head> +<body> + +<div id="animate-backgroundColor"></div> + +<button id="go">Go</button> + +</body> +</html> diff --git a/tests/visual/animate/animate_color_hex.html b/tests/visual/animate/animate_color_hex.html new file mode 100644 index 000000000..decce8c9c --- /dev/null +++ b/tests/visual/animate/animate_color_hex.html @@ -0,0 +1,43 @@ +<!doctype html> +<html lang="en"> +<head> + <title>Animate Visual Test : Animate color hex</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.2.js"></script> + <script type="text/javascript" src="../../../ui/effects.core.js"></script> + <script type="text/javascript"> + function hexFromRGB (r, g, b) { + var hex = [ + r.toString(16), + g.toString(16), + b.toString(16) + ]; + $.each(hex, function (nr, val) { + if (val.length == 1) { + hex[nr] = '0' + val; + } + }); + return hex.join('').toUpperCase(); + } + function randomColorHex() { + return '#' + hexFromRGB(Math.floor(Math.random()*256), Math.floor(Math.random()*256), Math.floor(Math.random()*256)); + } + $(function() { + $("#go").click(function() { + $("#animate-color").stop().animate({ color: randomColorHex() }, "fast"); + }); + }) + </script> + <style type="text/css"> + #animate-color { width: 250px; height: 100px; color: gray; } + </style> +</head> +<body> + +<div id="animate-color">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div> + +<button id="go">Go</button> + +</body> +</html> diff --git a/tests/visual/animate/animate_color_rgb.html b/tests/visual/animate/animate_color_rgb.html new file mode 100644 index 000000000..10904ac6c --- /dev/null +++ b/tests/visual/animate/animate_color_rgb.html @@ -0,0 +1,34 @@ +<!doctype html> +<html lang="en"> +<head> + <title>Animate Visual Test : Animate color rgb</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.2.js"></script> + <script type="text/javascript" src="../../../ui/effects.core.js"></script> + <script type="text/javascript"> + function randomColorRGB() { + return 'rgb(' + + Math.floor(Math.random()*256) + + ', ' + Math.floor(Math.random()*256) + + ', ' + Math.floor(Math.random()*256) + + ')'; + } + $(function() { + $("#go").click(function() { + $("#animate-color").stop().animate({ color: randomColorRGB() }, "fast"); + }); + }) + </script> + <style type="text/css"> + #animate-color { width: 250px; height: 100px; color: gray; } + </style> +</head> +<body> + +<div id="animate-color">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div> + +<button id="go">Go</button> + +</body> +</html> |