| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| @font-face { |
| font-family: ahem; |
| src: url(Ahem.ttf); |
| } |
| * { |
| font-family: ahem; |
| font-size: 16px; |
| } |
| #style_active:active { |
| background-color: blue; |
| } |
| :indeterminate + span { |
| background-color: blue; |
| } |
| #large { |
| font-size: 20px; |
| } |
| #small { |
| font-size: 10px; |
| } |
| </style> |
| </head> |
| <body> |
| <div style="position: absolute; left: 8px; top: 66px; width: 400px; height: 350px;"> |
| <span id="target">This has multiple listeners.</span> |
| <div id="mutate">This block gets mutated to change the DOM.</div> |
| <div id="style_active">This block gets red if active</div> |
| <input id="checkbox" type="checkbox"><span>indeterminate checkbox</span><br> |
| <img id="image" width="10" height="10" src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="><br> |
| <span id="editable" contenteditable="true">editable</span><br> |
| <span id="focusable" tabindex="1">focusable</span><br> |
| <span id="large">large</span><br> |
| <span id="small">small</span><br> |
| </div> |
| |
| <p style="position: absolute; left: 8px; top: 400px; width: 400px; height: 30px;"><span id="bottom">Bottom.</span></p> |
| |
| <script> |
| var test; |
| var mutations = 0; |
| // Remembers which test to run. |
| function setTest(whichTest) { |
| test = whichTest; |
| } |
| // Determines if we currently have a test for the given event/handler pair. |
| function hasTest(operation, handler) { |
| var candidate = operation + '-' + handler; |
| var result = test === candidate; |
| return result; |
| } |
| // Our universal event handler. Changes the page based on the stored operation. |
| function handle(event) { |
| var operation = event.type; |
| if (hasTest(operation, 'mutateDom')) { |
| mutations++; |
| mutate.textContent = 'This block HAS BEEN mutated ' + mutations + ' times!'; |
| } else if (hasTest(operation, 'mutateStyle')) { |
| mutate.style.color = mutate.style.color == "red" ? "blue" : "red"; |
| } else if (hasTest(operation, 'mutateIndeterminate')) { |
| checkbox.indeterminate ^= true; |
| } else if (hasTest(operation, 'preventDefault')) { |
| event.preventDefault(); |
| } |
| } |
| // Set up $target to have the handle() handler for all tap-related events. |
| var t = document.getElementById('target'); |
| t.addEventListener('mousedown', handle); |
| t.addEventListener('mouseup', handle); |
| t.addEventListener('click', handle); |
| </script> |
| </body> |
| </html> |
| |
