| <html> |
| <head> |
| <title>TouchScreen Example Test</title> |
| <style> |
| #touchtarget { |
| width: 100px; |
| height: 100px; |
| background: blue; |
| } |
| #console { |
| position: fixed; |
| background-color: cyan; |
| } |
| #posts { |
| position: fixed; |
| background-color: magenta; |
| left: 35em; |
| } |
| #ipsum { |
| width: 60%; |
| position: absolute; |
| right: 1em; |
| top: 1em; |
| height: 60%; |
| overflow: auto; |
| border: 1px solid #000; |
| padding: 1em; |
| } |
| </style> |
| <script type="text/javascript" src="/touchtest.js"></script> |
| </head> |
| |
| <body> |
| <div id="touchtarget"></div> |
| <input type="button" id="btn" value="button"/> |
| <a href="/exit">Stop server</a> |
| <div id="console"></div> |
| <div id="ipsum"> |
| <p>1. |
| 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. Duis aute irure dolor in reprehenderit in voluptate |
| velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint |
| occaecat cupidatat non proident, sunt in culpa qui officia deserunt |
| mollit anim id est laborum. |
| </p> |
| <p>2. |
| 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. Duis aute irure dolor in reprehenderit in voluptate |
| velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint |
| occaecat cupidatat non proident, sunt in culpa qui officia deserunt |
| mollit anim id est laborum. |
| </p> |
| <p>3. |
| 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. Duis aute irure dolor in reprehenderit in voluptate |
| velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint |
| occaecat cupidatat non proident, sunt in culpa qui officia deserunt |
| mollit anim id est laborum. |
| </p> |
| <p>4. |
| 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. Duis aute irure dolor in reprehenderit in voluptate |
| velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint |
| occaecat cupidatat non proident, sunt in culpa qui officia deserunt |
| mollit anim id est laborum. |
| </p> |
| <p>5. |
| 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. Duis aute irure dolor in reprehenderit in voluptate |
| velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint |
| occaecat cupidatat non proident, sunt in culpa qui officia deserunt |
| mollit anim id est laborum. |
| </p> |
| <p>6. |
| 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. Duis aute irure dolor in reprehenderit in voluptate |
| velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint |
| occaecat cupidatat non proident, sunt in culpa qui officia deserunt |
| mollit anim id est laborum. |
| </p> |
| <p>7. |
| 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. Duis aute irure dolor in reprehenderit in voluptate |
| velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint |
| occaecat cupidatat non proident, sunt in culpa qui officia deserunt |
| mollit anim id est laborum. |
| </p> |
| <p>8. |
| 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. Duis aute irure dolor in reprehenderit in voluptate |
| velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint |
| occaecat cupidatat non proident, sunt in culpa qui officia deserunt |
| mollit anim id est laborum. |
| </p> |
| <p>9. |
| 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. Duis aute irure dolor in reprehenderit in voluptate |
| velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint |
| occaecat cupidatat non proident, sunt in culpa qui officia deserunt |
| mollit anim id est laborum. |
| </p> |
| </div> |
| <script> |
| // See the W3C draft on touch events |
| // http://www.w3.org/TR/touch-events/ |
| // And this test page for examples |
| // http://www.quirksmode.org/m/tests/touch.html |
| |
| window.DEBUG = true; //for the debug() function to print to console |
| var eventCount = 0; |
| var eventList = []; |
| var eventTypes = [ |
| 'click', |
| 'touchstart', |
| 'scroll' |
| ]; |
| |
| /** |
| * This function is registered as an event handler for all the events in |
| * eventTypes array on the ipsum div. |
| */ |
| function eventHandler(e) { |
| eventCount += 1; |
| eventList.push(e.type); |
| debug(e.type); |
| } |
| |
| /** |
| * This is an onClick event handler for the 'touchtarget' blue square. Clicking |
| * on the blue square is used as a signal for ending the test, deciding on the |
| * outcome and reporting it back to the server. |
| */ |
| function onLastClick(e) { |
| var status = 'FAIL'; |
| if (eventCount > 0) |
| status = 'PASS'; |
| reportStatus(status); |
| } |
| |
| /** |
| * This function runs as a callback after the server finishes replaying the |
| * gesture(s). |
| */ |
| function afterReplay() { |
| debug('Replay done'); |
| } |
| |
| // Register event handlers |
| divIpsum = document.getElementById('ipsum'); |
| |
| for (var i = 0; i < eventTypes.length; i++) |
| divIpsum.addEventListener(eventTypes[i], eventHandler, false); |
| |
| divSquare = document.getElementById('touchtarget'); |
| divSquare = addEventListener('click', onLastClick, false); |
| |
| // Ask the server to replay gestures |
| debug('Replaying gesture'); |
| replayGesture('scroll_both click1', afterReplay); |
| |
| </script> |
| </body> |
| </html> |
