Add the test pages for Multiple Section support.
This commit is contained in:
Sean Lee
Родитель
ddc589fbdd
Коммит
cd9808a236
|
|
@ -17,8 +17,15 @@
|
|||
<li><a href="basic_cc_2.html">credit card form with <select></a></li>
|
||||
<li><a href="layout.html">Address fields with different width</a></li>
|
||||
<li><a href="layout_cc.html">Credit card fields with different width</a></li>
|
||||
<li><a href="billing_shipping.html">Includes "billing" and "shipping"</a></li>
|
||||
<li><a href="two_forms.html">Two forms</a></li>
|
||||
<li>
|
||||
<p>Multiple Section</p>
|
||||
<ul>
|
||||
<li><a href="multiple_sections/section_autocomplete.html">Section Test Page [AutoComplete]</a></li>
|
||||
<li><a href="multiple_sections/section_heuristics.html">Section Test Page [Heuristics]</a></li>
|
||||
<li><a href="billing_shipping.html">Includes "billing" and "shipping"</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3>Utils</h3>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Form Autofill Demo Page</title>
|
||||
<link type="text/css" rel="stylesheet" href="style.css">
|
||||
<script type="text/javascript" src="../base.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Form Autofill - Section Test Page [Autocomplete]</h1>
|
||||
<form>
|
||||
<div class="section section-a">
|
||||
<label>Name: <input id="name" autocomplete="name"></label><br/>
|
||||
<label>Organization: <input id="organization" autocomplete="organization"></label><br/>
|
||||
</div>
|
||||
|
||||
<div class="section section-b">
|
||||
<label>Street Address: <input id="street-address-a" autocomplete="shipping street-address"></label><br/>
|
||||
<label>Address Level 2: <input id="address-level2-a" autocomplete="shipping address-level2"></label><br/>
|
||||
<label>Address Level 1: <input id="address-level1-a" autocomplete="shipping address-level1"></label><br/>
|
||||
<label>Postal Code: <input id="postal-code-a" autocomplete="shipping postal-code"></label><br/>
|
||||
<label>Country: <input id="country-a" autocomplete="shipping country"></label><br/>
|
||||
</div>
|
||||
|
||||
<div class="section section-c">
|
||||
<label>Street Address: <input id="street-address-b" autocomplete="billing street-address"></label><br/>
|
||||
<label>Address Level 2: <input id="address-level2-b" autocomplete="billing address-level2"></label><br/>
|
||||
<label>Address Level 1: <input id="address-level1-b" autocomplete="billing address-level1"></label><br/>
|
||||
<label>Postal Code: <input id="postal-code-b" autocomplete="billing postal-code"></label><br/>
|
||||
<label>Country: <input id="country-b" autocomplete="billing country"></label><br/>
|
||||
</div>
|
||||
|
||||
<div class="section section-d">
|
||||
<label>Street Address: <input id="street-address-c" autocomplete="section-my street-address"></label><br/>
|
||||
<label>Address Level 2: <input id="address-level2-c" autocomplete="section-my address-level2"></label><br/>
|
||||
<label>Address Level 1: <input id="address-level1-c" autocomplete="section-my address-level1"></label><br/>
|
||||
<label>Postal Code: <input id="postal-code-c" autocomplete="section-my postal-code"></label><br/>
|
||||
<label>Country: <input id="country-c" autocomplete="section-my country"></label><br/>
|
||||
</div>
|
||||
|
||||
<div class="section section-a">
|
||||
<p>This section is recognized as Section A as well since both of them are without the section part in autocomplete attribute.</p>
|
||||
<label>Telephone: <input id="tel-a" autocomplete="work tel"></label><br/>
|
||||
<label>Email: <input id="email-a" autocomplete="work email"></label><br/>
|
||||
</div>
|
||||
|
||||
<div class="section section-e">
|
||||
<p>This section contains the duplicated fields, so the two fields can not be filled even they have the different `contactType`.</p>
|
||||
<label>Telephone: <input id="tel-b" autocomplete="home tel"></label><br/>
|
||||
<label>Email: <input id="email-b" autocomplete="home email"></label><br/>
|
||||
</div>
|
||||
|
||||
<div class="section section-f">
|
||||
<label>Card Holder Name: <input autocomplete="section-card1 cc-name"></label><br/>
|
||||
<label>Card Number: <input autocomplete="section-card1 cc-number"></label><br/>
|
||||
<label>Exp Month: <input autocomplete="section-card1 cc-exp-month"></label><br/>
|
||||
<label>Exp Year: <input autocomplete="section-card1 cc-exp-year"></label><br/>
|
||||
</div>
|
||||
|
||||
<div class="section section-g">
|
||||
<label>Card Holder Name: <input autocomplete="section-card2 cc-name"></label><br/>
|
||||
<label>Card Number: <input autocomplete="section-card2 cc-number"></label><br/>
|
||||
<label>Exp Month: <input autocomplete="section-card2 cc-exp-month"></label><br/>
|
||||
<label>Exp Year: <input autocomplete="section-card2 cc-exp-year"></label><br/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="submit" value="Submit">
|
||||
<button type="reset">Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Form Autofill Demo Page</title>
|
||||
<link type="text/css" rel="stylesheet" href="style.css">
|
||||
<script type="text/javascript" src="../base.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Form Autofill - Section Test Page [Heuristics]</h1>
|
||||
<form>
|
||||
<div class="section section-a">
|
||||
<label>Name: <input autocomplete="name"></label><br/>
|
||||
<label>Organization: <input autocomplete="organization"></label><br/>
|
||||
</div>
|
||||
|
||||
<div class="section section-a">
|
||||
<label>Street Address: <input autocomplete="street-address"></label><br/>
|
||||
<label>Address Level 2: <input autocomplete="address-level2"></label><br/>
|
||||
<label>Address Level 1: <input autocomplete="address-level1"></label><br/>
|
||||
<label>Postal Code: <input autocomplete="postal-code"></label><br/>
|
||||
<label>Country: <input autocomplete="country"></label><br/>
|
||||
</div>
|
||||
|
||||
<div class="section section-b">
|
||||
<label>Street Address: <input autocomplete="street-address"></label><br/>
|
||||
<label>Address Level 2: <input autocomplete="address-level2"></label><br/>
|
||||
<label>Address Level 1: <input autocomplete="address-level1"></label><br/>
|
||||
<label>Postal Code: <input autocomplete="postal-code"></label><br/>
|
||||
<label>Country: <input autocomplete="country"></label><br/>
|
||||
</div>
|
||||
|
||||
<div class="section section-c">
|
||||
<label>Street Address: <input autocomplete="street-address"></label><br/>
|
||||
<label>Address Level 2: <input autocomplete="address-level2"></label><br/>
|
||||
<label>Address Level 1: <input autocomplete="address-level1"></label><br/>
|
||||
<label>Postal Code: <input autocomplete="postal-code"></label><br/>
|
||||
<label>Country: <input autocomplete="country"></label><br/>
|
||||
</div>
|
||||
|
||||
<div class="section section-d">
|
||||
<label>Telephone: <input autocomplete="work tel"></label><br/>
|
||||
<label>Email: <input autocomplete="work email"></label><br/>
|
||||
</div>
|
||||
|
||||
<div class="section section-e">
|
||||
<p>This section contains the duplicated fields, so the two fields can not be filled even they have the different `contactType`.</p>
|
||||
<label>Telephone: <input autocomplete="home tel"></label><br/>
|
||||
<label>Email: <input autocomplete="home email"></label><br/>
|
||||
</div>
|
||||
|
||||
<div class="section section-f">
|
||||
<label>Card Holder Name: <input autocomplete="cc-name"></label><br/>
|
||||
<label>Card Number: <input autocomplete="cc-number"></label><br/>
|
||||
<label>Exp Month: <input autocomplete="cc-exp-month"></label><br/>
|
||||
<label>Exp Year: <input autocomplete="cc-exp-year"></label><br/>
|
||||
</div>
|
||||
|
||||
<div class="section section-g">
|
||||
<label>Card Holder Name: <input autocomplete="cc-name"></label><br/>
|
||||
<label>Card Number: <input autocomplete="cc-number"></label><br/>
|
||||
<label>Exp Month: <input autocomplete="cc-exp-month"></label><br/>
|
||||
<label>Exp Year: <input autocomplete="cc-exp-year"></label><br/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="submit" value="Submit">
|
||||
<button type="reset">Reset</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
.section {
|
||||
width: 400px;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px;
|
||||
border: 2px gray solid;
|
||||
}
|
||||
.section::before {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.section-a {
|
||||
background-color: #ffeeff;
|
||||
}
|
||||
.section-a::before {
|
||||
content: "Section-A";
|
||||
}
|
||||
|
||||
.section-b {
|
||||
background-color: #ffffee;
|
||||
}
|
||||
.section-b::before {
|
||||
content: "Section-B";
|
||||
}
|
||||
|
||||
.section-c {
|
||||
background-color: #eeffff;
|
||||
}
|
||||
.section-c::before {
|
||||
content: "Section-C";
|
||||
}
|
||||
|
||||
.section-d {
|
||||
background-color: #eeeeff;
|
||||
}
|
||||
.section-d::before {
|
||||
content: "Section-D";
|
||||
}
|
||||
|
||||
.section-e {
|
||||
background-color: #ffeeee;
|
||||
}
|
||||
.section-e::before {
|
||||
content: "Section-E";
|
||||
}
|
||||
|
||||
.section-f {
|
||||
background-color: #eeffee;
|
||||
}
|
||||
.section-f::before {
|
||||
content: "Section-F";
|
||||
}
|
||||
|
||||
.section-g {
|
||||
background-color: #ffaaff;
|
||||
}
|
||||
.section-g::before {
|
||||
content: "Section-G";
|
||||
}
|
||||
|
||||
.section-h {
|
||||
background-color: #ffaaff;
|
||||
}
|
||||
.section-h::before {
|
||||
content: "Section-H";
|
||||
}
|
||||
|
||||
Загрузка…
Ссылка в новой задаче