Autofill: Better recognize credit card type fields.

BUG=464002, 466685, 469012

Review URL: https://codereview.chromium.org/1030073003

Cr-Commit-Position: refs/heads/master@{#322325}

chrome/test/data/autofill/heuristics/input/bug_464002.html

+<form id="paymentMethodForm" name="paymentMethodForm" method="post" class="styled_forms  modalForms">
+  <p class="size18 float-left">Debit / Credit Card Information</p>
+  <p class="float-right PadTop3 botMar0">
+  <span class="redtxt font12" aria-hidden="true">*=Required</span>
+  </p>
+  <div class="ClearNew botMar0"></div>
+  <div class="errorMsg box botMar20" id="errorPageDiv" style="display: none;">
+    <p class="botMar0" id="errorUL"></p>
+  </div>
+  <input type="hidden" name="selectedMethodName" id="selectedMethodName" value="Add Credit/Debit Card">
+
+  <div class="row-seamless botMar0 styled_forms  modalForms">
+
+    <div class="tipPad  safariComp botMar15" style="overflow:hidden">
+      <div class=" right MarRight5 float-left w150">
+        <label class="rel top0">Method<span style="visibility:hidden" class="colorRed" aria-hidden="true">*</span></label>
+      </div>
+
+      <div class=" MarTop4  ie7MarTop0  helpDiv "><a href="#tipcr10" aria-describedby="tipcr10" class="lnk-help tooltips" title="" onclick="return false"><img src="/olam/images/brand30/global/icn-help.png" alt="Help "></a>
+        <span class="tips" id="tipcr10">We accept the following forms of payment:<br><br>
+          <strong>ATM debit cards</strong><br>
+          STAR, Pulse, ACCEL, NYCE
+          <br><br>
+          <strong>Debit / credit cards</strong><br>
+          Visa, MasterCard, American Express, Discover Network, JCB, Diners Club, AT&amp;T Universal
+          <br><img src="/OLAM_PROD_CMS/English/images/brand30/olam_creditCards_PinlessCards.gif" height="110px;" alt="Pinless Cards" border="0"></span></div>
+
+      <div class="float-left">
+        <span class="statictxt top4px">
+          Debit / credit card
+        </span>
+      </div>
+      <div class="ClearNew"></div>
+    </div>
+
+    <div class="tipPad safariComp botMar20">
+      <div class=" right MarRight5 float-left w150">
+        <label class="rel top0 " for="paymentMethodForm.newCreditCardCustomerName">Name on card<span class="colorRed" aria-hidden="true">*</span></label>
+      </div>
+      <div class="MarTop3  ie7MarTop0  helpDiv">&nbsp;</div>
+      <div id="divNameOnCard" class="MarBot0 PadRight2 float-left"><!-- for error case  MarBot0 PadRight2 error float-left -->
+        <div class="emailInput">
+          <span class="textInput-wrapper"><span class=""><input type="text" name="paymentMethodForm.newCreditCardCustomerName" maxlength="25" size="35" value="" onblur="validateNameOnCard(this.value, true)" class="popupinput text inline-error" id="paymentMethodForm.newCreditCardCustomerName" aria-required="true" aria-invalid="false"></span></span>
+        </div>
+        <div style="display: none;" id="" tabindex="0" class="focusable EmailAlertsDiv"><span style="display:block;height:0;width:0;color:transparent;z-index:-1;position:absolute" role="presentation">alert</span>
+          <div class="email-error-top-image"></div>
+          <div style="display:block;" class="email-error-mid-image" id="EmailAlert1">
+            <p class="rederr-Msg font11imp lineHeight15  PadTop3imp" id="pNameOnCardErrorMessage"></p>
+          </div>
+          <!--
+            <div class="email-error-mid-image" style="display:none;" id="EmailAlertMidPassDiv1">&nbsp;</div>
+            <div class="email-error-mid-image" style="display:none;" id="EmailAlertMidPassDiv2">&nbsp;</div>
+            <div style="display:none;" class="email-error-mid-image" id="EmailAlert2">
+            <p class="rederr-Msg">Caps Lock on</p>
+            </div> -->
+            <div class="email-error-bot-image"></div>
+        </div>
+      </div>
+      <div class="ClearNew"></div>
+    </div>
+
+    <div class="tipPad safariComp botMar20">
+      <div class=" right MarRight5 float-left w150">
+        <label class="rel top0 " for="paymentMethodForm.cardNumber">Card number<span class="colorRed" aria-hidden="true">*</span></label>
+      </div>
+      <div class=" MarTop3  ie7MarTop0  helpDiv ">&nbsp;</div>
+      <div id="divCardNumber" class="MarBot0 PadRight2 float-left error"><!-- for error case  MarBot0 PadRight2 error float-left -->
+        <div class="emailInput">
+          <span class="textInput-wrapper"><span class=""><input type="text" name="paymentMethodForm.cardNumber" maxlength="19" size="35" value="" onkeypress="return validatePmtNumericKeyPress(event)" onblur="validateCardNumber(this.value, true)" class="popupinput inline-error text" id="paymentMethodForm.cardNumber" aria-required="true" aria-invalid="true"></span></span>
+        </div>
+        <div style="" id="" tabindex="0" class="focusable EmailAlertsDiv"><span style="display:block;height:0;width:0;color:transparent;z-index:-1;position:absolute" role="presentation">alert</span>
+          <div class="email-error-top-image"></div>
+          <div style="display:block;" class="email-error-mid-image" id="EmailAlert1">
+            <p class="rederr-Msg font11imp lineHeight15  PadTop3imp" id="pCardNumberErrorMessage">Enter card number</p>
+          </div>
+          <!--
+            <div class="email-error-mid-image" style="display:none;" id="EmailAlertMidPassDiv1">&nbsp;</div>
+            <div class="email-error-mid-image" style="display:none;" id="EmailAlertMidPassDiv2">&nbsp;</div>
+            <div style="display:none;" class="email-error-mid-image" id="EmailAlert2">
+            <p class="rederr-Msg">Caps Lock on</p>
+            </div> -->
+            <div class="email-error-bot-image"></div>
+        </div>
+      </div>
+      <div class="ClearNew"></div>
+    </div>
+
+    <div class="botMar30">
+      <div class="float-left">
+        <div class="tipPad  safariComp botMar20">
+          <div class=" right MarRight5 float-left w150">
+            <label class="rel top0" for="paymentMethodForm.cardVerificationNumber">Security code<span class="colorRed" aria-hidden="true">*</span></label>
+          </div>
+          <div class=" MarTop3 ie7MarTop0 helpDiv ">&nbsp; </div>
+          <div id="divCVV" class="MarBot0 PadRight2 float-left error"><!-- for error case  MarBot0 PadRight2 error float-left -->
+            <div class="emailInput">
+              <span class="textInput-wrapper"><span class=""><input type="text" name="paymentMethodForm.cardVerificationNumber" maxlength="4" size="35" value="" onkeypress="return validatePmtNumericKeyPress(event)" onblur="validateCardVerificationValue(this.value, true)" class="popupinput inline-error text" id="paymentMethodForm.cardVerificationNumber" aria-required="true" aria-invalid="true"></span></span>
+            </div>
+            <div id="" style="" tabindex="0" class="focusable EmailAlertsDiv"><span style="display:block;height:0;width:0;color:transparent;z-index:-1;position:absolute" role="presentation">alert</span>
+              <div class="email-error-top-image"></div>
+              <div id="EmailAlert1" class="email-error-mid-image" style="display:block;">
+                <p class="rederr-Msg font11imp lineHeight15  PadTop3imp" id="pCVVErrorMessage">Enter security code</p>
+              </div>
+              <!--
+                <div id="EmailAlertMidPassDiv1" style="display:none;" class="email-error-mid-image">&nbsp;</div>
+                <div id="EmailAlertMidPassDiv2" style="display:none;" class="email-error-mid-image">&nbsp;</div>
+                <div id="EmailAlert2" class="email-error-mid-image" style="display:none;">
+                <p class="rederr-Msg">Caps Lock on</p>
+                </div> -->
+                <div class="email-error-bot-image"></div>
+            </div>
+          </div>
+          <div class="ClearNew"></div>
+        </div>
+        <div class="tipPad safariComp botMar20">
+          <div class=" right MarRight5 float-left w150">
+            <label class="rel top0 ">Card expiration date<span class="colorRed" aria-hidden="true">*</span></label>
+          </div>
+          <div class=" MarTop3  ie7MarTop0  helpDiv ">&nbsp;</div>
+          <div class="Login_styled_forms fixSelect float-left">
+
+
+            <div id="divExpirationMonth" class="MarBot0 float-left w138"><!-- class=" MarBot0 PadRight2 error float-left w138" -->
+              <div id="divExpirationMonthSelect" class=""><!--for error case class="error-selector" -->
+                <div class="selector" id="uniform-paymentMethodForm.expirationMonth"><span style="width: 75px;">04</span><select name="paymentMethodForm.expirationMonth" onblur="validateExpirationMonth(this.value, true)" class="inline-error jojoFix" id="paymentMethodForm.expirationMonth" title="Select month" aria-required="true" style="opacity: 0; width: 120px; height: 32px; top: 0px; left: -2px;"><!-- onchange="validateExpirationMonth(this.value, true) to make the consitent -->
+                    <option value="" selected="selected">Select month</option>
+                    <option value="01">01</option>
+                    <option value="02">02</option>
+                    <option value="03">03</option>
+                    <option value="04">04</option>
+                    <option value="05">05</option>
+                    <option value="06">06</option>
+                    <option value="07">07</option>
+                    <option value="08">08</option>
+                    <option value="09">09</option>
+                    <option value="10">10</option>
+                    <option value="11">11</option>
+                    <option value="12">12</option></select></div>
+              </div>
+              <div id="divExpirationMonthErrorMessage" style="display:none;" tabindex="0" class="focusable"><span style="display:block;height:0;width:0;color:transparent;z-index:-1;position:absolute" role="presentation">alert</span>
+                <p class="rederr-text bold PadLeft7 MarTop5 botMar0 font11imp w100 PadTop3imp" id="pExpirationMonthErrorMessage"></p>
+              </div>
+              <div class="ClearNew"></div>
+            </div>
+
+            <div id="divExpirationYear" class=" MarBot0 float-left w138">
+              <div id="divExpirationYearSelect" class="">
+                <div class="selector" id="uniform-paymentMethodForm.expirationYear"><span style="width: 65px;">2018</span><select name="paymentMethodForm.expirationYear" onblur="validateExpirationYear(this.value, true)" class="inline-error jojoFix" id="paymentMethodForm.expirationYear" title="Select year" aria-required="true" style="opacity: 0; width: 110px; height: 32px; top: 0px; left: -2px;"><!-- onchange="validateExpirationYear(this.value, true) to make the consitent -->
+                    <option value="" selected="selected">Select year</option>
+                    <option value="2015">2015</option>
+                    <option value="2016">2016</option>
+                    <option value="2017">2017</option>
+                    <option value="2018">2018</option>
+                    <option value="2019">2019</option>
+                    <option value="2020">2020</option>
+                    <option value="2021">2021</option>
+                    <option value="2022">2022</option>
+                    <option value="2023">2023</option>
+                    <option value="2024">2024</option>
+                    <option value="2025">2025</option>
+                    <option value="2026">2026</option>
+                    <option value="2027">2027</option>
+                    <option value="2028">2028</option>
+                    <option value="2029">2029</option></select></div>
+              </div>
+
+              <div id="divExpirationYearErrorMessage" style="display:none;" tabindex="0" class="focusable"><span style="display:block;height:0;width:0;color:transparent;z-index:-1;position:absolute" role="presentation">alert</span>
+                <p class="rederr-text bold PadLeft7 MarTop5 botMar0 w100 font11imp PadTop3imp" id="pExpirationYearErrorMessage"></p>
+              </div>
+              <div class="ClearNew"></div>
+            </div>
+            <div class="ClearNew"></div>
+          </div>
+          <div class="ClearNew"></div>
+        </div>
+        <div class="tipPad safariComp">
+          <div class=" right MarRight5 float-left w150">
+            <label class="rel top0" for="paymentMethodForm.zip">Card billing ZIP Code<span class="colorRed" aria-hidden="true">*</span></label>
+          </div>
+
+          <div class=" MarTop3  ie7MarTop0  helpDiv "><!-- &nbsp; --><a href="#tip52" id="atip52" aria-describedby="tip52" class="lnk-help tooltips" title=""><img src="/olam/images/brand30/global/icn-help.png" alt="Help"></a>
+            <span class="tips" id="tip52">Enter the ZIP Code of the credit cardholder's billing address.</span></div>
+
+
+          <div id="divCardZipCode" class=" MarBot0 PadRight2 float-left"> <!--for error case  class=" MarBot0 PadRight2 error float-left"  -->
+            <div class="emailInput">
+              <span class="textInput-wrapper"><span><input type="text" name="paymentMethodForm.zip" maxlength="9" size="35" value="" onblur="validateCardZipCode(this.value, true)" class="popupinput inline-error text" id="paymentMethodForm.zip" aria-required="true"></span></span>
+            </div>
+            <div style="display:none;" id="" tabindex="0" class="focusable EmailAlertsDiv"><span style="display:block;height:0;width:0;color:transparent;z-index:-1;position:absolute" role="presentation">alert</span>
+              <div class="email-error-top-image"></div>
+              <div style="display:block;" class="email-error-mid-image" id="EmailAlert1">
+                <p class="rederr-Msg font11imp lineHeight15  PadTop3imp" id="pCardZipCodeErrorMessage"></p>
+              </div>
+              <!--
+                <div class="email-error-mid-image" style="display:none;" id="EmailAlertMidPassDiv1">&nbsp;</div>
+                <div class="email-error-mid-image" style="display:none;" id="EmailAlertMidPassDiv2">&nbsp;</div>
+                <div style="display:none;" class="email-error-mid-image" id="EmailAlert2">
+                <p class="rederr-Msg">Caps Lock on</p>
+                </div> -->
+                <div class="email-error-bot-image"></div>
+            </div>
+          </div>
+          <div class="ClearNew"></div>
+        </div>
+      </div>
+      <div id="divCardImage" class="float-left focusable MarTopNeg15" tabindex="0"><!-- for error case class="float-left MarTopNeg15" -->
+        <img class=" " border="0" src="/olam/English/brand30/img_card.png" alt="Code is 3 digits on the back, to the right. It's the 4 digits above account number for American Express.">
+      </div>
+      <div class="ClearNew"></div>
+    </div>
+  </div>
+  <div style="display: none;" id="paymentMethodFormCustCode">
+    <div class="row-seamless ">
+      <div class="botMarOCDPA0 TopDotBorder PadTop18">
+        <h3 class="font17">For Business, Corporate, or Purchasing Cardholders Only</h3>
+      </div>
+    </div>
+
+    <div class="row-seamless botMar15 styled_forms  modalForms">
+      <div class="botMar0 Padbot15"></div>
+      <div class="tipPad safariComp ">
+        <div class=" right MarRight5 float-left w253">
+          <label class="rel top0" for="paymentMethodForm.custCode">Customer code</label>
+        </div>
+
+        <div class=" MarTop3  ie7MarTop0  helpDiv ">&nbsp;<a href="#tip53" id="atip53" class="lnk-help tooltips" aria-describedby="tip53"><img src="/olam/images/brand30/global/icn-help.png" alt="Help"></a>
+          <span class="tips" id="tip53">Up to 17 characters of optional information that eligible business, purchasing, and corporate cardholders use to identify transactions on their Visa, MasterCard, or American Express statements.</span></div>
+
+        <span class="textInput-wrapper"><span><input type="text" name="paymentMethodForm.custCode" maxlength="17" size="35" value="" onkeydown="return validateAlphaNumericKeyDown(event)" class="popupinput text" id="paymentMethodForm.custCode"></span></span>
+      </div>
+    </div>
+  </div>
+  <input type="hidden" name="paymentMethodForm.storePaymentProfileInd" value="N">
+
+  <div class="btnInsideRowSeam botMar5" style="overflow:hidden">
+    <div class="btnLt">
+      <a href="#" title="Cancel" class="textLink" onclick="cancelMethod(&quot;Are you sure you want to cancel?&quot;);parent.enableNextBtn();">Cancel</a>
+    </div>
+    <div class="btnRt PadRight1 PadBot3">
+      <a role="button" title="" class="button primary small" href="javascript:perfValidationBeforeSubmit('/pmt/addNewPayment.myworld','paymentMethodForm','payCommonActionForm')">Continue</a>
+    </div>
+    <div class="ClearNew"></div>
+  </div>
+</form>

chrome/test/data/autofill/heuristics/input/bug_469012.html

+<form action="/ticket/addcard.do" method="post" id="payment_new">
+  <div class="dmethod">
+    <input type="hidden" name="newcard" value="1">
+    <input type="hidden" name="dest" value="/tmloggedin.do">
+
+    <div class="center"><img src="/styles/tmus/amex_parity_mini.gif" alt="creditcards">
+
+
+      <img src="/styles/tmus/visa_parity_mini.gif" alt="creditcards">
+      <img src="/styles/tmus/mc_parity_mini.gif" alt="creditcards">
+      <img src="/styles/tmus/diners_parity_mini.gif" alt="creditcards">
+      <img src="/styles/tmus/discover_network_parity_mini.gif" alt="creditcards">
+    </div>
+
+    <label>Card Issuer</label>
+    <select name="cardissuer">
+      <option value="">Select Card Type</option>
+      <option value="AMEX">American Express</option>
+      <option value="VISA">VISA</option>
+      <option value="MC">MasterCard</option>
+      <option value="DISCOVER">Discover Network</option>
+      <option value="DINERS">Diners Club</option>
+    </select><br>
+    <label>Your cardnumber</label>
+    <input name="cardnumber" type="text" pattern="[0-9]*" placeholder="Your 16 digit number">
+    <fieldset class="expiration">
+      <label><strong id="new_credit_card_expire_heading">Expiration Date</strong>
+      </label>
+      <select id="expire_month" name="expire_month">
+        <option value="">Month</option>
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+        <option value="5">5</option>
+        <option value="6">6</option>
+        <option value="7">7</option>
+        <option value="8">8</option>
+        <option value="9">9</option>
+        <option value="10">10</option>
+        <option value="11">11</option>
+        <option value="12">12</option>
+      </select>
+
+      <select id="expire_year" name="expire_year">
+        <option value="">Year</option>
+        <option value="2015">2015</option>
+        <option value="2016">2016</option>
+        <option value="2017">2017</option>
+        <option value="2018">2018</option>
+        <option value="2019">2019</option>
+        <option value="2020">2020</option>
+        <option value="2021">2021</option>
+        <option value="2022">2022</option>
+        <option value="2023">2023</option>
+        <option value="2024">2024</option>
+        <option value="2025">2025</option>
+        <option value="2026">2026</option>
+        <option value="2027">2027</option>
+        <option value="2028">2028</option>
+        <option value="2029">2029</option>
+      </select>
+
+    </fieldset>
+  </div>
+
+  <div class="dmethod">
+    <span class="info" title="= Fields marked with an * are required">* = Required Text</span>
+
+    <div class="smalltext">Enter the credit card billing address and name exactly as it appears on your credit card statement.
+    </div>
+
+    <div class="billInfo">
+      <fieldset>
+
+        <div class="formline">
+          <label for="first_name" id="address_form_label_first_name">First Name <span class="requiredText">*</span> </label>
+          <input type="text" name="firstname" id="first_name" size="35" maxlength="80">
+
+        </div>
+        <div class="formline">
+          <label for="last_name" id="address_form_label_last_name">Last Name <span class="requiredText">*</span> </label>
+          <input type="text" name="lastname" id="last_name" size="35" maxlength="80">
+        </div>
+        <div class="formline">
+          <label for="address1">Address
+            <span class="requiredText">*</span> </label>
+          <input type="text" size="35" maxlength="30" name="address1" id="address1"></div>
+        <div class="formline"> <span id="unit_title_span"><label for="unit">Unit #</label></span>
+
+          <span id="unit_input_span"><input type="text" size="10" name="unit" id="unit"></span> <span id="unit_optional_span" class="txt11">(Optional)</span>
+        </div>
+        <div class="formline">
+          <label for="address2"><span id="address2_title_span">Address Line 2</span></label>
+          <input type="text" size="35" name="address2" id="address2">
+        </div>
+        <div class="formline">
+          <label for="city"><span id="city_title_span">City                    </span>&nbsp;<span class="requiredText">*</span> </label>
+          <input type="text" name="city" id="city" size="35">
+          <span class="info">Military Address? Enter APO or FPO.</span>
+        </div>
+
+        <div class="formline">
+          <label for="state_id"><span id="state_title_span">State                    </span> <span class="requiredText">*</span> </label>
+          <span id="state_input_span">
+            <select name="state" id="state_id">
+              <option value="">-- Select State
+              --
+              </option>
+              <option value="AL">Alabama</option>
+              <option value="AK">Alaska</option>
+              <option value="AS">American Samoa</option>
+              <option value="AZ">Arizona</option>
+              <option value="AR">Arkansas</option>
+              <option value="AA">Armed Forces Americas</option>
+              <option value="AE">Armed Forces Other</option>
+              <option value="AP">Armed Forces Pacific</option>
+              <option value="CA">California</option>
+              <option value="CO">Colorado</option>
+              <option value="CT">Connecticut</option>
+              <option value="DE">Delaware</option>
+              <option value="DC">District Of Columbia</option>
+              <option value="FM">Federated States Of Micronesia</option>
+              <option value="FL">Florida</option>
+              <option value="GA">Georgia</option>
+              <option value="GU">Guam</option>
+              <option value="HI">Hawaii</option>
+              <option value="ID">Idaho</option>
+              <option value="IL">Illinois</option>
+              <option value="IN">Indiana</option>
+              <option value="IA">Iowa</option>
+              <option value="KS">Kansas</option>
+              <option value="KY">Kentucky</option>
+              <option value="LA">Louisiana</option>
+              <option value="ME">Maine</option>
+              <option value="MH">Marshall Islands</option>
+              <option value="MD">Maryland</option>
+              <option value="MA">Massachusetts</option>
+              <option value="MI">Michigan</option>
+              <option value="MN">Minnesota</option>
+              <option value="MS">Mississippi</option>
+              <option value="MO">Missouri</option>
+              <option value="MT">Montana</option>
+              <option value="NE">Nebraska</option>
+              <option value="NV">Nevada</option>
+              <option value="NH">New Hampshire</option>
+              <option value="NJ">New Jersey</option>
+              <option value="NM">New Mexico</option>
+              <option value="NY">New York</option>
+              <option value="NC">North Carolina</option>
+              <option value="ND">North Dakota</option>
+              <option value="MP">Northern Mariana Islands</option>
+              <option value="OH">Ohio</option>
+              <option value="OK">Oklahoma</option>
+              <option value="OR">Oregon</option>
+              <option value="PW">Palau</option>
+              <option value="PA">Pennsylvania</option>
+              <option value="PR">Puerto Rico</option>
+              <option value="RI">Rhode Island</option>
+              <option value="SC">South Carolina</option>
+              <option value="SD">South Dakota</option>
+              <option value="TN">Tennessee</option>
+              <option value="TX">Texas</option>
+              <option value="UT">Utah</option>
+              <option value="VT">Vermont</option>
+              <option value="VI">Virgin Islands</option>
+              <option value="VA">Virginia</option>
+              <option value="WA">Washington</option>
+              <option value="WV">West Virginia</option>
+              <option value="WI">Wisconsin</option>
+              <option value="WY">Wyoming</option>
+        </div>
+        <div class="formline">
+          <label for="postal_code"><span id="zip_title_span">ZIP Code</span><span class="requiredText">*</span>
+          </label>
+
+          <input type="text" name="zip" id="postal_code" size="35" autocapitalize="off" autocomplete="off">
+        </div>
+        <div class="formline">
+          <label for="country">Country
+            <span class="requiredText">*</span>
+          </label>
+          <select name="country" id="countrylist">
+            <option value="ad">Andorra</option>
+            <option value="ae">United Arab Emirates</option>
+            <option value="af">Afghanistan</option>
+            <option value="ag">Antigua and Barbuda</option>
+            <option value="ai">Anguilla</option>
+            <option value="al">Albania</option>
+            <option value="am">Armenia</option>
+            <option value="an">Netherlands Antilles</option>
+            <option value="ao">Angola</option>
+            <option value="ap">Asia/Pacific Region</option>
+            <option value="aq">Antarctica</option>
+            <option value="ar">Argentina</option>
+            <option value="as">American Samoa</option>
+            <option value="at">Austria</option>
+            <option value="au">Australia</option>
+
+            <option value="aw">Aruba</option>
+            <option value="ax">Aland Islands</option>
+            <option value="az">Azerbaijan</option>
+            <option value="ba">Bosnia and Herzegovina</option>
+            <option value="bb">Barbados</option>
+            <option value="bd">Bangladesh</option>
+            <option value="be">Belgium</option>
+            <option value="bf">Burkina Faso</option>
+            <option value="bg">Bulgaria</option>
+            <option value="bh">Bahrain</option>
+            <option value="bi">Burundi</option>
+            <option value="bj">Benin</option>
+            <option value="bm">Bermuda</option>
+            <option value="bn">Brunei Darussalam</option>
+            <option value="bo">Bolivia</option>
+            <option value="br">Brazil</option>
+            <option value="bs">Bahamas</option>
+            <option value="bt">Bhutan</option>
+            <option value="bv">Bouvet Island</option>
+            <option value="bw">Botswana</option>
+            <option value="by">Belarus</option>
+            <option value="bz">Belize</option>
+            <option value="ca">Canada</option>
+            <option value="cc">Cocos (Keeling) Islands</option>
+            <option value="cd">Congo The Democratic Republic of the</option>
+            <option value="cf">Central African Republic</option>
+            <option value="cg">Congo</option>
+            <option value="ch">Switzerland</option>
+            <option value="ci">Cote d'Ivoire</option>
+            <option value="ck">Cook Islands</option>
+            <option value="cl">Chile</option>
+            <option value="cm">Cameroon</option>
+            <option value="cn">China</option>
+            <option value="co">Colombia</option>
+            <option value="cr">Costa Rica</option>
+            <option value="cu">Cuba</option>
+            <option value="cv">Cape Verde</option>
+            <option value="cx">Christmas Island</option>
+            <option value="cy">Cyprus</option>
+            <option value="cz">Czech Republic</option>
+            <option value="de">Germany</option>
+            <option value="dj">Djibouti</option>
+            <option value="dk">Denmark</option>
+            <option value="dm">Dominica</option>
+            <option value="do">Dominican Republic</option>
+            <option value="dz">Algeria</option>
+            <option value="ec">Ecuador</option>
+            <option value="ee">Estonia</option>
+            <option value="eg">Egypt</option>
+            <option value="eh">Western Sahara</option>
+            <option value="er">Eritrea</option>
+            <option value="es">Spain</option>
+            <option value="et">Ethiopia</option>
+            <option value="eu">Europe</option>
+            <option value="fi">Finland</option>
+            <option value="fj">Fiji</option>
+            <option value="fk">Falkland Islands (Malvinas)</option>
+            <option value="fm">Micronesia Federated States of</option>
+            <option value="fo">Faroe Islands</option>
+            <option value="fr">France</option>
+            <option value="ga">Gabon</option>
+            <option value="gb">United Kingdom</option>
+            <option value="gd">Grenada</option>
+            <option value="ge">Georgia</option>
+            <option value="gf">French Guiana</option>
+            <option value="gg">Guernsey</option>
+            <option value="gh">Ghana</option>
+            <option value="gi">Gibraltar</option>
+            <option value="gl">Greenland</option>
+            <option value="gm">Gambia</option>
+            <option value="gn">Guinea</option>
+            <option value="gp">Guadeloupe</option>
+            <option value="gq">Equatorial Guinea</option>
+            <option value="gr">Greece</option>
+            <option value="gs">South Georgia and the South Sandwich Islands</option>
+            <option value="gt">Guatemala</option>
+            <option value="gu">Guam</option>
+            <option value="gw">Guinea-Bissau</option>
+            <option value="gy">Guyana</option>
+            <option value="hk">Hong Kong</option>
+            <option value="hm">Heard Island and McDonald Islands</option>
+            <option value="hn">Honduras</option>
+            <option value="hr">Croatia</option>
+            <option value="ht">Haiti</option>
+            <option value="hu">Hungary</option>
+            <option value="id">Indonesia</option>
+            <option value="ie">Ireland</option>
+            <option value="il">Israel</option>
+            <option value="im">Isle of Man</option>
+            <option value="in">India</option>
+            <option value="io">British Indian Ocean Territory</option>
+            <option value="iq">Iraq</option>
+            <option value="ir">Iran Islamic Republic of</option>
+            <option value="is">Iceland</option>
+            <option value="it">Italy</option>
+            <option value="je">Jersey</option>
+            <option value="jm">Jamaica</option>
+            <option value="jo">Jordan</option>
+            <option value="jp">Japan</option>
+            <option value="ke">Kenya</option>
+            <option value="kg">Kyrgyzstan</option>
+            <option value="kh">Cambodia</option>
+            <option value="ki">Kiribati</option>
+            <option value="km">Comoros</option>
+            <option value="kn">Saint Kitts and Nevis</option>
+            <option value="kp">Korea Democratic People's Republic of</option>
+            <option value="kr">Korea Republic of</option>
+            <option value="kw">Kuwait</option>
+            <option value="ky">Cayman Islands</option>
+            <option value="kz">Kazakhstan</option>
+            <option value="la">Lao People's Democratic Republic</option>
+            <option value="lb">Lebanon</option>
+            <option value="lc">Saint Lucia</option>
+            <option value="li">Liechtenstein</option>
+            <option value="lk">Sri Lanka</option>
+            <option value="lr">Liberia</option>
+            <option value="ls">Lesotho</option>
+            <option value="lt">Lithuania</option>
+            <option value="lu">Luxembourg</option>
+            <option value="lv">Latvia</option>
+            <option value="ly">Libyan Arab Jamahiriya</option>
+            <option value="ma">Morocco</option>
+            <option value="mc">Monaco</option>
+            <option value="md">Moldova Republic of</option>
+            <option value="me">Montenegro</option>
+            <option value="mg">Madagascar</option>
+            <option value="mh">Marshall Islands</option>
+            <option value="mk">Macedonia</option>
+            <option value="ml">Mali</option>
+            <option value="mm">Myanmar</option>
+            <option value="mn">Mongolia</option>
+            <option value="mo">Macao</option>
+            <option value="mp">Northern Mariana Islands</option>
+            <option value="mq">Martinique</option>
+            <option value="mr">Mauritania</option>
+            <option value="ms">Montserrat</option>
+            <option value="mt">Malta</option>
+            <option value="mu">Mauritius</option>
+            <option value="mv">Maldives</option>
+            <option value="mw">Malawi</option>
+            <option value="mx">Mexico</option>
+            <option value="my">Malaysia</option>
+            <option value="mz">Mozambique</option>
+            <option value="na">Namibia</option>
+            <option value="nc">New Caledonia</option>
+            <option value="ne">Niger</option>
+            <option value="nf">Norfolk Island</option>
+            <option value="ng">Nigeria</option>
+            <option value="ni">Nicaragua</option>
+            <option value="nl">Netherlands</option>
+            <option value="no">Norway</option>
+            <option value="np">Nepal</option>
+            <option value="nr">Nauru</option>
+            <option value="nu">Niue</option>
+            <option value="nz">New Zealand</option>
+            <option value="om">Oman</option>
+            <option value="pa">Panama</option>
+            <option value="pe">Peru</option>
+            <option value="pf">French Polynesia</option>
+            <option value="pg">Papua New Guinea</option>
+            <option value="ph">Philippines</option>
+            <option value="pk">Pakistan</option>
+            <option value="pl">Poland</option>
+            <option value="pm">Saint Pierre and Miquelon</option>
+            <option value="pn">Pitcairn</option>
+            <option value="pr">Puerto Rico</option>
+            <option value="ps">Palestinian Territory</option>
+            <option value="pt">Portugal</option>
+            <option value="pw">Palau</option>
+            <option value="py">Paraguay</option>
+            <option value="qa">Qatar</option>
+            <option value="re">Reunion</option>
+            <option value="ro">Romania</option>
+            <option value="rs">Serbia</option>
+            <option value="ru">Russian Federation</option>
+            <option value="rw">Rwanda</option>
+            <option value="sa">Saudi Arabia</option>
+            <option value="sb">Solomon Islands</option>
+            <option value="sc">Seychelles</option>
+            <option value="sd">Sudan</option>
+            <option value="se">Sweden</option>
+            <option value="sg">Singapore</option>
+            <option value="sh">Saint Helena</option>
+            <option value="si">Slovenia</option>
+            <option value="sj">Svalbard and Jan Mayen</option>
+            <option value="sk">Slovakia</option>
+            <option value="sl">Sierra Leone</option>
+            <option value="sm">San Marino</option>
+            <option value="sn">Senegal</option>
+            <option value="so">Somalia</option>
+            <option value="sr">Suriname</option>
+            <option value="st">Sao Tome and Principe</option>
+            <option value="sv">El Salvador</option>
+            <option value="sy">Syrian Arab Republic</option>
+            <option value="sz">Swaziland</option>
+            <option value="tc">Turks and Caicos Islands</option>
+            <option value="td">Chad</option>
+            <option value="tf">French Southern Territories</option>
+            <option value="tg">Togo</option>
+            <option value="th">Thailand</option>
+            <option value="tj">Tajikistan</option>
+            <option value="tk">Tokelau</option>
+            <option value="tl">Timor-Leste</option>
+            <option value="tm">Turkmenistan</option>
+            <option value="tn">Tunisia</option>
+            <option value="to">Tonga</option>
+            <option value="tr">Turkey</option>
+            <option value="tt">Trinidad and Tobago</option>
+            <option value="tv">Tuvalu</option>
+            <option value="tw">Taiwan</option>
+            <option value="tz">Tanzania United Republic of</option>
+            <option value="ua">Ukraine</option>
+            <option value="ug">Uganda</option>
+            <option selected="" value="us">United States</option>
+            <option value="um">United States Minor Outlying Islands</option>
+            <option value="uy">Uruguay</option>
+            <option value="uz">Uzbekistan</option>
+            <option value="va">Holy See (Vatican City State)</option>
+            <option value="vc">Saint Vincent and the Grenadines</option>
+            <option value="ve">Venezuela</option>
+            <option value="vg">Virgin Islands British</option>
+            <option value="vi">Virgin Islands U.S.</option>
+            <option value="vn">Vietnam</option>
+            <option value="vu">Vanuatu</option>
+            <option value="wf">Wallis and Futuna</option>
+            <option value="ws">Samoa</option>
+            <option value="ye">Yemen</option>
+            <option value="yt">Mayotte</option>
+            <option value="za">South Africa</option>
+            <option value="zm">Zambia</option>
+            <option value="zw">Zimbabwe</option>
+          </select>
+
+        </div>
+        <div class="formline">
+          <label for="phone3"><span id="phone3_mobile_phone">Mobile Phone</span><span class="requiredText">*</span></label>
+          <input type="number" pattern="[0-9]*" name="phonenumber" id="phone3" size="35" maxlength="140">
+        </div>
+      </fieldset>
+
+    </div>
+  </div>
+  <div class="pc">
+    <div class="smalltext">Your order may be canceled without notice if you do not use the exact billing address of your credit card.<br>
+
+      <strong>Age Restrictions</strong><br>
+      If you are under 13 years old you cannot provide us with any information about yourself. If you fill in this form, you represent that you are at least 13 years old.
+    </div>
+  </div>
+  <div class="pc">
+    <input type="submit" class="btn btn-primarycta btn-large" value="Save Card">
+    <br><em>You will not be charged</em>
+  </div>
+</form>

chrome/test/data/autofill/heuristics/output/bug_463986.out

@@ -18,7 +18,7 @@ UNKNOWN_TYPE | identificationValue | CPF/CNPJ |  | salutation_1-default
 CREDIT_CARD_EXP_MONTH | accountExpiryMonth | Expiration Date | - | salutation_1-cc
 CREDIT_CARD_EXP_4_DIGIT_YEAR | accountExpiryYear | Expiration Date | - | salutation_1-cc
 CREDIT_CARD_VERIFICATION_CODE | accountVerification | Verification Number * |  | salutation_1-cc
-CREDIT_CARD_TYPE | accountBrandDropDown | Card Brand |  | salutation_1-cc
+UNKNOWN_TYPE | accountBrandDropDown | Card Brand |  | salutation_1-default
 CREDIT_CARD_NUMBER | cardNumber | Card Number |  | salutation_1-cc
 CREDIT_CARD_NAME | ccHolder | Card holder |  | salutation_1-cc
 CREDIT_CARD_EXP_MONTH | accountExpiryMonth | Expiration Date | - | salutation_1-cc

chrome/test/data/autofill/heuristics/output/bug_464002.out

+CREDIT_CARD_NAME | paymentMethodForm.newCreditCardCustomerName | Name on card* |  | paymentMethodForm.newCreditCardCustomerName_1-cc
+CREDIT_CARD_NUMBER | paymentMethodForm.cardNumber | Card number* |  | paymentMethodForm.newCreditCardCustomerName_1-cc
+CREDIT_CARD_VERIFICATION_CODE | paymentMethodForm.cardVerificationNumber | Security code* |  | paymentMethodForm.newCreditCardCustomerName_1-cc
+CREDIT_CARD_EXP_MONTH | paymentMethodForm.expirationMonth | 04 |  | paymentMethodForm.newCreditCardCustomerName_1-cc
+CREDIT_CARD_EXP_4_DIGIT_YEAR | paymentMethodForm.expirationYear | 2018 |  | paymentMethodForm.newCreditCardCustomerName_1-cc
+ADDRESS_HOME_ZIP | paymentMethodForm.zip | Card billing ZIP Code* |  | paymentMethodForm.newCreditCardCustomerName_1-default
+UNKNOWN_TYPE | paymentMethodForm.custCode | Customer code |  | paymentMethodForm.newCreditCardCustomerName_1-default

chrome/test/data/autofill/heuristics/output/bug_469012.out

+CREDIT_CARD_TYPE | cardissuer | Card Issuer |  | cardissuer_1-cc
+CREDIT_CARD_NUMBER | cardnumber | Your cardnumber |  | cardissuer_1-cc
+CREDIT_CARD_EXP_MONTH | expire_month | Expiration Date |  | cardissuer_1-cc
+CREDIT_CARD_EXP_4_DIGIT_YEAR | expire_year |  |  | cardissuer_1-cc
+NAME_FIRST | firstname | First Name * |  | cardissuer_1-default
+NAME_LAST | lastname | Last Name * |  | cardissuer_1-default
+ADDRESS_HOME_LINE1 | address1 | Address * |  | cardissuer_1-default
+ADDRESS_HOME_LINE2 | unit | Unit # |  | cardissuer_1-default
+ADDRESS_HOME_LINE3 | address2 | Address Line 2 |  | cardissuer_1-default
+ADDRESS_HOME_CITY | city | City * |  | cardissuer_1-default
+ADDRESS_HOME_STATE | state | State * |  | cardissuer_1-default
+ADDRESS_HOME_ZIP | zip | State * |  | cardissuer_1-default
+ADDRESS_HOME_COUNTRY | country | Country * | us | cardissuer_1-default
+UNKNOWN_TYPE | phonenumber | Mobile Phone* |  | cardissuer_1-default

components/autofill/core/browser/autofill_field.cc

@@ -248,26 +248,10 @@ bool FillYearSelectControl(const base::string16& value,
 // given |field|.
 bool FillCreditCardTypeSelectControl(const base::string16& value,
                                      FormFieldData* field) {
-  // Try stripping off spaces.
-  base::string16 value_stripped;
-  base::RemoveChars(base::StringToLowerASCII(value), base::kWhitespaceUTF16,
-                    &value_stripped);
-
-  for (size_t i = 0; i < field->option_values.size(); ++i) {
-    base::string16 option_value_lowercase;
-    base::RemoveChars(base::StringToLowerASCII(field->option_values[i]),
-                      base::kWhitespaceUTF16, &option_value_lowercase);
-    base::string16 option_contents_lowercase;
-    base::RemoveChars(base::StringToLowerASCII(field->option_contents[i]),
-                      base::kWhitespaceUTF16, &option_contents_lowercase);
-
-    // Perform a case-insensitive comparison; but fill the form with the
-    // original text, not the lowercased version.
-    if (value_stripped == option_value_lowercase ||
-        value_stripped == option_contents_lowercase) {
-      field->value = field->option_values[i];
-      return true;
-    }
+  size_t idx;
+  if (AutofillField::FindValueInSelectControl(*field, value, &idx)) {
+    field->value = field->option_values[idx];
+    return true;
   }
 
   // For American Express, also try filling as "AmEx".
@@ -541,4 +525,32 @@ base::string16 AutofillField::GetPhoneNumberValue(
   return number;
 }
 
+// static
+bool AutofillField::FindValueInSelectControl(const FormFieldData& field,
+                                             const base::string16& value,
+                                             size_t* index) {
+  // TODO(thestig): Improve this. See http://crbug.com/470726)
+  // Try stripping off spaces.
+  base::string16 value_stripped;
+  base::RemoveChars(base::StringToLowerASCII(value), base::kWhitespaceUTF16,
+                    &value_stripped);
+  for (size_t i = 0; i < field.option_values.size(); ++i) {
+    base::string16 option_value_lowercase;
+    base::RemoveChars(base::StringToLowerASCII(field.option_values[i]),
+                      base::kWhitespaceUTF16, &option_value_lowercase);
+    base::string16 option_contents_lowercase;
+    base::RemoveChars(base::StringToLowerASCII(field.option_contents[i]),
+                      base::kWhitespaceUTF16, &option_contents_lowercase);
+
+    // Perform a case-insensitive comparison.
+    if (value_stripped == option_value_lowercase ||
+        value_stripped == option_contents_lowercase) {
+      if (index)
+        *index = i;
+      return true;
+    }
+  }
+  return false;
+}
+
 }  // namespace autofill

components/autofill/core/browser/autofill_field.h

@@ -89,6 +89,13 @@ class AutofillField : public FormFieldData {
                                             const base::string16& number,
                                             const FormFieldData& field_data);
 
+  // Returns true if the select |field| contains an option that matches |value|.
+  // If the return value is true and |index| is non-NULL, write the index of the
+  // matching option into |index|.
+  static bool FindValueInSelectControl(const FormFieldData& field,
+                                       const base::string16& value,
+                                       size_t* index);
+
  private:
   // The unique name of this field, generated by Autofill.
   base::string16 unique_name_;

components/autofill/core/browser/autofill_regex_constants.cc.utf8

@@ -149,8 +149,6 @@ const char kCardCvcRe[] =
     "verification|card identification|security code|card code"
     "|cvn|cvv|cvc|csc|cvd|cid|ccv"
     "|\\bcid\\b";
-const char kCardTypeRe[] =
-    "(card|cc|payment).?type|payment.?method|card.*brand";
 
 // "Expiration date" is the most common label here, but some pages have
 // "Expires", "exp. date" or "exp. month" and "exp. year".  We also look
@@ -197,8 +195,6 @@ const char kExpirationDateRe[] =
     "|有効期限"  // ja-JP
     "|validade"  // pt-BR, pt-PT
     "|Срок действия карты";  // ru
-const char kCardIgnoredRe[] =
-    "^card";
 const char kGiftCardRe[] =
     "gift.?card";
 

components/autofill/core/browser/credit_card_field.cc

@@ -18,6 +18,8 @@
 #include "components/autofill/core/browser/autofill_regexes.h"
 #include "components/autofill/core/browser/autofill_scanner.h"
 #include "components/autofill/core/browser/field_types.h"
+#include "grit/components_strings.h"
+#include "ui/base/l10n/l10n_util.h"
 
 namespace autofill {
 
@@ -60,7 +62,7 @@ scoped_ptr<FormField> CreditCardField::Parse(AutofillScanner* scanner) {
 
   // Credit card fields can appear in many different orders.
   // We loop until no more credit card related fields are found, see |break| at
-  // bottom of the loop.
+  // the bottom of the loop.
   for (int fields = 0; !scanner->IsEnd(); ++fields) {
     // Ignore gift card fields.
     if (ParseField(scanner, base::UTF8ToUTF16(kGiftCardRe), nullptr))
@@ -89,11 +91,10 @@ scoped_ptr<FormField> CreditCardField::Parse(AutofillScanner* scanner) {
     }
 
     // Check for a credit card type (Visa, MasterCard, etc.) field.
-    if (!credit_card_field->type_ &&
-        ParseFieldSpecifics(scanner,
-                            base::UTF8ToUTF16(kCardTypeRe),
-                            MATCH_DEFAULT | MATCH_SELECT,
-                            &credit_card_field->type_)) {
+    // All CC type fields encountered so far have been of type select.
+    if (!credit_card_field->type_ && LikelyCardTypeSelectField(scanner)) {
+      credit_card_field->type_ = scanner->Cursor();
+      scanner->Advance();
       continue;
     }
 
@@ -150,14 +151,6 @@ scoped_ptr<FormField> CreditCardField::Parse(AutofillScanner* scanner) {
       return nullptr;
     }
 
-    // Some pages (e.g. ExpediaBilling.html) have a "card description"
-    // field; we parse this field but ignore it.
-    // We also ignore any other fields within a credit card block that
-    // start with "card", under the assumption that they are related to
-    // the credit card section being processed but are uninteresting to us.
-    if (ParseField(scanner, base::UTF8ToUTF16(kCardIgnoredRe), nullptr))
-      continue;
-
     break;
   }
 
@@ -247,6 +240,23 @@ bool CreditCardField::LikelyCardYearSelectField(AutofillScanner* scanner) {
           FindConsecutiveStrings(years_to_check, field->option_contents));
 }
 
+// static
+bool CreditCardField::LikelyCardTypeSelectField(AutofillScanner* scanner) {
+  if (scanner->IsEnd())
+    return false;
+
+  AutofillField* field = scanner->Cursor();
+  if (!MatchesFormControlType(field->form_control_type, MATCH_SELECT))
+    return false;
+
+  return AutofillField::FindValueInSelectControl(
+             *field, l10n_util::GetStringUTF16(IDS_AUTOFILL_CC_VISA),
+             nullptr) ||
+         AutofillField::FindValueInSelectControl(
+             *field, l10n_util::GetStringUTF16(IDS_AUTOFILL_CC_MASTERCARD),
+             nullptr);
+}
+
 CreditCardField::CreditCardField()
     : cardholder_(nullptr),
       cardholder_last_(nullptr),

components/autofill/core/browser/credit_card_field.h

@@ -40,6 +40,10 @@ class CreditCardField : public FormField {
   // the next few years.
   static bool LikelyCardYearSelectField(AutofillScanner* scanner);
 
+  // Returns true if |scanner| points to a <select> field that contains credit
+  // card type options.
+  static bool LikelyCardTypeSelectField(AutofillScanner* scanner);
+
   CreditCardField();
 
   // Parses the expiration month/year/date fields. Returns true if it finds

components/autofill/core/browser/credit_card_field_unittest.cc

@@ -117,10 +117,6 @@ TEST_F(CreditCardFieldTest, ParseFullCreditCard) {
   FormFieldData field;
   field.form_control_type = "text";
 
-  field.label = ASCIIToUTF16("Card Type");
-  field.name = ASCIIToUTF16("card_type");
-  list_.push_back(new AutofillField(field, ASCIIToUTF16("type")));
-
   field.label = ASCIIToUTF16("Name on Card");
   field.name = ASCIIToUTF16("name_on_card");
   list_.push_back(new AutofillField(field, ASCIIToUTF16("name")));
@@ -141,6 +137,13 @@ TEST_F(CreditCardFieldTest, ParseFullCreditCard) {
   field.name = ASCIIToUTF16("verification");
   list_.push_back(new AutofillField(field, ASCIIToUTF16("cvc")));
 
+  field.form_control_type = "select-one";
+  field.label = ASCIIToUTF16("Card Type");
+  field.name = ASCIIToUTF16("card_type");
+  field.option_contents.push_back(ASCIIToUTF16("visa"));
+  field.option_values.push_back(ASCIIToUTF16("visa"));
+  list_.push_back(new AutofillField(field, ASCIIToUTF16("type")));
+
   Parse();
   ASSERT_NE(nullptr, field_.get());
   EXPECT_TRUE(ClassifyField());