r2306 - #4251 - Added visual test pages

r2306 - #4251 - Added visual test pages


Author: rdworth
Date: Wed Mar 18 03:13:09 2009
New Revision: 2306
Added:
trunk/tests/visual/animate/
trunk/tests/visual/animate/animate_backgroundColor_hex.html (contents,
props changed)
trunk/tests/visual/animate/animate_backgroundColor_rgb.html (contents,
props changed)
trunk/tests/visual/animate/animate_color_hex.html (contents, props
changed)
trunk/tests/visual/animate/animate_color_rgb.html (contents, props
changed)
Log:
#4251 - Added visual test pages
Added: trunk/tests/visual/animate/animate_backgroundColor_hex.html
==============================================================================
--- (empty file)
+++ trunk/tests/visual/animate/animate_backgroundColor_hex.html    Wed Mar 18
03:13:09 2009
@@ -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>
Added: trunk/tests/visual/animate/animate_backgroundColor_rgb.html
==============================================================================
--- (empty file)
+++ trunk/tests/visual/animate/animate_backgroundColor_rgb.html    Wed Mar 18
03:13:09 2009
@@ -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>
Added: trunk/tests/visual/animate/animate_color_hex.html
==============================================================================
--- (empty file)
+++ trunk/tests/visual/animate/animate_color_hex.html    Wed Mar 18 03:13:09
2009
@@ -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>
Added: trunk/tests/visual/animate/animate_color_rgb.html
==============================================================================
--- (empty file)
+++ trunk/tests/visual/animate/animate_color_rgb.html    Wed Mar 18 03:13:09
2009
@@ -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>