chromium/src/third_party/blink/web_tests/jquery/resources/test/delegatetest.html - manifest_repos/chromium_src - Git at Google

 <html>
     <head>
         <script src='../dist/jquery.js' type='text/javascript'></script>
         <style>
 	.red {
 	    background-color: red;
 	    border: solid 3px red;
 	}
         </style>
     </head>
     <body>
         <h2>Change Tests</h2>
         <table>
 			<tr>
 				<td>
 					Change each:
 				</td>
 				<td>
 					<select class='select_test'>
 						<option value='one'>change me 1</option>
 						<option value='two'>change me 2</option>
 						<option value='three'>change me 3</option>
 					</select>
 					<select class='select_test'>
 						<option value='one'>change me 1</option>
 						<option value='two' selected="selected">change me 2</option>
 						<option value='three'>change me 3</option>
 					</select>
 				</td>
 				<td>
 					<select class='mselect_test' multiple="multiple">
 						<option value='one'>change me 1</option>
 						<option value='two'>change me 2</option>
 						<option value='three'>change me 3</option>
 					</select>
 				</td>
 				<td>
 					<input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox1"/>
 					<label for="checkbox1">Checkbox 1</label><br/>
 					<input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/>
 					<label for="checkbox2">Checkbox 2</label><br />
 					<input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox3" disabled="disabled"/>
 					<label for="checkbox3">Checkbox 3</label>
 				</td>
 				<td>
 					<button class="button_test" name="mybutton1" id="button1">Button</button><br />
 					<button class="button_test" name="mybutton1" id="button1"><span>Button w/ child</span></button><br />
 					<button class="button_test" name="mybutton1" id="button1" disabled="disabled">Button Disabled</button><br />
 					<button class="button_test" name="mybutton1" id="button1" disabled="disabled"><span disabled="disabled">Button w/ child Dis.</span></button><br />
 				</td>
 				<td>
 					<input type="radio" class="radio_test" name="myradio" id="radio1"/>
 					<label for="radio1">Radio1</label><br/>
 					<input type="radio" class="radio_test" name="myradio" id="radio2"/>
 					<label for="radio2">Radio2</label><br />
 					<input type="radio" class="radio_test" name="myradio" id="radio3" disabled="disabled"/>
 					<label for="radio3">Radio3</label>
 				</td>
 				<td>
 					<input class="file_test" id="file1" type="file"/>
 					<td>
 						<input class='test' value='' id='input' size='10' />
 						<input class='test' value='test' id='input2' size='10' readonly="readonly" />
 					</td>
 					<td>
 						<textarea rows='2'></textarea>
 					</td>
 				</td>
 				<td>$(document).bind('change')<br />
 					$(document).bind('click')
 				</td>
 		</tr>
 	    <tr>
 	        <td>Live:</td>
 	        <td id='select' class="red">SELECT</td>
 	        <td id='mselect' class="red">MULTI</td>
 	        <td id='checkbox' class="red">CHECKBOX</td>
 			<td id='button' class="red">BUTTON</td>
 	        <td id='radio' class="red">RADIO</td>
 	        <td id='file' class="red">FILE</td>
 	        <td id='text' class="red">TEXT</td>
 	        <td id='textarea' class="red">TEXTAREA</td>
 	        <td id='boundChange' class="red">DOCUMENT</td>
 	    </tr>
 	    <tr>
 	        <td>Bind:</td>
 	        <td id='selectbind' class="red">SELECT</td>
 	        <td id='mselectbind' class="red">MULTI</td>
 	        <td id='checkboxbind' class="red">CHECKBOX</td>
 			<td id='buttonbind' class="red">BUTTON</td>
 	        <td id='radiobind' class="red">RADIO</td>
 	        <td id='filebind' class="red">FILE</td>
 	        <td id='textbind' class="red">TEXT</td>
 	        <td id='textareabind' class="red">TEXTAREA</td>
 	    </tr>
 	    <tr>
 	        <td>Focusin:</td>
 	        <td id='selectfocus' class="red">SELECT</td>
 	        <td id='mselectfocus' class="red">MULTI</td>
 	        <td id='checkboxfocus' class="red">CHECKBOX</td>
 			<td id='buttonfocus' class="red">BUTTON</td>
 	        <td id='radiofocus' class="red">RADIO</td>
 	        <td id='filefocus' class="red">FILE</td>
 	        <td id='textfocus' class="red">TEXT</td>
 	        <td id='textareafocus' class="red">TEXTAREA</td>
 	        <td id='boundFocus' class="red">DOCUMENT</td>
 	    </tr>
 	    <tr>
 	        <td>Focusout:</td>
 	        <td id='selectblur' class="red">SELECT</td>
 	        <td id='mselectblur' class="red">MULTI</td>
 	        <td id='checkboxblur' class="red">CHECKBOX</td>
 			<td id='buttonblur' class="red">BUTTON</td>
 	        <td id='radioblur' class="red">RADIO</td>
 	        <td id='fileblur' class="red">FILE</td>
 	        <td id='textblur' class="red">TEXT</td>
 	        <td id='textareablur' class="red">TEXTAREA</td>
 	        <td id='boundBlur' class="red">DOCUMENT</td>
 	    </tr>
 	    <tr>
 	        <td>Live Focus:</td>
 	        <td id='selectlfocus' class="red">SELECT</td>
 	        <td id='mselectlfocus' class="red">MULTI</td>
 	        <td id='checkboxlfocus' class="red">CHECKBOX</td>
 			<td id='buttonlfocus' class="red">BUTTON</td>
 	        <td id='radiolfocus' class="red">RADIO</td>
 	        <td id='filelfocus' class="red">FILE</td>
 	        <td id='textlfocus' class="red">TEXT</td>
 	        <td id='textarealfocus' class="red">TEXTAREA</td>
 	    </tr>
 	    <tr>
 	        <td>Live Blur:</td>
 	        <td id='selectlblur' class="red">SELECT</td>
 	        <td id='mselectlblur' class="red">MULTI</td>
 	        <td id='checkboxlblur' class="red">CHECKBOX</td>
 			<td id='buttonlblur' class="red">BUTTON</td>
 	        <td id='radiolblur' class="red">RADIO</td>
 	        <td id='filelblur' class="red">FILE</td>
 	        <td id='textlblur' class="red">TEXT</td>
 	        <td id='textarealblur' class="red">TEXTAREA</td>
 	    </tr>
 	    <tr>
 	        <td>Live Click:</td>
 	        <td id='selectlclick' class="red">SELECT</td>
 	        <td id='mselectlclick' class="red">MULTI</td>
 	        <td id='checkboxlclick' class="red">CHECKBOX</td>
 			<td id='buttonlclick' class="red">BUTTON</td>
 	        <td id='radiolclick' class="red">RADIO</td>
 	        <td id='filelclick' class="red">FILE</td>
 	        <td id='textlclick' class="red">TEXT</td>
 	        <td id='textarealclick' class="red">TEXTAREA</td>
 			<td id='boundClick' class="red">DOCUMENT</td>
 	    </tr>
         </table>
         <h2>Submit Tests</h2>
         <table>
 	<tr>
 	    <td>
 	        Submit each:
 	    </td>
 	    <td>
 	        <form action="" id="text_submit">
 		<input class='test' type='text' value='Key Return To Submit'/>
 	        </form>
 	    </td>
 	    <td>
 	        <form action="" id="password_submit">
 		<input class='test' type='password' value=''/>
 	        </form>
 	    </td>
 	    <td>
 	        <form action="" id="submit_submit">
 		<input type='submit' value="Click Me To Submit" />
 	        </form>
 	    </td>
 	    <td>$(document).bind('submit')</td>
 	</tr>
 	<tr>
 	        <td>Results:</td>
 	        <td id='textSubmit' class="red">TEXT</td>
 	        <td id='passwordSubmit' class="red">PASSWORD</td>
 	        <td id='submitSubmit' class="red">BUTTON</td>
 	        <td id='boundSubmit' class="red">DOCUMENT</td>
 	</tr>
         </table>

 	<ul id="log"></ul>

         <script type='text/javascript'>
 	jQuery.fn.addChangeClickTest = function( id, prevent ) {
 		this.bind("focusin", function(){
 			jQuery(id + "focus").blink();
 		}).bind("focusout", function(){
 			jQuery(id + "blur").blink();
 		});

 		this.bind("focus", function(){
 			jQuery(id + "lfocus").blink();
 		}).bind("blur", function(){
 			jQuery(id + "lblur").blink();
 		});

 		return this.bind("change", function(e){
 			jQuery(id + "bind").blink();
 		}).live("change", function(e){
 	   		if ( prevent ) {
 	        		e.preventDefault();
 			}

 			jQuery(id).blink();
 		}).live("click", function(e){
   			jQuery(id + "lclick").blink();
   	});
 	};


 	jQuery.fn.addSubmitTest = function( id, prevent ) {
 		return this.live("submit", function(e){
 	   		if ( prevent ) {
 	          		e.preventDefault();
 			}

 			jQuery(id).blink();
 		});
 	};

 	jQuery.fn.blink = function(){
 		return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){
          		jQuery(this).css("backgroundColor","");
 			next();
    		});
 	};

 	$(document).bind("focusin", function() {
 		jQuery("#boundFocus").blink();
 	});

 	$(document).bind("focusout", function() {
 		jQuery("#boundBlur").blink();
 	});

 	$(document).bind("click", function() {
 		jQuery("#boundClick").blink();
 	});

 	$("td.red").live("hover", function(e) {
 		if ( e.type === "mouseenter" ) {
 			$(this).css("backgroundColor","green");
 		} else {
 			$(this).css("backgroundColor","");
 		}
 	});

 	$(".select_test").addChangeClickTest("#select");
 	$(".mselect_test").addChangeClickTest("#mselect");
 	$(".checkbox_test").addChangeClickTest("#checkbox");
 	$(".radio_test").addChangeClickTest("#radio");
 	$(".file_test").addChangeClickTest("#file");
 	$('textarea').addChangeClickTest("#textarea");
 	$('#input').addChangeClickTest("#text");
 	$('button').addChangeClickTest("#button");
 	$(document).bind("change", function(){
 		jQuery("#boundChange").blink();
 	});

 	$("#text_submit").addSubmitTest("#textSubmit", true);
 	$("#password_submit").addSubmitTest("#passwordSubmit", true);
 	$("#submit_submit").addSubmitTest("#submitSubmit", true);
 	$(document).bind("submit", function(){
 		jQuery("#boundSubmit").blink();
 	});

         </script>
     </body>
 </html>
	<html>
	<head>
	<script src='../dist/jquery.js' type='text/javascript'></script>
	<style>
	.red {
	background-color: red;
	border: solid 3px red;
	}
	</style>
	</head>
	<body>
	<h2>Change Tests</h2>
	<table>
	<tr>
	<td>
	Change each:
	</td>
	<td>
	<select class='select_test'>
	<option value='one'>change me 1</option>
	<option value='two'>change me 2</option>
	<option value='three'>change me 3</option>
	</select>
	<select class='select_test'>
	<option value='one'>change me 1</option>
	<option value='two' selected="selected">change me 2</option>
	<option value='three'>change me 3</option>
	</select>
	</td>
	<td>
	<select class='mselect_test' multiple="multiple">
	<option value='one'>change me 1</option>
	<option value='two'>change me 2</option>
	<option value='three'>change me 3</option>
	</select>
	</td>
	<td>
	<input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox1"/>
	<label for="checkbox1">Checkbox 1</label><br/>
	<input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox2"/>
	<label for="checkbox2">Checkbox 2</label><br />
	<input type="checkbox" class="checkbox_test" name="mycheckbox" id="checkbox3" disabled="disabled"/>
	<label for="checkbox3">Checkbox 3</label>
	</td>
	<td>
	<button class="button_test" name="mybutton1" id="button1">Button</button><br />
	<button class="button_test" name="mybutton1" id="button1"><span>Button w/ child</span></button><br />
	<button class="button_test" name="mybutton1" id="button1" disabled="disabled">Button Disabled</button><br />
	<button class="button_test" name="mybutton1" id="button1" disabled="disabled"><span disabled="disabled">Button w/ child Dis.</span></button><br />
	</td>
	<td>
	<input type="radio" class="radio_test" name="myradio" id="radio1"/>
	<label for="radio1">Radio1</label><br/>
	<input type="radio" class="radio_test" name="myradio" id="radio2"/>
	<label for="radio2">Radio2</label><br />
	<input type="radio" class="radio_test" name="myradio" id="radio3" disabled="disabled"/>
	<label for="radio3">Radio3</label>
	</td>
	<td>
	<input class="file_test" id="file1" type="file"/>
	<td>
	<input class='test' value='' id='input' size='10' />
	<input class='test' value='test' id='input2' size='10' readonly="readonly" />
	</td>
	<td>
	<textarea rows='2'></textarea>
	</td>
	</td>
	<td>$(document).bind('change')<br />
	$(document).bind('click')
	</td>
	</tr>
	<tr>
	<td>Live:</td>
	<td id='select' class="red">SELECT</td>
	<td id='mselect' class="red">MULTI</td>
	<td id='checkbox' class="red">CHECKBOX</td>
	<td id='button' class="red">BUTTON</td>
	<td id='radio' class="red">RADIO</td>
	<td id='file' class="red">FILE</td>
	<td id='text' class="red">TEXT</td>
	<td id='textarea' class="red">TEXTAREA</td>
	<td id='boundChange' class="red">DOCUMENT</td>
	</tr>
	<tr>
	<td>Bind:</td>
	<td id='selectbind' class="red">SELECT</td>
	<td id='mselectbind' class="red">MULTI</td>
	<td id='checkboxbind' class="red">CHECKBOX</td>
	<td id='buttonbind' class="red">BUTTON</td>
	<td id='radiobind' class="red">RADIO</td>
	<td id='filebind' class="red">FILE</td>
	<td id='textbind' class="red">TEXT</td>
	<td id='textareabind' class="red">TEXTAREA</td>
	</tr>
	<tr>
	<td>Focusin:</td>
	<td id='selectfocus' class="red">SELECT</td>
	<td id='mselectfocus' class="red">MULTI</td>
	<td id='checkboxfocus' class="red">CHECKBOX</td>
	<td id='buttonfocus' class="red">BUTTON</td>
	<td id='radiofocus' class="red">RADIO</td>
	<td id='filefocus' class="red">FILE</td>
	<td id='textfocus' class="red">TEXT</td>
	<td id='textareafocus' class="red">TEXTAREA</td>
	<td id='boundFocus' class="red">DOCUMENT</td>
	</tr>
	<tr>
	<td>Focusout:</td>
	<td id='selectblur' class="red">SELECT</td>
	<td id='mselectblur' class="red">MULTI</td>
	<td id='checkboxblur' class="red">CHECKBOX</td>
	<td id='buttonblur' class="red">BUTTON</td>
	<td id='radioblur' class="red">RADIO</td>
	<td id='fileblur' class="red">FILE</td>
	<td id='textblur' class="red">TEXT</td>
	<td id='textareablur' class="red">TEXTAREA</td>
	<td id='boundBlur' class="red">DOCUMENT</td>
	</tr>
	<tr>
	<td>Live Focus:</td>
	<td id='selectlfocus' class="red">SELECT</td>
	<td id='mselectlfocus' class="red">MULTI</td>
	<td id='checkboxlfocus' class="red">CHECKBOX</td>
	<td id='buttonlfocus' class="red">BUTTON</td>
	<td id='radiolfocus' class="red">RADIO</td>
	<td id='filelfocus' class="red">FILE</td>
	<td id='textlfocus' class="red">TEXT</td>
	<td id='textarealfocus' class="red">TEXTAREA</td>
	</tr>
	<tr>
	<td>Live Blur:</td>
	<td id='selectlblur' class="red">SELECT</td>
	<td id='mselectlblur' class="red">MULTI</td>
	<td id='checkboxlblur' class="red">CHECKBOX</td>
	<td id='buttonlblur' class="red">BUTTON</td>
	<td id='radiolblur' class="red">RADIO</td>
	<td id='filelblur' class="red">FILE</td>
	<td id='textlblur' class="red">TEXT</td>
	<td id='textarealblur' class="red">TEXTAREA</td>
	</tr>
	<tr>
	<td>Live Click:</td>
	<td id='selectlclick' class="red">SELECT</td>
	<td id='mselectlclick' class="red">MULTI</td>
	<td id='checkboxlclick' class="red">CHECKBOX</td>
	<td id='buttonlclick' class="red">BUTTON</td>
	<td id='radiolclick' class="red">RADIO</td>
	<td id='filelclick' class="red">FILE</td>
	<td id='textlclick' class="red">TEXT</td>
	<td id='textarealclick' class="red">TEXTAREA</td>
	<td id='boundClick' class="red">DOCUMENT</td>
	</tr>
	</table>
	<h2>Submit Tests</h2>
	<table>
	<tr>
	<td>
	Submit each:
	</td>
	<td>
	<form action="" id="text_submit">
	<input class='test' type='text' value='Key Return To Submit'/>
	</form>
	</td>
	<td>
	<form action="" id="password_submit">
	<input class='test' type='password' value=''/>
	</form>
	</td>
	<td>
	<form action="" id="submit_submit">
	<input type='submit' value="Click Me To Submit" />
	</form>
	</td>
	<td>$(document).bind('submit')</td>
	</tr>
	<tr>
	<td>Results:</td>
	<td id='textSubmit' class="red">TEXT</td>
	<td id='passwordSubmit' class="red">PASSWORD</td>
	<td id='submitSubmit' class="red">BUTTON</td>
	<td id='boundSubmit' class="red">DOCUMENT</td>
	</tr>
	</table>

	<ul id="log"></ul>

	<script type='text/javascript'>
	jQuery.fn.addChangeClickTest = function( id, prevent ) {
	this.bind("focusin", function(){
	jQuery(id + "focus").blink();
	}).bind("focusout", function(){
	jQuery(id + "blur").blink();
	});

	this.bind("focus", function(){
	jQuery(id + "lfocus").blink();
	}).bind("blur", function(){
	jQuery(id + "lblur").blink();
	});

	return this.bind("change", function(e){
	jQuery(id + "bind").blink();
	}).live("change", function(e){
	if ( prevent ) {
	e.preventDefault();
	}

	jQuery(id).blink();
	}).live("click", function(e){
	jQuery(id + "lclick").blink();
	});
	};


	jQuery.fn.addSubmitTest = function( id, prevent ) {
	return this.live("submit", function(e){
	if ( prevent ) {
	e.preventDefault();
	}

	jQuery(id).blink();
	});
	};

	jQuery.fn.blink = function(){
	return this.css("backgroundColor","green").css("border","solid 3px green").delay(700).queue(function(next){
	jQuery(this).css("backgroundColor","");
	next();
	});
	};

	$(document).bind("focusin", function() {
	jQuery("#boundFocus").blink();
	});

	$(document).bind("focusout", function() {
	jQuery("#boundBlur").blink();
	});

	$(document).bind("click", function() {
	jQuery("#boundClick").blink();
	});

	$("td.red").live("hover", function(e) {
	if ( e.type === "mouseenter" ) {
	$(this).css("backgroundColor","green");
	} else {
	$(this).css("backgroundColor","");
	}
	});

	$(".select_test").addChangeClickTest("#select");
	$(".mselect_test").addChangeClickTest("#mselect");
	$(".checkbox_test").addChangeClickTest("#checkbox");
	$(".radio_test").addChangeClickTest("#radio");
	$(".file_test").addChangeClickTest("#file");
	$('textarea').addChangeClickTest("#textarea");
	$('#input').addChangeClickTest("#text");
	$('button').addChangeClickTest("#button");
	$(document).bind("change", function(){
	jQuery("#boundChange").blink();
	});

	$("#text_submit").addSubmitTest("#textSubmit", true);
	$("#password_submit").addSubmitTest("#passwordSubmit", true);
	$("#submit_submit").addSubmitTest("#submitSubmit", true);
	$(document).bind("submit", function(){
	jQuery("#boundSubmit").blink();
	});

	</script>
	</body>
	</html>