Split out mouse hover/enter/leave tests into a separate file and add …

…several more scenarios.
jquery · Sep 19, 2011 · 8ba5010 · 8ba5010
1 parent 9aa553a
commit 8ba5010
Show file tree

Hide file tree

Showing 2 changed files with 144 additions and 14 deletions.
diff --git a/test/delegatetest.html b/test/delegatetest.html
@@ -183,16 +183,6 @@ <h2>Submit Tests</h2>
 	        <td id='boundSubmit' class="red">DOCUMENT</td>
 	</tr>
         </table>
-
-	<h1>Mouseleave Tests</h1>
-
-	<div class="out" style="margin:20px; border:1px solid #000; background: red;">
-    	<p>Count mouse leave event</p>
-    	<div class="in" style="background: green; margin: 10px auto; width: 50%;">
-        	<p>mouse over here should not trigger the counter.</p>
-    	</div>
-    	<p>0</p>
-	</div>
 
 	<ul id="log"></ul>
 
@@ -280,10 +270,6 @@ <h1>Mouseleave Tests</h1>
 		jQuery("#boundSubmit").blink();
 	});
 
-	var n = 0;
-	$("div.out").live("mouseleave", function() {
-		$("p:last", this).text(++n);
-	});
 	</script>
     </body>
 </html>
diff --git a/test/hovertest.html b/test/hovertest.html
@@ -0,0 +1,144 @@
+<html>
+<head>
+<title>Hover tests</title>
+<script src="http://code.jquery.com/jquery-1.6.2.js" type='text/javascript'></script>
+<style>
+/* Remove body dimensions so we can test enter/leave to surrounding browser chrome */
+body, html {
+	border: 0;
+	margin: 0;
+	padding: 0;
+}
+p {
+	margin: 2px 0;
+}
+.hover-box {
+	background: #f33;
+	padding: 3px;
+	margin: 10px 40px 20px 0;
+}
+.hover-status {
+	background: #f66;
+	padding: 1px;
+}
+.hover-inside {
+	background: #6f6;
+	padding: 1px;
+	margin: 8px auto;
+	width: 40%;
+	text-align: center;
+}
+</style>
+ </head>
+ <body>
+    <h2>Hover (mouse{over,out,enter,leave}) Tests</h2>
+	<p>Be sure to try moving the mouse out of the browser via the left side on each test.</p>
+	<div id="wrapper">
+
+	<div id="hoverbox" class="hover-box">
+    	<div class="hover-status">
+			<button>Activate</button>
+			.hover() in/out: <span class="ins">0</span> / <span class="outs">0</span>
+		</div>
+    	<div class="hover-inside">
+        	Mouse over here should NOT trigger the counter.
+    	</div>
+	</div>
+
+	<div id="livebox" class="hover-box">
+    	<div class="hover-status">
+			<button>Activate</button>
+			Live enter/leave: <span class="ins">0</span> / <span class="outs">0</span>
+		</div>
+    	<div class="hover-inside">
+        	Mouse over here should NOT trigger the counter.
+    	</div>
+	</div>
+
+	<div id="delegateenterbox" class="hover-box">
+    	<div class="hover-status">
+			<button>Activate</button>
+			Delegated enter/leave: <span class="ins">0</span> / <span class="outs">0</span>
+		</div>
+    	<div class="hover-inside">
+        	Mouse over here should NOT trigger the counter.
+    	</div>
+	</div>
+
+	<div id="overbox" class="hover-box">
+    	<div class="hover-status">
+			<button>Activate</button>
+			Bind over/out: <span class="ins">0</span> / <span class="outs">0</span>
+		</div>
+    	<div class="hover-inside">
+        	Mouse over here SHOULD trigger the counter.
+    	</div>
+	</div>
+	<div id="delegateoverbox" class="hover-box">
+    	<div class="hover-status">
+			<button>Activate</button>
+			Delegated over/out: <span class="ins">0</span> / <span class="outs">0</span>
+		</div>
+    	<div class="hover-inside">
+        	Mouse over here SHOULD trigger the counter.
+    	</div>
+	</div>
+
+	</div> <!-- wrapper -->
+
+<script>
+
+$(function(){
+
+	var x,
+		countIns = function() {
+			var d = $(this).data();
+			$("span.ins", this).text(++d.ins);
+		},
+		countOuts = function() {
+			var d = $(this).data();
+			$("span.outs", this).text(++d.outs);
+		};
+
+	// Tests can be activated separately or in combination to check for interference
+
+	$("#hoverbox button").click(function(){
+		$("#hoverbox")
+			.data({ ins: 0, outs: 0 })
+			.hover( countIns, countOuts );
+		$(this).remove();
+	});
+	$("#delegateenterbox button").click(function(){
+		$("html")
+			.find("#delegateenterbox").data({ ins: 0, outs: 0 }).end()
+			.delegate("#delegateenterbox", "mouseenter", countIns )
+			.delegate("#delegateenterbox", "mouseleave", countOuts );
+		$(this).remove();
+	});
+	$("#livebox button").click(function(){
+		$("#livebox")
+			.data({ ins: 0, outs: 0 })
+			.live("mouseenter", countIns )
+			.live("mouseleave", countOuts );
+		$(this).remove();
+	});
+
+	$("#overbox button").click(function(){
+		$("#overbox")
+			.data({ ins: 0, outs: 0 })
+			.bind("mouseover", countIns )
+			.bind("mouseout", countOuts );
+		$(this).remove();
+	});
+	$("#delegateoverbox button").click(function(){
+		$(document)
+			.find("#delegateoverbox").data({ ins: 0, outs: 0 }).end()
+			.delegate("#delegateoverbox", "mouseover", countIns )
+			.delegate("#delegateoverbox", "mouseout", countOuts );
+		$(this).remove();
+	});
+});
+
+</script>
+</body>
+</html>