2007-10-16 03:19:38 +00:00
|
|
|
<!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>
|
|
|
|
|
|
2007-10-16 05:11:42 +00:00
|
|
|
<p id="inline_test" onclick="Event.stop(event); $(this).passed();"><strong>click</strong> to ensure generic Event methods work on inline handlers</p>
|
|
|
|
|
|
2007-10-16 03:19:38 +00:00
|
|
|
<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>
|
|
|
|
|
|
2009-02-28 16:07:08 +00:00
|
|
|
<p id="mouseenter"><code>mouseenter</code> test</p>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
$('mouseenter').observe('click', function() {
|
|
|
|
|
$('mouseenter').insert("<br />carefully mouse over the word 'mouseenter', then outside of the box entirely");
|
|
|
|
|
$('mouseenter').observe('mouseenter', function(event) {
|
|
|
|
|
this.failed();
|
|
|
|
|
$('mouseenter').stopObserving();
|
|
|
|
|
});
|
|
|
|
|
$('mouseenter').observe('mouseleave', function(event) {
|
|
|
|
|
if ($(event.relatedTarget).descendantOf($('mouseenter'))) {
|
|
|
|
|
$('mouseenter').failed();
|
|
|
|
|
} else $('mouseenter').passed();
|
|
|
|
|
|
|
|
|
|
$('mouseenter').stopObserving();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
2007-10-16 03:19:38 +00:00
|
|
|
<p id="addunload">Add unload events</p>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
$('addunload').observe('click', function(e){
|
2009-02-22 05:27:18 +00:00
|
|
|
if (this._done) return;
|
2007-10-16 03:19:38 +00:00
|
|
|
|
|
|
|
|
window.onunload = function(){ alert('inline unload fired!') }
|
2009-02-22 05:27:18 +00:00
|
|
|
Event.observe(window, 'unload', function(event){
|
|
|
|
|
if (!event.target) {
|
|
|
|
|
alert('FAILURE: event.target should not be null!');
|
|
|
|
|
}
|
|
|
|
|
alert('observed unload fired!')
|
|
|
|
|
});
|
2007-10-16 03:19:38 +00:00
|
|
|
|
|
|
|
|
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>
|
