Refactor touch hit-testing hover/active tests.

LayoutTests/fast/events/touch/gesture/gesture-tap-cancel-hover-state.html

 <!DOCTYPE html>
 <html>
 <script src="../../../../resources/js-test.js"></script>
+<link rel="stylesheet" href="../resources/touch-hover-active-tests.css">
 <style type="text/css">
 #box {
-    background-color: blue;
     width: 300px;
     height: 100px;
 }
-
-#box:hover {
-    background-color: red;
-}
-
-#box:active {
-    background-color: green;
-}
-
-#box:hover:active {
-    background-color: yellow;
-}
-
 </style>
 <body>
-<div id="box">Gestures go here</div>
+<div id="box" class="touch-interactive">Gestures go here</div>
 
 <p id="description"></p>
 <p>See http://crbug.com/316974 for details</p>
 
 <div id="console"></div>
 
+<script src="../resources/touch-hover-active-tests.js"></script>
 <script>
-var color;
-
-function isBoxOfColor(givenColor)
-{
-    var b = document.getElementById('box');
-    color = window.getComputedStyle(b).backgroundColor;
-    if (color == givenColor)
-        return true;
-
-    testFailed('Box had backgroundColor: ' + color);
-    return false;
-}
-
-function isBoxHovered()
-{
-    return isBoxOfColor("rgb(255, 0, 0)");
-}
-
-function isBoxActive()
-{
-    return isBoxOfColor("rgb(0, 255, 0)");
-}
-
-function isBoxHoverActive()
-{
-    return isBoxOfColor("rgb(255, 255, 0)");
-}
-
-function isBoxDefault()
-{
-    return isBoxOfColor("rgb(0, 0, 255)");
-}
-
 description("Tests that gesture tapcancel clears hover properly");
 
 function runTests()
 {
     if (!window.eventSender) {
         debug('This test requires DRT.');
         return;
     }
 
     if (!eventSender.gestureShowPress
         || !eventSender.gestureTapCancel) {
         debug('Gesture events are not supported by this platform');
         return;
     }
 
     debug("Verify hover, active aren't initially set");
-    shouldBeTrue("isBoxDefault()");
+    shouldBeTrue("isBoxDefault('box')");
 
     debug("tapcancel on element when it is Active should keep hover");
+    eventSender.gestureTapDown(50, 50);
     eventSender.gestureShowPress(50, 50);
-    shouldBeTrue("isBoxHoverActive()");
+    shouldBeTrue("isBoxHoverActive('box')");
     eventSender.gestureTapCancel(50, 50);
-    shouldBeTrue("isBoxHovered()");
+    shouldBeTrue("isBoxHovered('box')");
 
     debug("tapcancel outside element when it is Active should clear it");
+    eventSender.gestureTapDown(50, 50);
     eventSender.gestureShowPress(50, 50);
-    shouldBeTrue("isBoxHoverActive()");
+    shouldBeTrue("isBoxHoverActive('box')");
     eventSender.gestureTapCancel(400, 250);
-    shouldBeTrue("isBoxDefault()");
+    shouldBeTrue("isBoxDefault('box')");
 
     debug("tapcancel on element when it is hovered but not active should keep hover");
     eventSender.mouseMoveTo(50, 50);
-    shouldBeTrue("isBoxHovered()");
+    shouldBeTrue("isBoxHovered('box')");
     eventSender.gestureTapCancel(50, 50);
-    shouldBeTrue("isBoxHovered()");
+    shouldBeTrue("isBoxHovered('box')");
 
     debug("tapcancel outside element when it is hovered but not active should keep hover");
     eventSender.mouseMoveTo(50, 50);
-    shouldBeTrue("isBoxHovered()");
+    shouldBeTrue("isBoxHovered('box')");
     eventSender.gestureTapCancel(400, 250);
-    shouldBeTrue("isBoxHovered()");
+    shouldBeTrue("isBoxHovered('box')");
 }
 
-runTests();
+window.onload = runTests;
 </script>
 </body>
 </html>