Option to search for elements from given element straight into one di…

…rection
AdamPDotty · Sep 11, 2024 · da9ce78 · da9ce78
1 parent 05bce9b
commit da9ce78
Show file tree

Hide file tree

Showing 8 changed files with 819 additions and 304 deletions.
diff --git a/common/src/web/relative_locators.html b/common/src/web/relative_locators.html
@@ -1,5 +1,4 @@
-
-<html>
+<html lang="en">
 <head>
   <title>Relative Locators</title>
   <style>
@@ -10,57 +9,101 @@
     td {
       border: solid;
     }
-    .small-rectangle {
+    #center {
+      width: 100px;
+    }
+    #rectangles {
+      position: relative;
+    }
+    #rectangles div {
+      position: absolute;
+      border: 1px solid black;
+      height: 50px;
+      width: 50px;
+    }
+    #a {
+      left: 25px;
+      top: 0;
+    }
+    #b {
+      left: 78px;
+      top: 30px;
+    }
+    #c {
+      left: 131px;
+      top: 60px;
+    }
+    #d {
+      left: 0;
+      top: 53px;
+    }
+    #e {
+      left: 53px;
+      top: 83px;
+    }
+    #f {
+      left: 106px;
+      top: 113px;
+    }
+    #proximity .small {
       border: 1px solid black;
       width: 100px;
       height: 50px;
       margin: 5px 25px;
     }
-    .big-rectangle {
+    #proximity .big {
       border: 1px solid black;
       width: 150px;
-      height: 400px;                
+      height: 400px;
+    }
+    #rect3 {
+      margin: 60px 25px;
     }
   </style>
 </head>
 <body>
 <h1>Relative Locator Tests</h1>
-<p id="above">This text is above.
-<p id="mid">This is a paragraph of text in the middle.
-<p id="below">This text is below.
-
+<section id="paragraphs">
+  <p id="above">This text is above.</p>
+  <p id="mid">This is a paragraph of text in the middle.</p>
+  <p id="below">This text is below.</p>
+</section>
 
 <table>
   <tr>
-    <td id="first">1</td>
-    <td id="second" style="width: 100px">2</td>
-    <td id="third">3</td>
+    <td id="topLeft">1</td>
+    <td id="top">2</td>
+    <td id="topRight">3</td>
   </tr>
   <tr>
-    <td id="fourth">4</td>
+    <td id="left">4</td>
     <td id="center">5</td>
-    <td id="sixth">6</td>
+    <td id="right">6</td>
   </tr>
   <tr>
-    <td id="seventh">7</td>
-    <td id="eighth">8</td>
-    <td id="ninth">9</td>
+    <td id="bottomLeft">7</td>
+    <td id="bottom">8</td>
+    <td id="bottomRight">9</td>
   </tr>
 </table>
 
-<div class="small-rectangle" id="rect1">
-  Rectangle 1
-</div>
-<div class="big-rectangle" id="rect2">
-  Rectangle 2, which is near Rectangle 1
-</div>
+<section id="rectangles">
+  <div id="a">El-A</div>
+  <div id="b">El-B</div>
+  <div id="c">El-C</div>
+  <div id="d">El-D</div>
+  <div id="e">El-E</div>
+  <div id="f">El-F</div>
+</section>
 
-<div class="small-rectangle" style="margin:60px 25px" id="rect3">
-  Rectangle 3
-</div>
-<div class="big-rectangle" id="rect4">
-  Rectangle 4, which is not near Rectangle 2 because it is more than 50 px away
-</div>
+<section id="proximity">
+  <div class="small" id="rect1">Rectangle 1</div>
+  <div class="big" id="rect2">Rectangle 2, which is near Rectangle 1</div>
+  <div class="small" id="rect3">Rectangle 3</div>
+  <div class="big" id="rect4">
+    Rectangle 4, which is not near Rectangle 2 because it is more than 50 px away
+  </div>
+</section>
 
 </body>
 </html>