Ignore small email inputs

integration-test/pages/email-autofill.html

@@ -13,6 +13,10 @@
 
 <p id="demo"></p>
 
+<div>
+  Small inputs should be ignored: <input id="email" type="email" style="width: 30px;">
+</div>
+
 <div class="dialog">
   <form action="/signup">
     <h2>Sign up for our newsletter</h2>

src/Form/matching.js

@@ -6,6 +6,11 @@ import { matchingConfiguration } from './matching-configuration.js'
 
 const { TEXT_LENGTH_CUTOFF, ATTR_INPUT_TYPE } = constants
 
+/** @type {{[K in keyof MatcherLists]?: { minWidth: number }} } */
+const dimensionBounds = {
+    email: { minWidth: 40 }
+}
+
 /**
  * An abstraction around the concept of classifying input fields.
  *
@@ -178,6 +183,26 @@ class Matching {
         return selectors.join(', ')
     }
 
+    /**
+     * Returns true if the field is visible and large enough
+     * @param {keyof MatcherLists} matchedType
+     * @param {HTMLInputElement} input
+     * @returns {boolean}
+     */
+    isInputLargeEnough (matchedType, input) {
+        const expectedDimensionBounds = dimensionBounds[matchedType]
+        if (!expectedDimensionBounds) return true
+
+        const width = input.offsetWidth
+        const height = input.offsetHeight
+
+        // Ignore hidden elements as we can't determine their dimensions
+        const isHidden = height === 0 && width === 0
+        if (isHidden) return true
+
+        return width >= expectedDimensionBounds.minWidth
+    }
+
     /**
      * Tries to infer the input type for an input
      *
@@ -208,7 +233,7 @@ class Matching {
                 return 'credentials.password'
             }
 
-            if (this.subtypeFromMatchers('email', input)) {
+            if (this.subtypeFromMatchers('email', input) && this.isInputLargeEnough('email', input)) {
                 if (opts.isLogin || opts.isHybrid) {
                     // Show identities when supported and there are no credentials
                     if (opts.supportsIdentitiesAutofill && !opts.hasCredentials) {