Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

379 lines (318 sloc) 12.132 kb
<!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;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
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 }
fieldset { position:absolute; left:35em; top:5em; width:400px; 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 }
.test {
}
.test span {
border: 2px solid #999;
background-color: #ddd;
padding: 2px;
}
/* ]]> */
</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>
<fieldset>
<legend>Log</legend>
<div id="log"></div>
</fieldset>
<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) {
var 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="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>
<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(event){
if (!event.target) {
alert('FAILURE: event.target should not be null!');
}
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>
<div id="delegation_container">
Event delegation
<ul>
<li>
<span class="delegation-child-1">Child 1 (click)</span>
</li>
<li>
<span class="delegation-child-2">Child 2 (mouseover)</span>
</li>
<li class="delegation-child-3">
<span>Child 3 (mouseup)</span>
</li>
</ul>
Results:
<ul id="delegation_results">
<li id="delegation_result_1">Test 1</li>
<li id="delegation_result_2">Test 2</li>
<li id="delegation_result_3">Test 3</li>
</ul>
</div>
<script type="text/javascript">
var msg = "Passed. Click to unregister.";
var clickMsg = "Now try original event again to ensure observation was stopped."
var observer1 = $('delegation_container').on('click', '.delegation-child-1', function() {
var result = $('delegation_results').down('li', 0);
result.passed(msg + " (" + ((new Date).toString())) + ")";
result.observe('click', function() {
this.update(clickMsg);
observer1.stop();
});
});
var observer2 = $(document).on('mouseover', '.delegation-child-2', function() {
var result = $('delegation_results').down('li', 1);
result.passed(msg + " (" + ((new Date).toString())) + ")";
result.observe('click', function() {
this.update(clickMsg);
observer2.stop();
});
})
var observer3 = $('delegation_container').on('mouseup', '.delegation-child-3', function() {
var result = $('delegation_results').down('li', 2);
result.passed(msg + " (" + ((new Date).toString())) + ")";
result.observe('click', function() {
this.update(clickMsg);
observer3.stop();
});
});
</script>
<p id="ie_legacy_event_support" style="display: none">
Extending event objects (click to test)
</p>
<script type="text/javascript">
Event.observe(window, 'load', function() {
// Ensures we can manually extend events in IE's legacy event system.
// IE9 supports both the legacy system and DOM L2 events, so we have to
// inspect an event object at runtime to determine if it needs to be
// extended.
if (!window.attachEvent) return;
function mouseButton(event) {
if (event.isLeftClick()) return 'left';
if (event.isRightClick()) return 'right';
if (event.isMiddleClick()) return 'middle';
return null;
}
var container = $('ie_legacy_event_support');
container.show();
container.attachEvent('onmouseup', function(event) {
if ('stop' in event) container.failed('Custom property already on event! Something weird happened!');
Event.extend(event);
log(event);
if (!('stop' in event)) {
container.failed('Event not extended!')
} else {
// Ensure mouse buttons are recognized properly, since legacy event
// objects report them in a different way.
container.passed('button pressed: ' + mouseButton(event));
}
});
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.