OLD | NEW |
1 <!-- | 1 <!-- |
2 * Copyright 2014 The Chromium Authors. All rights reserved. Use of this | 2 * Copyright 2014 The Chromium Authors. All rights reserved. Use of this |
3 * source code is governed by a BSD-style license that can be found in the | 3 * source code is governed by a BSD-style license that can be found in the |
4 * LICENSE file. | 4 * LICENSE file. |
5 --> | 5 --> |
6 <html> | 6 <html> |
7 <head> | 7 <head> |
8 <title>Automation Tests - Mixin attributes</title> | 8 <title>Automation Tests - Attributes</title> |
9 </head> | 9 </head> |
10 <body> | 10 <body> |
11 <!-- activedescendant mixin, owns default mixin--> | 11 <!-- activedescendant attribute, owns default attribute--> |
12 <input type="text" aria-activedescendant="opt6" aria-readonly="true" | 12 <input type="text" aria-activedescendant="opt6" aria-readonly="true" |
13 aria-owns="combobox-list" aria-autocomplete="list" role="combobox" | 13 aria-autocomplete="list" role="combobox" |
14 id="combobox-edit"> | 14 id="combobox-edit"> |
15 <ul aria-expanded="true" role="listbox" id="combobox-list"> | 15 <ul aria-expanded="true" role="listbox" id="combobox-list"> |
16 <li role="option" id="opt1">Alabama</li> | 16 <li role="option" id="opt1">Alabama</li> |
17 <li role="option" id="opt2">Alaska</li> | 17 <li role="option" id="opt2">Alaska</li> |
18 <li role="option" id="opt3">American Samoa</li> | 18 <li role="option" id="opt3">American Samoa</li> |
19 <li role="option" id="opt4">Arizona</li> | 19 <li role="option" id="opt4">Arizona</li> |
20 <li role="option" id="opt5">Arkansas</li> | 20 <li role="option" id="opt5">Arkansas</li> |
21 <li role="option" id="opt6">California</li> | 21 <li role="option" id="opt6">California</li> |
22 <li role="option" id="opt7">Colorado</li> | 22 <li role="option" id="opt7">Colorado</li> |
23 </ul> | 23 </ul> |
24 | 24 |
25 <!-- link mixins --> | 25 <!-- link attributes --> |
26 <a href="about://blank" id="real-link">Real link</a> | 26 <a href="about://blank" id="real-link">Real link</a> |
27 <div role="link" id="link-role">ARIA link</div> | 27 <div role="link" id="link-role">ARIA link</div> |
28 | 28 |
29 <!-- editable text mixins --> | 29 <!-- editable text attributes --> |
30 <input type="text" value="Text input" id="text-input"></input> | 30 <input type="text" value="Text input" aria-label="text-input" id="text-input">
</input> |
31 <textarea id="textarea">Textarea</textarea> | 31 <textarea aria-label="textarea">Textarea</textarea> |
32 <div tabindex="0" contenteditable role="textbox" id="textbox-role"> | 32 <div tabindex="0" contenteditable role="textbox" aria-label="textbox-role"> |
33 Textbox | 33 Textbox |
34 </div> | 34 </div> |
35 | 35 |
36 <script> | 36 <script> |
37 document.querySelector('#text-input').setSelectionRange(2, 8); | 37 document.querySelector('#text-input').setSelectionRange(2, 8); |
38 </script> | 38 </script> |
39 | 39 |
40 <!-- range mixins --> | 40 <!-- range attributes --> |
41 <input type="range" id="range-input" max="5" value="4"></input> | 41 <input type="range" aria-label="range-input" max="5" value="4"></input> |
42 <div tabindex="0" role="slider" aria-valuemin="1" aria-valuemax="10" | 42 <div tabindex="0" role="slider" aria-valuemin="1" aria-valuemax="10" |
43 aria-valuenow="7" aria-valuetext="seven stars" id="slider-role"></div> | 43 aria-valuenow="7" aria-valuetext="seven stars" |
| 44 aria-label="slider-role"></div> |
44 <div tabindex="0" role="spinbutton" aria-valuemin="1" aria-valuemax="31" | 45 <div tabindex="0" role="spinbutton" aria-valuemin="1" aria-valuemax="31" |
45 aria-valuenow="14" id="spinbutton-role"></div> | 46 aria-valuenow="14" id="spinbutton-role"></div> |
46 <div tabindex="0" role="progressbar" aria-valuemin="0" aria-valuenow="0.9" | 47 <div tabindex="0" role="progressbar" aria-valuemin="0" aria-valuenow="0.9" |
47 aria-valuemax="1.0" id="progressbar-role"></div> | 48 aria-valuemax="1.0" aria-label="progressbar-role"></div> |
48 <div tabindex="0" role="scrollbar" aria-valuemin="0" aria-valuenow="0" | 49 <div tabindex="0" role="scrollbar" aria-valuemin="0" aria-valuenow="0" |
49 aria-valuemax="1.0" aria-orientation="vertical" aria-controls="main" | 50 aria-valuemax="1.0" aria-orientation="vertical" aria-controls="main" |
50 id="scrollbar-role"></div> | 51 id="scrollbar-role"></div> |
51 | 52 |
52 <div id="main">Content for scrollbar to control</div> | 53 <div id="main" aria-label="main">Content for scrollbar to control</div> |
53 | 54 |
54 <!-- table and cell mixins --> | 55 <!-- table and cell attributes --> |
55 <table id="table" role="grid"> | 56 <table id="table" role="grid"> |
56 <tr role="row"> | 57 <tr role="row"> |
57 <td role="cell">Cell spanning one column</td> | 58 <td role="cell">Cell spanning one column</td> |
58 <td role="cell">Cell spanning one column</td> | 59 <td role="cell">Cell spanning one column</td> |
59 <td role="cell">Cell spanning one column</td> | 60 <td role="cell">Cell spanning one column</td> |
60 <tr role="row"> | 61 <tr role="row"> |
61 <td colspan="2" role="cell">Cell spanning two columns</td> | 62 <td colspan="2" role="cell">Cell spanning two columns</td> |
62 <td rowspan="2" role="cell">Cell spanning two rows</td> | 63 <td rowspan="2" role="cell">Cell spanning two rows</td> |
63 </tr> | 64 </tr> |
64 <tr role="row"> | 65 <tr role="row"> |
65 <td role="cell">Cell spanning one column</td> | 66 <td role="cell">Cell spanning one column</td> |
66 <td role="cell">Cell spanning one column</td> | 67 <td role="cell">Cell spanning one column</td> |
67 </tr> | 68 </tr> |
68 </table> | 69 </table> |
69 | 70 |
70 | 71 |
71 </body> | 72 </body> |
72 </html> | 73 </html> |
OLD | NEW |