jQuery Selector Testing3406

JavaScript performance comparison

Revision 4 of this test case created

Preparation code

<html>
 
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
    </script>
  </head>
 
  <body>
    <div id="mockupLeftNav">
    </div>
    <div id="mockupBody">
      <form id="inputForm" class="cF-appInput cF-appInputV2 cF-fullPageApp">
        <div class="cH-formHeader">
          <h2 class="cH-appHeadline">
            Example Input Form
          </h2>
          <div class="cH-subHeader cM-iconMessage cH-pageLevelError">
            <span class="cM-spriteBase cM-negErrIcon">
            </span>
            <span class="cM-iconMessageText">
              Example Error Message. We cannot process this transaction because you do not have
              enough money.
            </span>
            <div class="cM-dottedDivider cH-PageErrorDivider">
            </div>
          </div>
          <div class="cH-subHeader cH-headerCopy">
            <span class="cH-copyText">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua
              <a href="#" role="link" class="cL-hyperlink">Body Copy Link 1</a>
              . Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
              ex ea commodo consequat
              <a href="#" role="link" class="cL-hyperlink">Body Copy Link 2</a>
              .
            </span>
            <span class="cH-requiredText">
              All fields required
            </span>
          </div>
          <div class="cH-subHeader cM-iconMessage cM-lastElementVertical">
            <span class="cM-spriteBase cM-posErrIcon">
            </span>
            <span class="cM-iconMessageText">
              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
              laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
              architecto beatae vitae dicta sunt explicabo.
            </span>
          </div>
          <div class="cM-ieBottomMarginFix">
          </div>
        </div>
        <!-- BEGIN -->
        <!-- Sample code for right subapp (quick links) -->
        <div id="rightSupApp">
          <div class="cS-structRightPanelUpperContainer">
            <div class="cS-quickLinksPanel">
              <div class="cH-quickLinksHeader">
                <h2>
                  QUICK LINKS
                </h2>
              </div>
              <div id="quickLinksContainer">
                <ul class="cL-quickLinksList">
                  <li class="cN-linkButton">
                    <span class="cM-spriteBase cN-buttonCarat">
                    </span>
                    <a role="link" href="/GBGCB/CBOL/pnt/locictfr/flow.action" class="cN-quickTaskLink">
                    <span class="">Local InterCiti now</span>
                    </a>
                  </li>
                  <li class="cN-linkButton">
                    <span class="cM-spriteBase cN-buttonCarat">
                    </span>
                    <a role="link" href="/GBGCB/CBOL/pnt/addpayeewizard/flow.action" class="cN-quickTaskLink">
                    <span class="">PNT Download statements now</span>
                    </a>
                  </li>
                  <li class="cN-linkButton">
                    <span class="cM-spriteBase cN-buttonCarat">
                    </span>
                    <a role="link" href="/GBGCB/CBOL/pnt/addpayeewizard/flow.action" class="cN-quickTaskLink">
                    <span class="">PNT Review rewards balance now</span>
                    </a>
                  </li>
                  <li class="cN-linkButton">
                    <span class="cM-spriteBase cN-buttonCarat">
                    </span>
                    <a role="link" href="/GBGCB/CBOL/pnt/addpayeewizard/flow.action" class="cN-quickTaskLink">
                    <span>PNT Transfer funds now</span>
                    </a>
                  </li>
                  <li class="cN-linkButton">
                    <span class="cM-spriteBase cN-buttonCarat">
                    </span>
                    <a role="link" href="/GBGCB/CBOL/pnt/addpayeewizard/flow.action" class="cN-quickTaskLink">
                    <span>PNT Transfer funds now</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- END -->
        <fieldset>
          <div class="cF-sideBySide">
            <!-- BEGIN -->
            <!-- Sample code for Account Selects -->
            <div class="cF-fromToSection">
              <div class="cF-element cF-elementInputBox">
                <label for="fromAccount" tabindex="0">
                  <span>
                    From:
                  </span>
                </label>
                <select id="fromAccount">
                  <option value="" selected="selected">
                    Select a Value
                  </option>
                  <option value="">
                    Super Checking Account - 4392 {0} Available: $ 100.00
                  </option>
                  <option value="">
                    Fun Checking Account - 1123 {0} Available: - $ 2,000,000.00
                  </option>
                  <option value="">
                    Super Checking Account - 4392 {0} Available: $ 102,300,232.24
                  </option>
                  <option value="">
                    Fun Checking Account - 1123 {0} Available: - $ 983.00
                  </option>
                  <option value="">
                    Super Checking Account - 4392 {0} Available: $ 22,342.00
                  </option>
                  <option value="">
                    Fun Checking Account - 1123 {0} Available: - $ 505,033.00
                  </option>
                  <option value="">
                    Super Checking Account - 4392 {0} Available: $ 2,304,058.00
                  </option>
                  <option value="">
                    Fun Checking Account - 1123 {0} Available: - $ 12,023.00
                  </option>
                  <option value="">
                    Super Checking Account - 4392 {0} Available: $ 5,202.00
                  </option>
                  <option value="">
                    Fun Checking Account - 1123 {0} Available: - $ 23,424.00
                  </option>
                  <option value="">
                    Super Checking Account - 4392 {0} Available: $ 9.00
                  </option>
                  <option value="">
                    Fun Checking Account - 1123 {0} Available: - $ 23.00
                  </option>
                  <option value="">
                    Super Checking Account - 4392 {0} Available: $ 1.00
                  </option>
                  <option value="">
                    Fun Checking Account - 1123 {0} Available: - $ 23,435,576.00
                  </option>
                </select>
              </div>
              <div class="cF-element cF-link">
                <div class="cN-linkButton">
                  <span class="cM-spriteBase cN-buttonCarat">
                  </span>
                  <a href="" role="link">Indented Link</a>
                </div>
              </div>
              <div class="cF-element cF-elementInputBox">
                <label for="toAccount" tabindex="0">
                  <span>
                    To:
                  </span>
                </label>
                <select id="toAccount">
                  <option value="" selected="selected">
                    Select a Value
                  </option>
                  <option value="">
                    Super Checking Account - 4392 {0} Available: $ 100.00
                  </option>
                  <option value="">
                    Fun Checking Account - 1123 {0} Available: - $ 2,000,000.00
                  </option>
                  <option value="">
                    Super Checking Account - 4392 {0} Available: $ 102,300,232.24
                  </option>
                  <option value="">
                    Fun Checking Account - 1123 {0} Available: - $ 983.00
                  </option>
                  <option value="">
                    Super Checking Account - 4392 {0} Available: $ 22,342.00
                  </option>
                  <option value="">
                    Fun Checking Account - 1123 {0} Available: - $ 505,033.00
                  </option>
                  <option value="">
                    Super Checking Account - 4392 {0} Available: $ 2,304,058.00
                  </option>
                  <option value="">
                    Fun Checking Account - 1123 {0} Available: - $ 12,023.00
                  </option>
                  <option value="">
                    Super Checking Account - 4392 {0} Available: $ 5,202.00
                  </option>
                  <option value="">
                    Fun Checking Account - 1123 {0} Available: - $ 23,424.00
                  </option>
                  <option value="">
                    Super Checking Account - 4392 {0} Available: $ 9.00
                  </option>
                  <option value="">
                    Fun Checking Account - 1123 {0} Available: - $ 23.00
                  </option>
                  <option value="">
                    Super Checking Account - 4392 {0} Available: $ 1.00
                  </option>
                  <option value="">
                    Fun Checking Account - 1123 {0} Available: - $ 23,435,576.00
                  </option>
                </select>
              </div>
              <div class="cF-element cF-link">
                <div class="cN-linkButton">
                  <span class="cM-spriteBase cN-buttonCarat">
                  </span>
                  <a href="" role="link">Indented Link</a>
                </div>
              </div>
            </div>
            <!-- END -->
            <!-- BEGIN -->
            <!-- Sample code for plain Label with Textbox -->
            <div class="cF-element cF-elementInputBox">
              <label for="n_input1" tabindex="0">
                <span>
                  Normal Input:
                </span>
              </label>
              <input type="text" id="n_input1" tabindex="0" value="" />
            </div>
            <!-- END -->
            <!-- BEGIN -->
            <!-- Sample code for plain Label with Textbox and adjacent text -->
            <div class="cF-element cF-elementInputBox">
              <label for="at_input1" tabindex="0">
                <span>
                  Normal Input with adjacent text:
                </span>
              </label>
              <div class="cF-value">
                <input type="text" id="at_input1" tabindex="0" value="" />
                <span class="cF-postInputText">
                  This is some extra text
                </span>
              </div>
            </div>
            <!-- END -->
            <!-- BEGIN -->
            <!-- Sample code for plain Label with Textbox and multiple adjacent texts -->
            <div class="cF-element cF-elementInputBox">
              <label for="mat_input1" tabindex="0">
                <span>
                  Normal Input with adjacent text:
                </span>
              </label>
              <div class="cF-value">
                <input type="text" id="mat_input1" tabindex="0" value="" />
                <span class="cF-postInputText">
                  This is some extra text
                </span>
                <span class="cF-postInputText cM-tooltip">
                  tooltip example
                </span>
              </div>
            </div>
            <!-- END -->
            <!-- BEGIN -->
            <!-- Sample code for plain Label with a textbox that has a prepended add-on -->
            <div class="cF-element cF-elementInputBox">
              <label for="ao_input1" tabindex="0">
                <span>
                  Add-on Left:
                </span>
              </label>
              <div class="cF-addOnInput cF-addOnPrepend">
                <div class="cF-inputAddOn">
                  USD
                </div>
                <input type="text" id="ao_input1" tabindex="0" value="" />
              </div>
            </div>
            <!-- END -->
            <!-- BEGIN -->
            <!-- Sample code for plain Label with a textbox that has an appended add-on -->
            <div class="cF-element cF-elementInputBox">
              <label for="ao_input2" tabindex="0">
                <span>
                  Add-on Right:
                </span>
              </label>
              <div class="cF-addOnInput cF-addOnAppend">
                <div class="cF-inputAddOn">
                  USD
                </div>
                <input type="text" id="ao_input2" tabindex="0" value="" />
              </div>
            </div>
            <!-- END -->
            <!-- BEGIN -->
            <!-- Sample code for plain Label with a textbox that has an add-on and adjacent
           text -->
            <div class="cF-element cF-elementInputBox">
              <label for="ao_input3" tabindex="0">
                <span>
                  Add-on with text:
                </span>
              </label>
              <div class="cF-value">
                <div class="cF-addOnInput cF-addOnAppend">
                  <div class="cF-inputAddOn">
                    USD
                  </div>
                  <input type="text" id="ao_input3" tabindex="0" value="" />
                </div>
                <span class="cF-postInputText">
                  This is some extra text
                </span>
                <span class="cF-postInputText cM-tooltip">
                  tooltip example
                </span>
              </div>
            </div>
            <!-- END -->
            <!-- BEGIN -->
            <!-- Sample code for plain Label with Dropdown -->
            <div class="cF-element cF-elementInputBox">
              <label for="normalSelect" tabindex="0">
                <span>
                  Select:
                </span>
              </label>
              <select id="normalSelect">
                <option value="" selected="selected">
                  Select a Value
                </option>
                <option value="">
                  Option 1
                </option>
                <option value="">
                  Option 2
                </option>
              </select>
            </div>
            <!-- END -->
            <!-- BEGIN -->
            <!-- Sample code for link in form -->
            <div class="cF-element cF-link cM-lastElementVertical">
              <div class="cN-linkButton">
                <span class="cM-spriteBase cN-buttonCarat">
                </span>
                <a href="" role="link">Indented Link</a>
              </div>
            </div>
            <!-- END -->
            <!-- BEGIN -->
            <!-- Sample code for read only form subsection -->
            <div class="cF-element cF-subSectionContainer cF-subSectionText">
              <div class="cF-subSection">
                <div class="cF-element cF-elementText">
                  <label for="s_t_span1" tabindex="0">
                    <span>
                      Subsection Text 1:
                    </span>
                  </label>
                  <span id="s_t_span1">
                    Joe's Checking
                  </span>
                </div>
                <div class="cF-element cF-elementText">
                  <label for="s_t_span2" tabindex="0">
                    <span>
                      Subsection Text 2:
                    </span>
                  </label>
                  <span id="s_t_span2">
                    Example text 2
                  </span>
                </div>
                <div class="cF-element cF-elementText cM-lastElelementVertical">
                  <label for="s_t_span2" tabindex="0">
                    <span>
                      Label with Wrapping Value:
                    </span>
                  </label>
                  <span id="s_t_span2">
                    Example long text: 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
                  </span>
                </div>
              </div>
            </div>
            <!-- END -->
            <div class="cM-dottedDivider">
            </div>
            <div class="cF-element cF-elementInputChoice cF-elementInputChoiceVert">
              <fieldset>
                <legend>
                  <div>
                    <span>
                      Radio Choice List:
                    </span>
                  </div>
                </legend>
                <div class="cF-inputChoiceList">
                  <div class="cF-value">
                    <label for="r_choice1">
                      <input id="r_choice1" type="radio" name="radios" value="savings" checked>
                      <span class="cF-choiceText">
                        Bank Account
                      </span>
                    </label>
                  </div>
                  <div class="cF-value">
                    <label for="r_choice2">
                      <input id="r_choice2" type="radio" name="radios" value="savings">
                      <span class="cF-choiceText">
                        Bank Account
                      </span>
                    </label>
                  </div>
                  <div class="cF-value cM-lastElementVertical">
                    <label for="r_choice3">
                      <input id="r_choice3" type="radio" name="radios" value="savings">
                      <span class="cF-choiceText">
                        Bank Account
                      </span>
                    </label>
                  </div>
                </div>
              </fieldset>
            </div>
            <div class="cF-element cF-elementInputChoice cF-elementInputChoiceVert">
              <fieldset>
                <legend>
                  <div>
                    <span class="cM-tooltip">
                      Check Choice:
                    </span>
                  </div>
                </legend>
                <div class="cF-inputChoiceList">
                  <div class="cF-value">
                    <label for="c_choice1">
                      <input id="c_choice1" type="checkbox" name="checks" value="savings">
                      <span class="cF-choiceText">
                        Bank Account
                      </span>
                    </label>
                  </div>
                  <div class="cF-value">
                    <label for="c_choice2">
                      <input id="c_choice2" type="checkbox" name="checks" value="savings">
                      <span class="cF-choiceText">
                        Bank Account
                      </span>
                    </label>
                  </div>
                  <div class="cF-value cM-lastElementVertical">
                    <label for="c_choice3">
                      <input id="c_choice3" type="checkbox" name="checks" value="savings">
                      <span class="cF-choiceText">
                        Bank Account
                      </span>
                    </label>
                  </div>
                </div>
              </fieldset>
            </div>
            <div class="cF-element cF-elementInputChoice cF-elementInputChoiceVert">
              <fieldset>
                <legend>
                  <div>
                    <span>
                      Mixed Choice with Labels:
                    </span>
                  </div>
                </legend>
                <div class="cF-inputChoiceList">
                  <div class="cF-value cF-inputBoxChoice">
                    <input id="i_choice1" type="radio" name="mixed" value="savings" checked>
                    <div class="cF-addOnInput cF-addOnAppend">
                      <div class="cF-inputAddOn">
                        USD
                      </div>
                      <input id="i_input1" type="text" tabindex="0" value="" />
                    </div>
                    <label for="i_choice1" class="cF-postInputText">
                      Bank Account
                    </label>
                  </div>
                  <div class="cF-value cF-inputBoxChoice">
                    <input id="i_choice2" type="radio" name="mixed" value="savings">
                    <div class="cF-addOnInput cF-addOnPrepend">
                      <div class="cF-inputAddOn">
                        USD
                      </div>
                      <input id="i_input2" type="text" tabindex="0" value="" />
                    </div>
                    <label for="i_choice2" class="cF-postInputText">
                      Bank Account
                    </label>
                  </div>
                  <div class="cF-value cF-inputBoxChoice ">
                    <input id="i_choice3" type="radio" name="mixed" value="savings">
                    <input id="input3" type="text" name="mixed" value="savings">
                    <label for="i_choice3" class="cF-postInputText">
                      Bank Account
                    </label>
                  </div>
                  <div class="cF-value cM-lastElementVertical">
                    <label for="i_choice4">
                      <input id="i_choice4" type="radio" name="mixed" value="savings">
                      <span class="cF-choiceText">
                        Bank Account
                      </span>
                    </label>
                  </div>
                </div>
              </fieldset>
            </div>
            <div class="cF-element cF-elementInputChoice cF-elementInputChoiceVert">
              <fieldset>
                <legend>
                  <div>
                    <span>
                      Mixed choice with adjacent text:
                    </span>
                  </div>
                </legend>
                <div class="cF-inputChoiceList">
                  <div class="cF-value cF-inputBoxChoice">
                    <input id="m_choice1" type="radio" name="mixed2" value="savings" checked>
                    <div class="cF-addOnInput cF-addOnAppend">
                      <div class="cF-inputAddOn">
                        USD
                      </div>
                      <input type="text" id="m_input1" tabindex="0" value="" />
                    </div>
                    <span class="cF-postInputText">
                      will be sent to your payee.
                    </span>
                    <span class="cF-postInputText cM-tooltip">
                      tooltip!
                    </span>
                    <span class="cF-postInputText cM-tooltip">
                      another tooltip!
                    </span>
                  </div>
                  <div class="cF-value cF-inputBoxChoice">
                    <input id="m_choice2" type="radio" name="mixed2" value="savings">
                    <div class="cF-addOnInput cF-addOnPrepend">
                      <div class="cF-inputAddOn">
                        USD
                      </div>
                      <input id="m_input2" type="text" tabindex="0" value="" />
                    </div>
                  </div>
                  <div class="cF-value cF-inputBoxChoice">
                    <input id="m_choice3" type="radio" name="mixed2" value="savings">
                    <input id="m_input3" type="text" name="mixed" value="savings">
                  </div>
                  <div class="cF-value cM-lastElementVertical">
                    <label for="m_choice4">
                      <input id="m_choice4" type="radio" name="mixed2" value="savings">
                      <span class="cF-choiceText">
                        Bank Account
                      </span>
                    </label>
                  </div>
                </div>
              </fieldset>
            </div>
            <div class="cF-element cF-subSectionContainer cF-subSectionChoice">
              <label for="s_choice1" class="cF-subSectionControlLabel">
                <input id="s_choice1" class="cF-subSectionControl" type="checkbox" name="subSection1">
                <span class="cF-choiceText">
                  If you choose this a sub-section will be activated
                </span>
              </label>
              <div class="cF-subSection">
                <!-- BEGIN -->
                <!-- Sample code for plain Label with Textbox -->
                <div class="cF-element cF-elementInputBox">
                  <label for="s_n_input1" tabindex="0">
                    <span>
                      Normal Input:
                    </span>
                  </label>
                  <input type="text" id="s_n_input1" tabindex="0" value="" />
                </div>
                <!-- END -->
                <div class="cF-element cF-elementInputChoice cF-elementInputChoiceVert cM-lastElementVertical">
                  <fieldset>
                    <legend>
                      <div>
                        <span>
                          Mixed choice with adjacent text:
                        </span>
                      </div>
                    </legend>
                    <div class="cF-inputChoiceList">
                      <div class="cF-value cF-inputBoxChoice">
                        <input id="s_m_choice1" type="radio" name="s_mixed1" value="savings" checked>
                        <div class="cF-addOnInput cF-addOnAppend">
                          <div class="cF-inputAddOn">
                            USD
                          </div>
                          <input type="text" id="s_m_input1" tabindex="0" value="" />
                        </div>
                        <span class="cF-postInputText cM-tooltip">
                          tooltip!
                        </span>
                        <span class="cF-postInputText cM-tooltip">
                          another tooltip!
                        </span>
                      </div>
                      <div class="cF-value cF-inputBoxChoice">
                        <input id="s_m_choice2" type="radio" name="s_mixed1" value="savings">
                        <div class="cF-addOnInput cF-addOnPrepend">
                          <div class="cF-inputAddOn">
                            USD
                          </div>
                          <input id="s_m_input2" type="text" tabindex="0" value="" />
                        </div>
                      </div>
                      <div class="cF-value cF-inputBoxChoice">
                        <input id="s_m_choice3" type="radio" name="s_mixed1" value="savings">
                        <input id="s_m_input3" type="text" name="s_mixed1" value="savings">
                      </div>
                      <div class="cF-value cM-lastElementVertical">
                        <label for="s_m_choice4">
                          <input id="s_m_choice4" type="radio" name="s_mixed1" value="savings">
                          <span class="cF-choiceText">
                            Bank Account
                          </span>
                        </label>
                      </div>
                    </div>
                  </fieldset>
                </div>
              </div>
            </div>
            <div class="cF-element cF-subSectionContainer cF-subSectionChoice cM-lastElementVertical">
              <label for="s_choice2" class="cF-subSectionControlLabel">
                <input id="s_choice2" class="cF-subSectionControl" type="checkbox" name="subSection1">
                <span class="cF-choiceText">
                  If you choose this a sub-section will be activated
                </span>
              </label>
              <div class="cF-subSection">
                <!-- BEGIN -->
                <!-- Sample code for plain Label with Textbox -->
                <div class="cF-element cF-elementInputBox cM-lastElementVertical">
                  <label for="s_n_input2" tabindex="0">
                    <span>
                      Normal Input:
                    </span>
                  </label>
                  <input type="text" id="s_n_input2" tabindex="0" value="" />
                </div>
                <!-- END -->
              </div>
            </div>
            <div class="cF-disclaimer cM-lastElementVertical">
              DISCLAIMER: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum,
              quam ac blandit commondo. ipsum ligula semper libero, vel omare.
            </div>
          </div>
        </fieldset>
        <div class="cM-dottedDivider cF-navDivider">
        </div>
        <ul class="cN-primaryNav cN-primaryNavLeft">
          <li>
            <a class="cM-spriteBase cN-colorBGBlueButton" href="" role="link">PRIMARY</a>
          </li>
          <li class="cN-primaryNavSecondaryOption cN-linkButton">
            <span class="cM-spriteBase cN-buttonCarat">
            </span>
            <a href="" role="link">Secondary 1</a>
          </li>
          <li class="cN-primaryNavSecondaryOption cN-linkButton">
            <span class="cM-spriteBase cN-buttonCarat">
            </span>
            <a href="" role="link">Secondary 2</a>
          </li>
          <li class="cN-primaryNavSecondaryOption cN-linkButton">
            <span class="cM-spriteBase cN-buttonCarat">
            </span>
            <a href="" role="link">Secondary 3</a>
          </li>
        </ul>
        <div class="cF-disclaimer">
          DISCLAIMER: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum,
          quam ac blandit commondo. ipsum ligula semper libero, vel omare.
        </div>
        <div class="cM-appClear">
        </div>
      </form>
      <form id="recapForm" class="cF-appInput cF-appInputV2 cF-fullPageApp">
        <div class="cH-formHeader cH-recapConfirmHeader">
          <h2 class="cH-appHeadline">
            Example Recap Form
          </h2>
          <div class="cH-subHeader cH-headerCopy cM-lastElementVertical">
            <span class="cH-copyText">
              Please confirm your details
            </span>
          </div>
          <div class="cM-ieBottomMarginFix">
          </div>
        </div>
        <div class="cM-dottedDivider cH-recapConfirmHeaderDivider">
        </div>
        <fieldset>
          <div class="cF-sideBySide cF-recapConfirm">
            <div class="cF-fromToSection">
              <div class="cF-element cF-elementText">
                <label for="r_fromAccount" tabindex="0">
                  From Account:
                </label>
                <span id="r_fromAccount">
                  Dolor Sit Amet Checking Account - 2234
                </span>
              </div>
              <div class="cF-element cF-elementText cM-lastElementVertical">
                <label for="r_toAccount" tabindex="0">
                  To Account:
                </label>
                <span id="r_toAccount">
                  Joe's Checking Account - 2345
                </span>
              </div>
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_beneficiaryName" tabindex="0">
                Beneficiary Name:
              </label>
              <span id="r_beneficiaryName">
                Joe Smith
              </span>
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_nickName" tabindex="0">
                Nickname:
              </label>
              <span id="r_nickName">
                Joben
              </span>
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_accountNumber" tabindex="0">
                Account Number:
              </label>
              <span id="r_accountNumber">
                $100.00
              </span>
            </div>
            <div class="cF-element cF-elementText cF-lastElementVertical">
              <label for="r_beneficiaryEmail" tabindex="0">
                Beneficiary Email:
              </label>
              <span id="r_beneficiaryEmail">
                email@domain.com
              </span>
            </div>
            <div class="cM-dottedDivider cM-recapConfirmDivider">
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_amount" tabindex="0">
                Amount:
              </label>
              <span id="r_amount">
                $100.00
              </span>
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_date" tabindex="0">
                Date:
              </label>
              <span id="r_date">
                02/28/2013
              </span>
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_freq" tabindex="0">
                Frequency:
              </label>
              <span id="r_freq">
                Weekly
              </span>
            </div>
            <div class="cF-element cF-elementText cM-lastElementVertical">
              <label for="r_repeatUntil" tabindex="0">
                Repeat Until:
              </label>
              <span id="r_repeatUntil">
                12 transfers have been made
              </span>
            </div>
            <div class="cM-dottedDivider cM-recapConfirmDivider">
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_purpose" tabindex="0">
                Purpose:
              </label>
              <span id="r_purpose">
                Loan
              </span>
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_note" tabindex="0">
                Personal Note:
              </label>
              <span id="r_note">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
                sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                voluptatem sequi nesciunt.
              </span>
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_email" tabindex="0">
                E-mail:
              </label>
              <span id="r_email">
                guy@domain.com
              </span>
            </div>
          </div>
        </fieldset>
        <div class="cM-dottedDivider cF-navDivider">
        </div>
        <ul class="cN-primaryNav cN-primaryNavLeft">
          <li>
            <a class="cM-spriteBase cN-colorBGBlueButton" href="" role="link">PRIMARY</a>
          </li>
          <li class="cN-primaryNavSecondaryOption cN-linkButton">
            <span class="cM-spriteBase cN-buttonCarat">
            </span>
            <a href="" role="link">Secondary 1</a>
          </li>
        </ul>
        <div class="cF-disclaimer">
          DISCLAIMER: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum,
          quam ac blandit commondo. ipsum ligula semper libero, vel omare.
        </div>
        <div class="cM-appClear">
        </div>
      </form>
      <form id="confirmForm" class="cF-appInput cF-appInputV2 cF-fullPageApp">
        <div class="cH-formHeader cH-recapConfirmHeader">
          <h2 class="cH-appHeadline">
            Example Confirm Form
          </h2>
          <div class="cH-subHeader cM-iconMessage cH-confirmHeader">
            <span class="cM-spriteBase cM-checkIcon">
            </span>
            <span class="cM-iconMessageText">
              You have successfully transferred to: Joe's Checking Account - 2345
            </span>
          </div>
          <div class="cH-subHeader cH-headerCopy cH-confirmHeader cM-lastElementVertical">
            <span class="cH-copyText">
              Confirmation Number: CA22SE24QH
            </span>
          </div>
          <div class="cM-ieBottomMarginFix">
          </div>
        </div>
        <div class="cM-dottedDivider cH-recapConfirmHeaderDivider">
        </div>
        <fieldset>
          <div class="cF-sideBySide cF-recapConfirm">
            <div class="cF-fromToSection">
              <div class="cF-element cF-elementText">
                <label for="r_fromAccount" tabindex="0">
                  From Account:
                </label>
                <span id="r_fromAccount">
                  Dolor Sit Amet Checking Account - 2234
                </span>
              </div>
              <div class="cF-element cF-elementText cM-lastElementVertical">
                <label for="r_toAccount" tabindex="0">
                  To Account:
                </label>
                <span id="r_toAccount">
                  Joe's Checking Account - 2345
                </span>
              </div>
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_beneficiaryName" tabindex="0">
                Beneficiary Name:
              </label>
              <span id="r_beneficiaryName">
                Joe Smith
              </span>
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_nickName" tabindex="0">
                Nickname:
              </label>
              <span id="r_nickName">
                Joben
              </span>
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_accountNumber" tabindex="0">
                Account Number:
              </label>
              <span id="r_accountNumber">
                $100.00
              </span>
            </div>
            <div class="cF-element cF-elementText cF-lastElementVertical">
              <label for="r_beneficiaryEmail" tabindex="0">
                Beneficiary Email:
              </label>
              <span id="r_beneficiaryEmail">
                email@domain.com
              </span>
            </div>
            <div class="cM-dottedDivider cM-recapConfirmDivider">
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_amount" tabindex="0">
                Amount:
              </label>
              <span id="r_amount">
                $100.00
              </span>
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_date" tabindex="0">
                Date:
              </label>
              <span id="r_date">
                02/28/2013
              </span>
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_freq" tabindex="0">
                Frequency:
              </label>
              <span id="r_freq">
                Weekly
              </span>
            </div>
            <div class="cF-element cF-elementText cM-lastElementVertical">
              <label for="r_repeatUntil" tabindex="0">
                Repeat Until:
              </label>
              <span id="r_repeatUntil">
                12 transfers have been made
              </span>
            </div>
            <div class="cM-dottedDivider cM-recapConfirmDivider">
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_purpose" tabindex="0">
                Purpose:
              </label>
              <span id="r_purpose">
                Loan
              </span>
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_note" tabindex="0">
                Personal Note:
              </label>
              <span id="r_note">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
                sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                voluptatem sequi nesciunt.
              </span>
            </div>
            <div class="cF-element cF-elementText">
              <label for="r_email" tabindex="0">
                E-mail:
              </label>
              <span id="r_email">
                guy@domain.com
              </span>
            </div>
          </div>
        </fieldset>
        <div class="cM-dottedDivider cF-navDivider">
        </div>
        <ul class="cN-primaryNav cN-primaryNavLeft">
          <li>
            <a class="cM-spriteBase cN-colorBGBlueButton" href="" role="link">PRIMARY</a>
          </li>
          <li class="cN-primaryNavSecondaryOption cN-linkButton">
            <span class="cM-spriteBase cN-buttonCarat">
            </span>
            <a href="" role="link">Secondary 1</a>
          </li>
        </ul>
        <div class="cF-disclaimer">
          DISCLAIMER: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum,
          quam ac blandit commondo. ipsum ligula semper libero, vel omare.
        </div>
        <div class="cM-appClear">
        </div>
      </form>
    </div>
  </body>

