[web] update mouse interaction page

SeleniumHQ · May 27, 2022 · 9990fba · 9990fba
1 parent bc1b4f0
commit 9990fba
Showing 1 changed file with 34 additions and 20 deletions.
diff --git a/common/src/web/mouse_interaction.html b/common/src/web/mouse_interaction.html
@@ -3,20 +3,20 @@
     <title>BasicMouseInterfaceTest</title>
 
     <style>
-      div.solidborder { border-style:solid; border-width:1px;}
+      div.solidborder { border-style:solid; border-width:1px; margin: 10px;}
       #draggable { width: 60px; height: 60px; padding: 0.5em; margin: 10px; }
       #droppable { width: 75px; height: 75px; padding: 0.5em; margin: 10px; }
     </style>
 
-  <link type="text/css" href="css/ui-lightness/jquery-ui-1.12.1.min.css" rel="stylesheet" />
-  <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
-  <script type="text/javascript" src="js/jquery-ui-1.12.1.min.js"></script>
+  <link type="text/css" href="https://selenium.dev/selenium/web/css/ui-lightness/jquery-ui-1.12.1.min.css" rel="stylesheet" />
+  <script type="text/javascript" src="https://selenium.dev/selenium/web/js/jquery-3.5.1.min.js"></script>
+  <script type="text/javascript" src="https://selenium.dev/selenium/web/js/jquery-ui-1.12.1.min.js"></script>
   <script type="text/javascript">
     jQuery(document).ready(function(){
-        $('#mousetracker').mousemove(function(e){
+        $('#mouse-tracker').mousemove(function(e){
           xPos = e.pageX - this.offsetLeft;
           yPos = e.pageY - this.offsetTop;
-          $('#status').html(xPos + ', ' + yPos);
+          $('#relative-location').html(xPos + ', ' + yPos);
           });
         })
 
@@ -29,14 +29,28 @@
       document.getElementById('move-status').innerHTML = message;
     }
     function dropStatus(message) {
-      document.getElementById('drop-status').innerHTML = message;
+        document.getElementById('drop-status').innerHTML = message;
     }
+    function relativeStatus(message) {
+        document.getElementById('relative-location').innerHTML = message;
+    }
+    function absoluteStatus(message) {
+        document.getElementById('absolute-location').innerHTML = message;
+    }
+    function tellPos(p){
+        document.getElementById('absolute-location').innerHTML = p.pageX + ', ' + p.pageY;
+    }
+    function clearAbsolute(p){
+        document.getElementById('absolute-location').innerHTML = '';
+    }
+    addEventListener('mousemove', tellPos, false);
+    document.documentElement.addEventListener('mouseleave', clearAbsolute, false);
   </script>
   <script type="text/javascript">
     $(function () {
       $("#draggable").draggable();
       $("#droppable").droppable({
-        drop: function (event, ui) { dropStatus("Dropped!") }
+        drop: function (event, ui) { dropStatus("dropped") }
       });
     });
   </script>
@@ -48,33 +62,33 @@ <h2>Mouse Clicks</h2>
   <p><a href="resultPage.html" id="click">Click for Results Page</a></p>
 
   <div>
-   <input type="text" id="presses"
-    onfocus="clickStatus('focus')"
-    oncontextmenu="clickStatus('contextClick')"
-    ondblclick="clickStatus('doubleClick')"
-    placeholder="Click"/>&nbsp;&nbsp;
+   <input type="text" id="clickable"
+    onfocus="clickStatus('focused')"
+    oncontextmenu="clickStatus('context-clicked')"
+    ondblclick="clickStatus('double-clicked')"
+    placeholder="Clickable"/>&nbsp;&nbsp;
 
     <strong id="click-status">&nbsp;</strong>
   </div>
 
   <h2>Drag & Drop</h2>
 
   <strong id="drop-status">&nbsp;</strong>
-  <div id="draggable" class="ui-widget-content">Drag this</div>
+  <div id="draggable" class="ui-widget-content">Draggable</div>
 
-  <div id="droppable" class="ui-widget-header">Drop here</div>
+  <div id="droppable" class="ui-widget-header">Droppable</div>
 
   <h2>Mouse Position</h2>
 
   <div>
-    <input type="button" id="hover" onmouseleave="moveStatus('')" onmouseover="moveStatus('hovered')" value="Hover"/>
-    <strong id="move-status">&nbsp;</strong>
+  <input type="button" id="hover" onmouseleave="moveStatus('')" onmouseover="moveStatus('hovered')" value="Hoverable"/>
+  <strong id="move-status">&nbsp</strong>
   </div>
 
-  <p><strong id="status">0, 0</strong></p>
-  <div id="mousetracker" class="solidborder" style="position: absolute; height: 200px; width: 200px;">
+  <p><strong>Absolute Location: <span id="absolute-location" onmouseleave="absoluteStatus('')"></span></strong></p>
+  <p><strong>Relative Location in Box: <span id="relative-location"></span></strong></p>
+  <div id="mouse-tracker" onmouseleave="relativeStatus('')" class="solidborder" style="position: absolute; height: 200px; width: 200px;">
     Move mouse here.
   </div>
-
   </body>
 </html>