OLD | NEW |
1 <!-- | 1 <!-- |
2 * Copyright 2015 The Chromium Authors. All rights reserved. Use of this | 2 * Copyright 2015 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 - Tree change</title> | 8 <title>Automation Tests - Tree change</title> |
9 </head> | 9 </head> |
10 <body> | 10 <body> |
11 <ul id="list"> | 11 <ul id="list"> |
12 <li>One</li> | 12 <li tabindex="-1">One</li> |
13 <li>Two</li> | 13 <li tabindex="-1">Two</li> |
14 </ul> | 14 </ul> |
15 <button id="add">Add</button> | 15 <button id="add">Add</button> |
16 <button id="remove">Remove</button> | 16 <button id="remove">Remove</button> |
17 <button id="live">Live</button> | 17 <button id="live">Live</button> |
18 | 18 |
19 <div id="dead_region1"></div> | 19 <div tabindex="-1" id="dead_region1"></div> |
20 <div id="live_region" aria-live="polite"></div> | 20 <div tabindex="-1" id="live_region" aria-live="polite"></div> |
21 <div id="dead_region2"></div> | 21 <div tabindex="-1" id="dead_region2"></div> |
22 | 22 |
23 <script> | 23 <script> |
24 document.getElementById('add').addEventListener('click', function() { | 24 document.getElementById('add').addEventListener('click', function() { |
25 var li = document.createElement('li'); | 25 var li = document.createElement('li'); |
| 26 li.tabIndex = -1; |
26 li.innerText = 'New'; | 27 li.innerText = 'New'; |
27 document.getElementById('list').appendChild(li); | 28 document.getElementById('list').appendChild(li); |
28 }); | 29 }); |
29 document.getElementById('remove').addEventListener('click', function() { | 30 document.getElementById('remove').addEventListener('click', function() { |
30 var list = document.getElementById('list'); | 31 var list = document.getElementById('list'); |
31 list.removeChild(list.lastElementChild); | 32 list.removeChild(list.lastElementChild); |
32 }); | 33 }); |
33 document.getElementById('live').addEventListener('click', function() { | 34 document.getElementById('live').addEventListener('click', function() { |
34 var p1 = document.createElement('p'); | 35 var p1 = document.createElement('p'); |
35 p1.innerText = 'Dead'; | 36 p1.innerText = 'Dead'; |
36 document.getElementById('dead_region1').appendChild(p1); | 37 document.getElementById('dead_region1').appendChild(p1); |
37 | 38 |
38 var p = document.createElement('p'); | 39 var p = document.createElement('p'); |
39 p.innerText = 'Live'; | 40 p.innerText = 'Live'; |
40 document.getElementById('live_region').appendChild(p); | 41 document.getElementById('live_region').appendChild(p); |
41 | 42 |
42 var p2 = document.createElement('p'); | 43 var p2 = document.createElement('p'); |
43 p2.innerText = 'Dead'; | 44 p2.innerText = 'Dead'; |
44 document.getElementById('dead_region2').appendChild(p2); | 45 document.getElementById('dead_region2').appendChild(p2); |
45 }); | 46 }); |
46 </script> | 47 </script> |
47 | 48 |
48 </body> | 49 </body> |
49 </html> | 50 </html> |
OLD | NEW |