</html>

Preparation code output

Example Input Form

Example Error Message. We cannot process this transaction because you do not have enough money.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Body Copy Link 1 . Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Body Copy Link 2 . All fields required
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
This is some extra text
This is some extra text tooltip example
USD
USD
USD
This is some extra text tooltip example
Joe's Checking
Example text 2
Example long text: 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
Radio Choice List:
Check Choice:
Mixed Choice with Labels:
USD
USD
Mixed choice with adjacent text:
USD
will be sent to your payee. tooltip! another tooltip!
USD
Mixed choice with adjacent text:
USD
tooltip! another tooltip!
USD
DISCLAIMER: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, quam ac blandit commondo. ipsum ligula semper libero, vel omare.
DISCLAIMER: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, quam ac blandit commondo. ipsum ligula semper libero, vel omare.

Example Recap Form

Please confirm your details
Dolor Sit Amet Checking Account - 2234
Joe's Checking Account - 2345
Joe Smith
Joben
$100.00
email@domain.com
$100.00
02/28/2013
Weekly
12 transfers have been made
Loan
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
guy@domain.com
DISCLAIMER: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, quam ac blandit commondo. ipsum ligula semper libero, vel omare.

Example Confirm Form

You have successfully transferred to: Joe's Checking Account - 2345
Confirmation Number: CA22SE24QH
Dolor Sit Amet Checking Account - 2234
Joe's Checking Account - 2345
Joe Smith
Joben
$100.00
email@domain.com
$100.00
02/28/2013
Weekly
12 transfers have been made
Loan
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
guy@domain.com
DISCLAIMER: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, quam ac blandit commondo. ipsum ligula semper libero, vel omare.

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
no attr
var test1 = jQuery('input');
pending…
attr
var test2 = jQuery('input[type=text]');
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment