diff options
Diffstat (limited to 'dom/tests/mochitest/ajax/prototype/test/functional/event.html')
| -rw-r--r-- | dom/tests/mochitest/ajax/prototype/test/functional/event.html | 243 |
1 files changed, 243 insertions, 0 deletions
diff --git a/dom/tests/mochitest/ajax/prototype/test/functional/event.html b/dom/tests/mochitest/ajax/prototype/test/functional/event.html new file mode 100644 index 0000000000..526e711f9a --- /dev/null +++ b/dom/tests/mochitest/ajax/prototype/test/functional/event.html @@ -0,0 +1,243 @@ +<!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> |