From e55a92cc0d20cb74e20aecaa7240ba6c13c25141 Mon Sep 17 00:00:00 2001 From: Emanuele Feliziani Date: Mon, 25 Jul 2022 11:09:43 +0200 Subject: [PATCH] Add a bunch of test cases for autofill autoprompt Signed-off-by: Emanuele Feliziani --- autofill/autoprompt/case-1.html | 54 ++++++++++++++++++++++++++ autofill/autoprompt/case-2.html | 59 +++++++++++++++++++++++++++++ autofill/autoprompt/case-3.html | 67 +++++++++++++++++++++++++++++++++ autofill/autoprompt/case-4.html | 65 ++++++++++++++++++++++++++++++++ autofill/autoprompt/case-5.html | 62 ++++++++++++++++++++++++++++++ autofill/style.css | 54 ++++++++++++++++++++++---- index.html | 10 +++++ 7 files changed, 364 insertions(+), 7 deletions(-) create mode 100644 autofill/autoprompt/case-1.html create mode 100644 autofill/autoprompt/case-2.html create mode 100644 autofill/autoprompt/case-3.html create mode 100644 autofill/autoprompt/case-4.html create mode 100644 autofill/autoprompt/case-5.html diff --git a/autofill/autoprompt/case-1.html b/autofill/autoprompt/case-1.html new file mode 100644 index 0000000..8a9fc3e --- /dev/null +++ b/autofill/autoprompt/case-1.html @@ -0,0 +1,54 @@ + + + + + + + Autofill autoprompt for signin forms + + + + +

[Home]

+ + +

+ +
+

Sign in form present on pageload (should prompt automatically).

+ +
+
+

Sign in form

+
+ + + + + +
+
+
+ +
+ + + + diff --git a/autofill/autoprompt/case-2.html b/autofill/autoprompt/case-2.html new file mode 100644 index 0000000..98e24d0 --- /dev/null +++ b/autofill/autoprompt/case-2.html @@ -0,0 +1,59 @@ + + + + + + + Autofill autoprompt for signin forms + + + + +

[Home]

+ + +

+ +
+

Form created in modal after click (should not prompt automatically).

+ +
+

+
+ +
+ + + + diff --git a/autofill/autoprompt/case-3.html b/autofill/autoprompt/case-3.html new file mode 100644 index 0000000..8c0c1c1 --- /dev/null +++ b/autofill/autoprompt/case-3.html @@ -0,0 +1,67 @@ + + + + + + + Autofill autoprompt for signin forms + + + + +

[Home]

+ + +

+ +
+

Login form with a multistep flow. It should prompt automatically on first load, then the second field triggers the prompt on tap/click.

+
+

Log in

+
+ + + +
+ +
+
+ + + + + + diff --git a/autofill/autoprompt/case-4.html b/autofill/autoprompt/case-4.html new file mode 100644 index 0000000..6765f0b --- /dev/null +++ b/autofill/autoprompt/case-4.html @@ -0,0 +1,65 @@ + + + + + + + Autofill autoprompt for signin forms + + + + +

[Home]

+ + +

The cookie dialog will prevent autoprompt. You should not see an autoprompt on this page. Once dismissing the cookie dialog, you can use the form as usual.

+ +
+
+

Log in

+
+ + + + + +
+
+
+ + + + + + + diff --git a/autofill/autoprompt/case-5.html b/autofill/autoprompt/case-5.html new file mode 100644 index 0000000..816aa09 --- /dev/null +++ b/autofill/autoprompt/case-5.html @@ -0,0 +1,62 @@ + + + + + + + Autofill autoprompt for signin forms + + + + +

[Home]

+ + +

+

Sign in form present below the fold on mobile, but in a sidebar on larger screens (should prompt automatically only when visible, i.e. on desktop).

+ +
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+
+ +
+
+

Sign in form

+
+ + + + + +
+
+
+ + +
+ + + + diff --git a/autofill/style.css b/autofill/style.css index bdb18b4..19d7f92 100644 --- a/autofill/style.css +++ b/autofill/style.css @@ -1,33 +1,64 @@ +* { + box-sizing: border-box; +} + body { font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; padding: 1em; + line-height: 1.45; +} + +.nav { + display: flex; + flex-direction: row; + overflow-x: auto; + padding: 0; +} + +.nav > li { + margin: 1rem 1.3rem; + white-space: nowrap; } .dialog { - position: fixed; - left: 50%; - top: 100px; - width: 350px; + width: 400px; + max-width: 100%; height: auto; padding: 30px; background-color: #fefefe; border-radius: 4px; border: 0.5px solid #999; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); - transform: translateX(-50%); text-align: center; } +.dialog--cookie-dialog { + position: fixed; + top: 1em; + left: 1em; +} + +@media screen and (min-width: 610px) { + .container { + display: grid; + grid-template-columns: 1fr minmax(200px, 1fr); + grid-gap: 40px; + width: 700px; + max-width: 100%; + margin: 0 auto; + } +} + hr { margin: 2em auto; } fieldset { display: grid; - grid-template-columns: max-content 1fr; + grid-template-columns: max-content minmax(80px, 1fr); grid-gap: 1em; - max-width: 410px; + max-width: 100%; padding: 0; border: none; } @@ -37,6 +68,11 @@ label { text-align: right; } +input { + width: auto; + max-width: 100%; +} + input, button, .button { @@ -60,6 +96,10 @@ button, box-shadow: none; } +*[hidden] { + display: none; +} + .button-with-child { position: relative; width: 250px; diff --git a/index.html b/index.html index f9da81a..028a440 100644 --- a/index.html +++ b/index.html @@ -74,6 +74,16 @@

Autofill

  • Email autofill when form is within an iframe
  • Email autofill form within self-closing modal
  • Form submission detection and autofill
    • +
  • + Autoprompt + +

    • Other