Add test case for Apple checkout.

chrome/test/data/autofill/heuristics/input/23_checkout_m_apple.com.html

+<form id="payment-method-form" action="javascript:void(0);" class="step-mode edit clearfix payment-method-box" autocomplete="off" __parametersid="parameters_315">
+                                        <div id="payment-form-nav" class="form-tab-nav"> <div id="coherent_id_767"> <ul class="clearfix" id="coherent_id_768"> <li class="first" id="coherent_id_769"> <button type="button" id="payment-credit-content-tab" class=" current"><span id="coherent_id_770">Debit/Credit Card</span></button> </li> <li id="coherent_id_771"> <button type="button" id="payment-giftcard-content-tab" class=""><span id="coherent_id_772">Apple Store Gift Card</span></button> </li> </ul> </div> </div>
+
+                                        <div id="payment-form-horizontal-nav"> <div tabindex="-1" class="clearfix payment-mode" id="payment-credit-content"> <div class="gs grid-1of2" id="coherent_id_773"> <div id="payment-credit-user" class="substep user-form-block"> <div class="shipping-info-link" id="payment-credit-user-copy-from-shipping"> <button type="button" class="form-option text-action" id="payment-credit-user-copy-from-shipping-button"> <em id="coherent_id_774">Same as shipping <span class="a11y" id="coherent_id_775">(Billing Contact, Billing Address)</span> </em> </button> </div> <div id="payment-credit-user-address"> <fieldset class="US first user-form-fieldset" id="coherent_id_776"> <legend class="label" id="coherent_id_777">Billing Contact </legend> <div class="user-contact fieldset-content" id="payment-credit-user-address-contact_section"> <div class="mbs" id="coherent_id_778"> <span class="editing" id="payment-credit-user-address-nameLines-0-prf"></span> <span class="firstName-field field-with-placeholder" id="coherent_id_779">  <label for="payment-credit-user-address-firstName" class="placeholder" id="coherent_id_780"> <span id="coherent_id_781">First Name</span> </label><input name="payment-credit-user-address-firstName" type="text" size="10" maxlength="14" id="payment-credit-user-address-firstName" class="" aria-invalid="false"> </span> <span class="lastName-field field-with-placeholder" id="coherent_id_782">  <label for="payment-credit-user-address-lastName" class="placeholder" id="coherent_id_783"> <span id="coherent_id_784">Last Name</span> </label><input name="payment-credit-user-address-lastName" type="text" size="10" maxlength="20" id="payment-credit-user-address-lastName" class="" aria-invalid="false"> </span> </div> <div class="mbs" id="coherent_id_785"> <span class="editing" id="payment-credit-user-address-contactLines-0-prf"></span> <span class="daytimePhoneAreaCode-field field-with-placeholder" id="coherent_id_786">  <label for="payment-credit-user-address-daytimePhoneAreaCode" class="placeholder" id="coherent_id_787"> <span id="coherent_id_788">Area Code</span> </label><input name="payment-credit-user-address-daytimePhoneAreaCode" type="tel" size="3" maxlength="3" class="kp-tel" id="payment-credit-user-address-daytimePhoneAreaCode" aria-invalid="false"> </span> <span class="daytimePhone-field field-with-placeholder" id="coherent_id_789">  <label for="payment-credit-user-address-daytimePhone" class="placeholder" id="coherent_id_790"> <span id="coherent_id_791">Primary Phone</span> </label><input name="payment-credit-user-address-daytimePhone" type="tel" size="8" maxlength="8" class="kp-tel" id="payment-credit-user-address-daytimePhone" aria-invalid="false"> </span> </div> <div class="mbs" id="coherent_id_792"> <span class="editing" id="payment-credit-user-address-contactLines-1-prf"></span> <span class="eveningPhoneAreaCode-field field-with-placeholder" id="coherent_id_793">  <label for="payment-credit-user-address-eveningPhoneAreaCode" class="placeholder" id="coherent_id_794"> <span id="coherent_id_795">Area Code</span> </label><input name="payment-credit-user-address-eveningPhoneAreaCode" type="tel" size="3" maxlength="3" class="kp-tel" id="payment-credit-user-address-eveningPhoneAreaCode" aria-invalid="false"> </span> <span class="eveningPhone-field field-with-placeholder" id="coherent_id_796">  <label for="payment-credit-user-address-eveningPhone" class="placeholder" id="coherent_id_797"> <span id="coherent_id_798">Alternate Phone (optional)</span> </label><input name="payment-credit-user-address-eveningPhone" type="tel" size="8" maxlength="8" class="kp-tel" id="payment-credit-user-address-eveningPhone" aria-invalid="false"> </span> </div> <div class="mbs" id="coherent_id_799"> <span class="editing" id="payment-credit-user-address-contactLines-2-prf"></span> <span class="emailAddress-field field-with-placeholder" id="coherent_id_800">  <label for="payment-credit-user-address-emailAddress" class="placeholder" id="coherent_id_801"> <span id="coherent_id_802">Email Address</span> </label><input name="payment-credit-user-address-emailAddress" type="email" size="35" maxlength="50" class="kp-email" id="payment-credit-user-address-emailAddress" aria-invalid="false"> </span> </div> </div> </fieldset> <fieldset class="US user-form-fieldset" id="coherent_id_803"> <legend class="label" id="coherent_id_804">Billing Address </legend> <div class="user-address fieldset-content" id="payment-credit-user-address-address_section"> <div class="mbs" id="coherent_id_805"> <span class="editing" id="payment-credit-user-address-addressLines-0-prf"></span> <span class="companyName-field field-with-placeholder" id="coherent_id_806">  <label for="payment-credit-user-address-companyName" class="placeholder" id="coherent_id_807"> <span id="coherent_id_808">Company Name (optional)</span> </label><input name="payment-credit-user-address-companyName" type="text" size="35" maxlength="35" id="payment-credit-user-address-companyName" class="" aria-invalid="false"> </span> </div> <div class="mbs" id="coherent_id_809"> <span class="editing" id="payment-credit-user-address-addressLines-1-prf"></span> <span class="street-field field-with-placeholder" id="coherent_id_810">  <label for="payment-credit-user-address-street" class="placeholder" id="coherent_id_811"> <span id="coherent_id_812">Street Address</span> </label><input name="payment-credit-user-address-street" type="text" size="20" maxlength="30" id="payment-credit-user-address-street" class="" aria-invalid="false"> </span> </div> <div class="mbs" id="coherent_id_813"> <span class="editing" id="payment-credit-user-address-addressLines-2-prf"></span> <span class="street2-field field-with-placeholder" id="coherent_id_814">  <label for="payment-credit-user-address-street2" class="placeholder" id="coherent_id_815"> <span id="coherent_id_816">Apt. or Suite (optional)</span> </label><input name="payment-credit-user-address-street2" type="text" size="20" maxlength="30" id="payment-credit-user-address-street2" class="" aria-invalid="false"> </span> </div> <div class="mbs" id="coherent_id_817"> <span class="editing" id="payment-credit-user-address-addressLines-3-prf"></span> <p id="coherent_id_818"> </p><div class="clearfix" id="payment-credit-user-address-lookup"> <span class="city-state-fields prompt" id="coherent_id_819"> Enter ZIP for City and State </span> <span style="display: none;" class="city-state-fields fields" id="coherent_id_820"> <span class="city-field field-with-placeholder" id="coherent_id_821">  <label for="payment-credit-user-address-city" class="placeholder" id="coherent_id_822"> <span id="coherent_id_823">City</span> </label><input name="payment-credit-user-address-city" type="text" size="10" maxlength="30" id="payment-credit-user-address-city" class="" aria-invalid="false"> </span> <span class="state-field field-with-placeholder" id="coherent_id_824">  <label for="payment-credit-user-address-state" class="placeholder" id="coherent_id_825"> <span id="coherent_id_826">State</span> </label><input name="payment-credit-user-address-state" type="text" size="2" maxlength="2" id="payment-credit-user-address-state" class="" aria-invalid="false"> </span> </span> <span class="postalCode-field field-with-placeholder" id="coherent_id_827">  <label for="payment-credit-user-address-postalCode" class="placeholder" id="coherent_id_828"> <span id="coherent_id_829">ZIP Code</span> </label><input name="payment-credit-user-address-postalCode" type="text" size="5" maxlength="10" id="payment-credit-user-address-postalCode" class="" aria-invalid="false"> </span> <span style="display: none;" class="city-state-fields select" id="coherent_id_830"> <label for="payment-credit-user-address-lookup-options" class="a11y" id="coherent_id_831"> City / State: </label> <select id="payment-credit-user-address-lookup-options"></select> </span> </div> <p id="coherent_id_832"></p> </div> <div class="optional-multicol" id="coherent_id_833"> <span class="country-field field-with-placeholder first" id="coherent_id_834"><span id="payment-credit-user-address-country"></span></span> </div> </div> </fieldset> </div> </div> <div id="payment-credit-extended-fields" class="extended-fields"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_835"> <div id="payment-credit-method" class="substep user-form-block"> <fieldset id="coherent_id_836"> <legend class="a11y" id="coherent_id_837">Payment Method</legend> <div tabindex="-1" role="group" id="payment-credit-method-cc0"> <fieldset class="US first" id="coherent_id_838"> <legend class="a11y" id="coherent_id_839">First Card</legend> <p class="paymethod" id="coherent_id_840">Payment Method</p> <div class="payment-method-form" id="coherent_id_841"> <ul class="card-types detector mbl" id="payment-credit-method-cc0-type"> <li class="VISA first card" id="coherent_id_842"> <span id="coherent_id_843">Visa</span> </li> <li class="MASTERCARD card" id="coherent_id_844"> <span id="coherent_id_845">Mastercard</span> </li> <li class="AMERICAN_EXPRESS card" id="coherent_id_846"> <span id="coherent_id_847">American Express</span> </li> <li class="DISCOVER last card" id="coherent_id_848"> <span id="coherent_id_849">Discover</span> </li> </ul> <div class="mbm" id="coherent_id_850"> <span class="cardNumber-field field-with-placeholder" id="coherent_id_851">  <label for="payment-credit-method-cc0-cardNumber" class="placeholder" id="coherent_id_852"> <span id="coherent_id_853">Card Number</span> </label><input type="text" class="kp-num" id="payment-credit-method-cc0-cardNumber" maxlength="16" aria-invalid="false"> </span> <div class="security-code" id="coherent_id_854"> <span class="securityCode-field field-with-placeholder" id="payment-credit-method-cc0-payment-security-code">  <label for="payment-credit-method-cc0-security-code" class="placeholder" id="coherent_id_855"> <span id="coherent_id_856">Card code</span> </label><input type="text" class="kp-num" id="payment-credit-method-cc0-security-code" maxlength="4" aria-invalid="false" name="null"> <span rel="security-code-help" class="whats-this right top" id="coherent_id_642"> <a href="#" tabindex="0" class="toggle tooltip-toggle" aria-describedby="coherent_id_643" id="coherent_id_857">What's This?</a> <span class=" hide ovl" id="coherent_id_643" aria-hidden="true" role="tooltip"> <h4 id="coherent_id_858">Where to find your Security Code</h4> <h5 class="cvv_card visa" id="coherent_id_859">Visa/Mastercard/Discover</h5> <span class="a11y" id="coherent_id_860">For American Express cards, the security code is the last 4 digits on the front of the card. It is separate from the actual credit card number.</span> <h5 class="cvv_card amex" id="coherent_id_861">American Express</h5> <span class="a11y" id="coherent_id_862">For Visa, Mastercard, or Discover cards, the security code can be found on the back of the card. It is the last 3 digits, typically found to the right of the signature strip.</span> </span> </span> </span> </div> <br id="coherent_id_863"> </div> <div class="optional-multicol clearfix mbm" id="payment-credit-method-cc0-payment-expiry-fields"> <span class="first" id="coherent_id_864"> <span class="label" id="coherent_id_865"> Expires </span> <span class="expirationMonth-field" id="coherent_id_866"> <label for="payment-credit-method-cc0-expirationMonth" class="a11y" id="coherent_id_867">Credit card expiration month</label> <select id="payment-credit-method-cc0-expirationMonth" name="payment-credit-method-cc0-expirationMonth" class=""><option value="WONoSelectionString" id="coherent_id_644" class="first">Month</option> <option value="01" id="coherent_id_645" class="">01</option> <option value="02" id="coherent_id_646" class="">02</option> <option value="03" id="coherent_id_647" class="">03</option> <option value="04" id="coherent_id_648" class="">04</option> <option value="05" id="coherent_id_649" class="">05</option> <option value="06" id="coherent_id_650" class="">06</option> <option value="07" id="coherent_id_651" class="">07</option> <option value="08" id="coherent_id_652" class="">08</option> <option value="09" id="coherent_id_653" class="">09</option> <option value="10" id="coherent_id_654" class="">10</option> <option value="11" id="coherent_id_655" class="">11</option> <option value="12" id="coherent_id_656" class="last">12</option></select> </span> <span class="expirationYear-field" id="coherent_id_868"> <label for="payment-credit-method-cc0-expirationYear" class="a11y" id="coherent_id_869">Credit card expiration year</label> <select id="payment-credit-method-cc0-expirationYear" name="payment-credit-method-cc0-expirationYear" class=""><option value="WONoSelectionString" id="coherent_id_657" class="first">Year</option> <option value="2014" id="coherent_id_658" class="">2014</option> <option value="2015" id="coherent_id_659" class="">2015</option> <option value="2016" id="coherent_id_660" class="">2016</option> <option value="2017" id="coherent_id_661" class="">2017</option> <option value="2018" id="coherent_id_662" class="">2018</option> <option value="2019" id="coherent_id_663" class="">2019</option> <option value="2020" id="coherent_id_664" class="">2020</option> <option value="2021" id="coherent_id_665" class="">2021</option> <option value="2022" id="coherent_id_666" class="">2022</option> <option value="2023" id="coherent_id_667" class="">2023</option> <option value="2024" id="coherent_id_668" class="">2024</option> <option value="2025" id="coherent_id_669" class="">2025</option> <option value="2026" id="coherent_id_670" class="">2026</option> <option value="2027" id="coherent_id_671" class="">2027</option> <option value="2028" id="coherent_id_672" class="">2028</option> <option value="2029" id="coherent_id_673" class="">2029</option> <option value="2030" id="coherent_id_674" class="">2030</option> <option value="2031" id="coherent_id_675" class="">2031</option> <option value="2032" id="coherent_id_676" class="">2032</option> <option value="2033" id="coherent_id_677" class="">2033</option> <option value="2034" id="coherent_id_678" class="last">2034</option></select> </span> </span> </div> <div id="payment-credit-method-cc0-installments"></div> </div> </fieldset> </div> </fieldset> <p class="text-actions" id="coherent_id_870"> <span id="coherent_id_871"><button type="button" class="text-action" id="payment-credit-add-cc"><em id="coherent_id_872">Pay with two debit / credit cards</em></button></span> </p> </div> <div class="substep promo-banner-align" id="coherent_id_873"> <div id="payment-form-astro" class="form-astro"> <div class="promo-banner" id="coherent_id_874"> <a id="financing-promo-payment" href="#payment-form-astro"> <img class="ir" src="https://store.storeimages.cdn-apple.com/4146/as-images.apple.com/is/image/AppleInc/aos/published/images/h/ol/holiday2012/checkout/holiday2012-checkout-financing-offers?wid=672&amp;hei=174&amp;fmt=jpeg&amp;qlt=80&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.5,0.5,0,0&amp;iccEmbed=0&amp;layer=comp&amp;.v=1400775019109" alt="Financing offers. 6,12, and 18 month options available" width="336" height="87" data-scale-params-1="wid=336&amp;hei=87&amp;fmt=jpeg&amp;qlt=95&amp;op_sharpen=0&amp;resMode=bicub&amp;op_usm=0.5,0.5,0,0&amp;iccEmbed=0&amp;layer=comp&amp;.v=1400775019109" id="coherent_id_875"> </a> </div> </div> </div> </div> </div> <div id="payment-educationloan-content" style="display: none;" tabindex="-1" class="clearfix payment-mode"> <div id="payment-educationloan-errors" class="payment-loan-errors"></div> <div class="gs grid-1of2" id="coherent_id_876"> <div id="payment-educationloan-loanfields" style="border-right: 1px solid #D5D5D5" class="user-form-block substep"></div> <div id="payment-educationloan-user" style="border-right: 1px solid #D5D5D5" class="user-form-block substep"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_877"> <div id="payment-educationloan-method" class="substep payment-method"></div> <div class="substep" id="coherent_id_878"> </div> </div> <div id="payment-educationloan-extended-fields" class="extended-fields"></div> </div> <div id="payment-giftcard-content" style="display: none;" tabindex="-1" class="clearfix payment-mode"> <div id="payment-giftcard-errors"></div> <div class="gs grid-1of2" id="coherent_id_879"> <div id="payment-giftcard-user" class="user-form-block substep"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_880"> <div id="payment-giftcard-method" class="substep payment-method"></div> <div class="substep" id="coherent_id_881"> </div> </div> <div id="payment-giftcard-extended-fields" class="extended-fields"></div> </div> <div id="payment-financing-content" style="display: none;" tabindex="-1" class="user-form-block clearfix payment-mode"></div> <div id="payment-bml-content" style="display: none;" tabindex="-1" class="clearfix payment-mode"> <div id="payment-bml-errors"></div> <div class="gs grid-1of2" id="coherent_id_882"> <div id="payment-bml-user" class="user-form-block substep"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_883"> <div id="payment-bml-method" class="substep"></div> </div> <div id="payment-bml-extended-fields" class="extended-fields"></div> </div> <div id="payment-paypal-content" style="display: none;" tabindex="-1" class="clearfix payment-mode"> <div id="payment-paypal-errors"></div> <div class="gs grid-1of2" id="coherent_id_884"> <div id="payment-paypal-user" class="user-form-block substep"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_885"> <div id="payment-paypal-method" class="substep"></div> </div> <div id="payment-paypal-extended-fields" class="extended-fields"></div> </div> <div id="payment-ideal-content" style="display: none;" tabindex="-1" class="clearfix payment-mode"> <div id="payment-ideal-errors"></div> <div class="gs grid-1of2" id="coherent_id_886"> <div id="payment-ideal-user" class="user-form-block substep"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_887"> <div id="payment-ideal-method" class="substep"></div> </div> <div id="payment-ideal-extended-fields" class="extended-fields"></div> </div> <div id="payment-wire-content" style="display: none;" tabindex="-1" class="clearfix payment-mode"> <div id="payment-wire-errors"></div> <div class="gs grid-1of2" id="coherent_id_888"> <div id="payment-wire-user" class="user-form-block substep"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_889"> <div id="payment-wire-method" class="substep"></div> </div> <div id="payment-wire-extended-fields" class="extended-fields"></div> </div> <div id="payment-cheque-content" style="display: none;" tabindex="-1" class="clearfix payment-mode"> <div id="payment-cheque-errors"></div> <div class="gs grid-1of2" id="coherent_id_890"> <div id="payment-cheque-user" class="user-form-block substep"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_891"> <div id="payment-cheque-method" class="substep"></div> </div> <div class="payment-cheque-extended-fields" id="coherent_id_892"></div> </div> <div id="payment-lease-content" style="display: none;" tabindex="-1" class="clearfix payment-mode"> <div id="payment-lease-errors"></div> <div class="gs grid-1of2" id="coherent_id_893"> <div id="payment-lease-user" class="user-form-block substep"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_894"> <div id="payment-lease-method" class="substep"></div> </div> <div id="payment-lease-extended-fields" class="extended-fields"></div> </div> <div id="payment-loan-content" style="display: none;" tabindex="-1" class="clearfix payment-mode"> <div id="payment-loan-errors" class="payment-loan-errors"></div> <div class="gs grid-1of2" id="coherent_id_895"> <div id="payment-loan-user" class="user-form-block substep"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_896"> <div id="payment-loan-method" class="substep"></div> </div> <div id="payment-loan-extended-fields" class="extended-fields"></div> </div> <div id="payment-cashcheck-content" style="display: none;" tabindex="-1" class="clearfix payment-mode"> <div id="payment-cashcheck-errors"></div> <div class="gs grid-1of2" id="coherent_id_897"> <div id="payment-cashcheck-user" class="substep user-form-block"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_898"> <div id="payment-cashcheck-method" class="substep"></div> </div> <div id="payment-cashcheck-extended-fields" class="extended-fields"></div> </div> <div id="payment-socexternal-content" style="display: none;" tabindex="-1" class="celarfix payment-mode"> <div id="payment-socexternal-errors"></div> <div class="gs grid-1of2" id="coherent_id_899"> <div id="payment-socexternal-user" class="substep user-form-block"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_900"> <div id="payment-socexternal-method" class="substep"></div> </div> <div id="payment-socexternal-extended-fields" class="extended-fields"></div> </div> <div id="payment-socinternal-content" style="display: none;" tabindex="-1" class="clearfix payment-mode"> <div id="payment-socinternal-errors"></div> <div class="gs grid-1of2" id="coherent_id_901"> <div id="payment-socinternal-user" class="substep user-form-block"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_902"> <div id="payment-socinternal-method" class="substep"></div> </div> <div id="payment-socinternal-extended-fields" class="extended-fields"></div> </div> <div id="payment-boleto-content" style="display: none;" tabindex="-1" class="clearfix payment-mode"> <div class="gs grid-1of2" id="coherent_id_903"> <div id="payment-boleto-user" class="substep user-form-block"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_904"> <div id="payment-boleto-method" class="substep"></div> </div> <div id="payment-boleto-extended-fields" class="extended-fields"></div> </div> <div id="payment-atm-content" style="display: none;" tabindex="-1" class="clearfix payment-mode"> <div id="payment-atm-errors"></div> <div class="gs grid-1of2" id="coherent_id_905"> <div id="payment-atm-user" class="substep user-form-block"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_906"> <div id="payment-atm-method" class="substep"></div> </div> <div id="payment-atm-extended-fields" class="extended-fields"></div> </div> <div id="payment-counterservice-content" style="display: none;" tabindex="-1" class="clearfix payment-mode"> <div id="payment-counterservice-errors"></div> <div class="gs grid-1of2" id="coherent_id_907"> <div id="payment-counterservice-user" class="substep user-form-block"></div> </div> <div class="gs grid-1of2 gs-last" id="coherent_id_908"> <div id="payment-counterservice-method" class="substep"></div> </div> <div id="payment-counterservice-extended-fields" class="extended-fields"></div> </div> <div id="payment-step-defaults" class="ptm"> </div> </div>
+
+                                        <div id="payment-form-options" class="payment-form-options"></div>
+                                        
+                                                                        <div id="payment-form-vertical-nav" class="payment-form-options"></div>
+                                                                        
+                                    </form>