| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, user-scalable=no"> |
| <title>Tap Handled Test</title> |
| <style> |
| #static, |
| #editable, |
| #consumes, |
| #ignores { |
| border: 1px solid black; |
| height: 30px; |
| } |
| </style> |
| </head> |
| <body> |
| <span id="static">Static text</span><br> |
| <input id="editable" type="text" value="Editable Text"> |
| <div id="consumes">Consumes clicks</div> |
| <div id="ignores">Ignores clicks</div> |
| <div>United States <span id="intelligence">Intelligence</span></div> |
| <div>United <span id="states">States</span> Intelligence</div> |
| <div>United <span id="states-near">StatesNear</span> <span id="intelligence-logged-event-id">Intelligence</span></div> |
| <!-- These three spans should be close to each other so that taps from one to |
| to the next are within our "near" threshold (RETAP_DISTANCE_SQUARED_DP) |
| to enable retap. --> |
| <div><span id="search">Search</span> <span id="term">Term</span><br/> |
| <span id="resolution">Resolution</span></div> |
| <!-- This element is used to trigger language translation. --> |
| <div><span id="german">Deutsche</span></div> |
| <form action="demo_form.asp"> |
| <label for="male">Male</label> |
| <input type="radio" name="sex" id="male" value="male"><br> |
| <label for="female">Female</label> |
| <input type="radio" name="sex" id="female" value="female"><br> |
| <input type="checkbox" name="checkbox" id="checkbox_id" value="value"> |
| <label for="checkbox_id">Checkbox</label> |
| <br> |
| <input id="button" type="button" value="Button"><br> |
| </form> |
| <div id="question-mark">?</div> |
| <div>United <span id="states-far">States</span> Intelligence</div> |
| <div>United States Intelligence</div> |
| <div><span id="role" role="button">LAUNCH</span> psuedo button</div> |
| <div><span id="aria" aria-haspopup="true">POPUP</span> test</div> |
| <div><span id="focusable" tabindex="1">FOCUS-ABLE</span> test</div> |
| <div>United States Intelligence</div> |
| <div>United States Intelligence</div> |
| <div>United States Intelligence</div> |
| <script> |
| function consume(e) { |
| console.log('consuming event ' + e.type); |
| e.preventDefault(); |
| } |
| document.getElementById('consumes').addEventListener('mousedown', consume); |
| </script> |
| </body> |
| </html> |
