From 15b1d2fddd9c9d602b7ddbe9816222727bcc742f Mon Sep 17 00:00:00 2001
From: Emanuele Feliziani <feliziani.emanuele@gmail.com>
Date: Tue, 27 Jul 2021 16:14:49 +0200
Subject: [PATCH] Add another autofill test case (#45)

Signed-off-by: Emanuele Feliziani <feliziani.emanuele@gmail.com>
---
 autofill/form-submission.html | 23 +++++++++++++++++++++++
 autofill/style.css            | 18 ++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/autofill/form-submission.html b/autofill/form-submission.html
index a0c24f3..ebe4377 100644
--- a/autofill/form-submission.html
+++ b/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>
diff --git a/autofill/style.css b/autofill/style.css
index 7477f2f..bdb18b4 100644
--- a/autofill/style.css
+++ b/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;
+}