Add another autofill test case (#45)

Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com>

autofill/form-submission.html

@@ -81,6 +81,29 @@ <h3>Sign in form with non-standard button and fetch call</h3>
           fakeBtnForm.innerHTML = '<h1>Done!</h1>';
       }, true);
     </script>
+
+    <hr>
+
+    <form id="covered-btn-form" novalidate action="/autofill/form-submission.html">
+      <h3>Sign in form where button has covering child element</h3>
+      <fieldset>
+        <label for="email">Email</label>
+        <input id="email" type="email">
+        <label for="password">Password</label>
+        <input id="password" type="password">
+        <div class="button button-with-child" role="button"><i>Sign in</i></div>
+      </fieldset>
+    </form>
+    <script>
+      const coveredBtnForm = document.getElementById('covered-btn-form i');
+      const coveredBtnFormButton = coveredBtnForm.querySelector('.button');
+      coveredBtnFormButton?.addEventListener('click', (e) => {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          fetch('/login-action').catch((e) => {});
+          coveredBtnForm.innerHTML = '<h1>Done!</h1>';
+      }, true);
+    </script>
   </div>
 
 </body>

autofill/style.css

@@ -59,3 +59,21 @@ button,
   appearance: none;
   box-shadow: none;
 }
+
+.button-with-child {
+  position: relative;
+  width: 250px;
+  height: 40px;
+}
+
+.button-with-child i {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}