<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Prototype functional test file</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="../../dist/prototype.js" type="text/javascript"></script> <style type="text/css" media="screen"> /* <![CDATA[ */ body { margin:1em 2em; padding:0; font-size:0.8em } hr { width:31.2em; margin:1em 0; text-align:left } p { width:30em; margin:0.5em 0; padding:0.3em 0.6em; color:#222; background:#eee; border:1px solid silver; } .subtest { margin-top:-0.5em } .passed { color:green; border-color:olive } .failed { color:firebrick; border-color:firebrick } .button { padding:0.2em 0.4em; background:#ccc; border:1px solid #aaa } #log { position:absolute; left:35em; top:5em; width:20em; font-size:13px !important } h2 { font:normal 1.1em Verdana,Arial,sans-serif; font-style:italic; color:gray; margin-top:-1.2em } h2 *, h2 a:visited { color:#444 } h2 a:hover { color:blue } a:visited { color:blue } a:hover { color:red } /* ]]> */ </style> <script type="text/javascript"> Element.addMethods({ passed: function(el, message) { el = $(el); el.className = 'passed'; (el.down('span') || el).update(message || 'Test passed!'); }, failed: function(el, message) { el = $(el); el.className = 'failed'; (el.down('span') || el).update(message || 'Test failed'); } }); function log(obj) { var line, all = []; for (prop in obj) { if (typeof obj[prop] == 'function' || /^[A-Z]|[XY]$/.test(prop)) continue; line = prop + ": " + Object.inspect(obj[prop]); all.push(line.escapeHTML()); } $('log').update(all.join('<br />')); } </script> </head> <body> <h1>Prototype functional tests for the Event module</h1> <div id="log">log empty</div> <p id="basic">A basic event test - <strong>click here</strong></p> <p id="basic_remove" class="subtest"><strong>click</strong> to stop observing the first test</p> <p id="inline_test" onclick="Event.stop(event); $(this).passed();"><strong>click</strong> to ensure generic Event methods work on inline handlers</p> <script type="text/javascript"> var basic_callback = function(e){ $('basic').passed(); if ($('basic_remove')) $('basic_remove').show() else $('basic').failed() log(e); } $('basic').observe('click', basic_callback) $('basic_remove').observe('click', function(e){ el = $('basic') el.passed('This test should now be inactive (try clicking)') el.stopObserving('click') $('basic_remove').remove() log(e); }).hide() </script> <p id="basic2"><strong>Scope</strong> test - scope of the handler should be this element</p> <script type="text/javascript"> $('basic2').observe('click', function(e) { if(this === window) $('basic2').failed('Window scope! (needs scope correction)'); else this.passed(); log(e); }); </script> <p id="basic3"><strong>Event object</strong> test - should be present as a first argument</p> <script type="text/javascript"> $('basic3').observe('click', function(evt) { el = $('basic3'); if (typeof evt != 'object') this.failed('Expected event object for first argument'); else this.passed('Good first argument'); log(evt); }); </script> <p><a href="#wrong" id="hijack">Hijack link test</a> (preventDefault)</p> <script type="text/javascript"> $('hijack').observe('click', function(e){ el = $(this.parentNode); log(e); // this makes it fail?!? e.preventDefault(); setTimeout(function() { if (window.location.hash == '#wrong') el.failed('Hijack failed (<a href="' + window.location.toString().replace(/#.+$/, '') + '">remove the fragment</a>)') else el.passed(); }, 50) }) </script> <hr /> <p>Mouse click: <span class="button" id="left">left</span> <span class="button" id="middle">middle</span> <span class="button" id="right">right</span></p> <script type="text/javascript"> $w('left middle right').each(function(button) { Event.observe(button, 'mousedown', function(e) { if (Event['is' + this.id.capitalize() + 'Click'](e)) this.passed('Squeak!') else this.failed('OH NO!'); log(e); }); }); </script> <p id="context">Context menu event (tries to prevent default)</p> <script type="text/javascript"> $('context').observe('contextmenu', function(e){ this.passed(); Event.stop(e); log(e); }) </script> <p id="target">Event.element() test</p> <script type="text/javascript"> $('target').observe('click', function(e) { if (e.element() == this && e.target == this) this.passed(); else this.failed(); log(e); }); </script> <p id="currentTarget"><span>Event.currentTarget test</span></p> <script type="text/javascript"> $('currentTarget').observe('click', function(e){ if(e.currentTarget !== this) this.failed(); else this.passed(); log(e); }) </script> <p id="findElement"><span>Event.findElement() test</span></p> <script type="text/javascript"> $('findElement').observe('click', function(e){ if(e.findElement('p') == this && e.findElement('body') == document.body && e.findElement('foo') == null) this.passed(); else this.failed(); log(e); }) </script> <div id="container"><p id="stop"><strong>Stop propagation</strong> test (bubbling)</p></div> <script type="text/javascript"> $('stop').observe('click', function(e){ e.stop(); this.passed(); log(e); }) $('container').observe('click', function(e){ $('stop').failed(); log(e); }) </script> <div> <p id="keyup_log"><strong>Keyup</strong> test - focus on the textarea and type</p> <textarea id="keyup" class="subtest"></textarea> </div> <script type="text/javascript"> $('keyup').observe('keyup', function(e){ el = $('keyup_log'); el.passed('Key captured: the length is ' + $('keyup').value.length); log(e); }) </script> <p id="bind"><code>bindAsEventListener()</code> test</p> <script type="text/javascript"> $('bind').observe('click', function(e, str, arr){ el = $('bind') try { if (arguments.length != 3) throw arguments.length + ' arguments: ' + $A(arguments).inspect() if (str != 'foo') throw 'wrong string: ' + str if (arr.constructor != Array) throw '3rd parameter is not an array' el.passed(); } catch (err) { el.failed(err.toString()) } log(e); }.bindAsEventListener(document.body, 'foo', [1,2,3])) </script> <p id="obj_inspect"><code>Object.inspect(event)</code> test</p> <script type="text/javascript"> $('obj_inspect').observe('click', function(e){ el = $('obj_inspect') try { el.passed(Object.inspect(e)) } catch (err) { el.failed('Failed! Error thrown') } log(e); }) </script> <p id="addunload">Add unload events</p> <script type="text/javascript"> $('addunload').observe('click', function(e){ if (this._done) return window.onunload = function(){ alert('inline unload fired!') } Event.observe(window, 'unload', function(){ alert('observed unload fired!') }) this.update('Registered two unload events, one inline ("onunload") and one regular - try to refresh, both should fire') this._done = true log(e); }) </script> </body> </html>