10 files changed, 663 insertions, 0 deletions
diff --git a/tests/unit/checkboxradio/checkboxradio.html b/tests/unit/checkboxradio/checkboxradio.html
new file mode 100644
index 000000000..92db788c5
--- /dev/null
+++ b/tests/unit/checkboxradio/checkboxradio.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Checkboxradio Test Suite</title>
+
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../lib/css.js" data-modules="core button checkboxradio"></script>
+	<script src="../../lib/bootstrap.js" data-widget="button"></script>
+</head>
+<body>
+
+<div id="qunit"></div>
+<div id="qunit-fixture">
+
+<div id="radio0">
+	<input type="radio" id="radio01" name="radio" checked="checked"><label for="radio01">Choice 1</label>
+	<input type="radio" id="radio02" name="radio"><label for="radio02">Choice 2</label>
+	<input type="radio" id="radio03" name="radio"><label for="radio03">Choice 3</label>
+</div>
+<form id="form1">
+	<div id="radio1">
+		<input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
+		<input type="radio" id="radio12" name="radio"><label for="radio12">Choice 2</label>
+		<input type="radio" id="radio13" name="radio" checked="checked"><label for="radio13">Choice 3</label>
+	</div>
+</form>
+<form id="form2">
+	<div id="radio2">
+		<input type="radio" id="radio21" name="radio"><label for="radio21">Choice 1</label>
+		<input type="radio" id="radio22" name="radio"><label for="radio22">Choice 2</label>
+		<input type="radio" id="radio23" name="radio" checked="checked"><label for="radio23">Choice 3</label>
+	</div>
+</form>
+<form>
+	<div id="radio3">
+		<input type="radio" id="radio31" name="data['Page']['parse']"><label for="radio31">Choice 1</label>
+		<input type="radio" id="radio32" name="data['Page']['parse']" checked="checked"><label for="radio32">Choice 2</label>
+		<input type="radio" id="radio33" name="data['Page']['parse']"><label for="radio33">Choice 3</label>
+	</div>
+</form>
+
+<input type="checkbox" id="check"><label for="check">Toggle</label>
+<input type="checkbox" id="check2"><label for="check2">Checkbox</label>
+<label for="checkbox-method-refresh" id="checkbox-method-refresh-label">checkbox refresh</label>
+<input type="checkbox" id="checkbox-method-refresh"/>
+<label for="checkbox-method-destroy" class="bar" id="checkbox-method-destroy-label">checkbox refresh</label>
+<input type="checkbox" class="foo" id="checkbox-method-destroy"/>
+<label for="checkbox-method-disable">checkbox refresh</label>
+<input type="checkbox" class="foo" id="checkbox-method-disable"/>
+
+<label for="radio-method-refresh" id="radio-method-refresh-label">radio refresh</label>
+<input type="radio" id="radio-method-refresh"/>
+<label for="radio-method-destroy" class="bar" id="radio-method-destroy-label">radio refresh</label>
+<input type="radio" class="foo" id="radio-method-destroy"/>
+<label for="radio-method-disable">radio refresh</label>
+<input type="radio" class="foo" id="radio-method-disable"/>
+
+<label for="checkbox-option-disabled">checkbox disabled</label>
+<input type="checkbox" class="foo" id="checkbox-option-disabled"/>
+<label for="checkbox-option-icon">checkbox icon</label>
+<input type="checkbox" class="foo" id="checkbox-option-icon"/>
+<label for="checkbox-option-label">checkbox label<input type="checkbox" class="foo" id="checkbox-option-label"/></label>
+<label>
+	<input type="checkbox" id="label-with-no-for"/>
+</label>
+</div>
+</body>
+</html>
diff --git a/tests/unit/checkboxradio/common.js b/tests/unit/checkboxradio/common.js
new file mode 100644
index 000000000..6a739435f
--- /dev/null
+++ b/tests/unit/checkboxradio/common.js
@@ -0,0 +1,22 @@
+define( [
+	"lib/common",
+	"ui/checkboxradio"
+], function( common ) {
+
+common.testWidget( "checkboxradio", {
+	noDefaultElement: true,
+	defaults: {
+		disabled: null,
+		label: null,
+		icon: true,
+		classes: {
+			"ui-checkboxradio-label": "ui-corner-all",
+			"ui-checkboxradio-icon": "ui-corner-all"
+		},
+
+		// Callbacks
+		create: null
+	}
+});
+
+} );
diff --git a/tests/unit/checkboxradio/core.js b/tests/unit/checkboxradio/core.js
new file mode 100644
index 000000000..e70ca58c1
--- /dev/null
+++ b/tests/unit/checkboxradio/core.js
@@ -0,0 +1,102 @@
+define( [
+	"jquery",
+	"ui/checkboxradio"
+], function( $ ) {
+
+module( "Checkboxradio: core" );
+test( "Checkbox - Initial class structure", function( assert ) {
+	expect( 2 );
+	var input = $("#check"),
+		label = $("label[for=check]");
+
+	input.checkboxradio();
+	assert.hasClasses( input, "ui-helper-hidden-accessible ui-checkboxradio" );
+	assert.hasClasses( label, "ui-button ui-widget ui-checkboxradio-label ui-corner-all" );
+});
+
+test( "Radios - Initial class structure", function( assert ) {
+	expect( 6 );
+	var inputs = $( "#radio0 input" ),
+		labels = $( "#radio0 label" );
+
+	inputs.checkboxradio();
+	inputs.each( function() {
+		assert.hasClasses( this, "ui-helper-hidden-accessible" );
+	});
+	labels.each( function() {
+		assert.hasClasses( this, "ui-button" );
+	});
+});
+
+asyncTest( "Ensure checked after single click on checkbox label button", function( assert ) {
+	expect( 2 );
+
+	$( "#check2" ).checkboxradio().change( function() {
+		var label = $( this ).checkboxradio( "widget" );
+		ok( this.checked, "checked ok" );
+
+		assert.hasClasses( label, "ui-state-active" );
+	});
+
+	// Support: Opera
+	// Opera doesn't trigger a change event when this is done synchronously.
+	// This seems to be a side effect of another test, but until that can be
+	// tracked down, this delay will have to do.
+	setTimeout(function() {
+		$( "#check2" ).checkboxradio( "widget" ).simulate( "click" );
+		start();
+	});
+});
+
+test( "Checkbox creation requires a label, and finds it in all cases", function( assert ) {
+	expect( 7 );
+	var groups = [
+		"<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>",
+		"<span><input type='checkbox' id='t7092b'><label for='t7092b'></label></span>",
+		"<span><span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label></span>",
+		"<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>",
+		"<span><input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>",
+		"<span><label><input type='checkbox' id='t7092f'></label></span>",
+		"<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>"
+	];
+
+	$.each( groups, function( index, markup ) {
+		var group = $( markup );
+
+		group.find( "input[type=checkbox]" ).checkboxradio();
+		assert.hasClasses( group.find( "label" ), "ui-button" );
+	} );
+});
+
+test( "Calling checkboxradio on an unsupported element throws an error", function( assert ) {
+	expect( 2 );
+	var error = new Error( "Can't create checkboxradio on element.nodeName=div and element.type=undefined" );
+	assert.raises(
+		function() {
+			$( "<div>" ).checkboxradio();
+		},
+		error,
+		"Proper error thrown"
+	);
+	error = new Error( "Can't create checkboxradio on element.nodeName=input and element.type=button" );
+	assert.raises(
+		function() {
+			$( "<input type='button'>" ).checkboxradio();
+		},
+		error,
+		"Proper error thrown"
+	);
+});
+test( "Calling checkboxradio on an input with no label throws an error", function( assert ) {
+	expect( 1 );
+	var error = new Error( "No label found for checkboxradio widget" );
+	assert.raises(
+		function() {
+			$( "<input type='checkbox'>" ).checkboxradio();
+		},
+		error,
+		"Proper error thrown"
+	);
+});
+
+} );
diff --git a/tests/unit/checkboxradio/events.js b/tests/unit/checkboxradio/events.js
new file mode 100644
index 000000000..e5909a386
--- /dev/null
+++ b/tests/unit/checkboxradio/events.js
@@ -0,0 +1,113 @@
+define( [
+	"jquery",
+	"ui/checkboxradio"
+], function( $ ) {
+
+module( "Checkboxradio: events" );
+
+asyncTest( "form reset / click", function( assert ) {
+	expect( 35 );
+
+	var radios = [
+			$( "#radio11" ).checkboxradio(),
+			$( "#radio12" ).checkboxradio(),
+			$( "#radio13" ).checkboxradio()
+		],
+		widgets = [
+			radios[ 0 ].checkboxradio( "widget" ),
+			radios[ 1 ].checkboxradio( "widget" ),
+			radios[ 2 ].checkboxradio( "widget" )
+		],
+		form1 = $( "#form1" ),
+		form2 = $( "#form2" );
+
+	// Checkes that only the specified radio is checked in the group
+	function assertChecked( checked ) {
+		$.each( widgets, function( index ) {
+			var method = index === checked ? "hasClasses" : "lacksClasses";
+
+			assert[ method ]( widgets[ index ], "ui-checkboxradio-checked ui-state-active" );
+		} );
+	}
+
+	// Checks the form count on each form
+	function assertFormCount( count ) {
+		equal( form1.data( "uiCheckboxradioCount" ), count, "Form1 has a count of " + count );
+		equal( form2.data( "uiCheckboxradioCount" ), 3, "Form2 has a count of 3" );
+	}
+
+	// Run the tests
+	function testForms( current, start ) {
+		assertChecked( 2 );
+
+		if ( !start && current !== 0 ) {
+			radios[ current - 1 ].checkboxradio( "destroy" );
+		}
+
+		assertFormCount( 3 - current );
+
+		radios[ current ].prop( "checked", true );
+		radios[ current ].trigger( "change" );
+		assertChecked( current );
+
+		form1.trigger( "reset" );
+	}
+
+	// Recoursivly run the tests in a setTimeout with call back for the resets
+	function iterate( i ) {
+		setTimeout( function() {
+			if ( i < 3 ) {
+				testForms( i );
+				iterate( i + 1 );
+				return;
+			}
+			radios[ 2 ].checkboxradio( "destroy" );
+			assertChecked( false );
+			start();
+		} );
+	}
+
+	$( "#form2 input" ).checkboxradio();
+
+	// Check the starting state then kick everything off
+	testForms( 0, true );
+	iterate( 0 );
+
+} );
+
+asyncTest(
+	"Resetting a checkbox's form should refresh the visual state of the checkbox",
+	function( assert ) {
+		expect( 2 );
+		var form = $( "<form>" +
+			"<label for='c1'></label><input id='c1' type='checkbox' checked>" +
+			"</form>" ),
+			checkbox = form.find( "input[type=checkbox]" ).checkboxradio(),
+			widget = checkbox.checkboxradio( "widget" );
+
+		checkbox.prop( "checked", false ).checkboxradio( "refresh" );
+		assert.lacksClasses( widget, "ui-state-active" );
+
+		form.get( 0 ).reset();
+
+		setTimeout(function() {
+			assert.hasClasses( widget, "ui-state-active" );
+			start();
+		}, 1 );
+	}
+);
+
+asyncTest( "Checkbox shows focus when using keyboard navigation", function( assert ) {
+		expect( 2 );
+		var check = $( "#check" ).checkboxradio(),
+			label = $( "label[for='check']" );
+		assert.lacksClasses( label, "ui-state-focus" );
+		check.focus();
+		setTimeout(function() {
+			assert.hasClasses( label, "ui-state-focus" );
+			start();
+		} );
+	}
+);
+
+} );
diff --git a/tests/unit/checkboxradio/methods.js b/tests/unit/checkboxradio/methods.js
new file mode 100644
index 000000000..f189c9eea
--- /dev/null
+++ b/tests/unit/checkboxradio/methods.js
@@ -0,0 +1,97 @@
+define( [
+	"jquery",
+	"ui/checkboxradio"
+], function( $ ) {
+
+module( "Checkboxradio: methods" );
+
+$.each( [ "checkbox", "radio" ], function( index, value ) {
+	test( value + ": refresh", function( assert ) {
+		var widget, icon,
+			checkbox = value === "checkbox",
+			input = $( "#" + value + "-method-refresh" );
+
+		expect( checkbox ? 11 : 8 );
+
+		input.checkboxradio();
+
+		widget = input.checkboxradio( "widget" );
+		icon = widget.find( ".ui-icon" );
+		strictEqual( icon.length, 1,
+			"There is initally one icon" );
+
+		icon.remove();
+		input.checkboxradio( "refresh" );
+		icon = widget.find( ".ui-icon" );
+		strictEqual( icon.length, 1,
+			"Icon is recreated on refresh if absent" );
+		assert.hasClasses( icon, "ui-icon-blank" );
+		if ( checkbox ) {
+			assert.lacksClasses( icon, "ui-icon-check" );
+		}
+		assert.lacksClasses( widget, "ui-checkboxradio-checked" );
+
+		input.prop( "checked", true );
+		input.checkboxradio( "refresh" );
+		if ( checkbox ) {
+			assert.hasClasses( icon, "ui-icon-check" );
+		}
+		assert[ !checkbox ? "hasClasses" : "lacksClasses" ]( icon, "ui-icon-blank" );
+		assert.hasClasses( widget, "ui-checkboxradio-checked" );
+
+		input.prop( "checked", false );
+		input.checkboxradio( "refresh" );
+		assert.hasClasses( icon, "ui-icon-blank" );
+		if ( checkbox ) {
+			assert.lacksClasses( icon, "ui-icon-check" );
+		}
+		assert.lacksClasses( widget, "ui-checkboxradio-checked" );
+	});
+
+	test( value + ": destroy", function( assert ){
+		expect( 1 );
+		assert.domEqual( "#" + value + "-method-destroy", function() {
+			$( "#" + value + "-method-destroy" ).checkboxradio().checkboxradio( "destroy" );
+		});
+	});
+
+	test( value + ": disable / enable", function( assert ) {
+		expect( 4 );
+		var input = $( "#" + value + "-method-disable" ),
+			widget = input.checkboxradio().checkboxradio( "widget" );
+
+		input.checkboxradio( "disable" );
+		assert.hasClasses( widget, "ui-state-disabled" );
+		strictEqual( input.is( ":disabled" ), true,
+			value + " is disabled when disable is called" );
+
+		input.checkboxradio( "enable" );
+		assert.lacksClasses( widget, "ui-state-disabled" );
+		strictEqual( input.is( ":disabled" ), false,
+			value + " has disabled prop removed when enable is called" );
+	});
+
+	test(  value + ": widget returns the label", function(){
+		var input = $( "#" + value + "-method-refresh" ),
+			label = $( "#" + value + "-method-refresh-label" );
+
+		expect( 1 );
+
+		input.checkboxradio();
+		strictEqual( input.checkboxradio( "widget" )[ 0 ], label[ 0 ],
+			"widget method returns label" );
+	});
+
+} );
+
+test( "Input wrapped in a label preserved on refresh", function() {
+	var input = $( "#label-with-no-for" ).checkboxradio(),
+		element = input.checkboxradio( "widget" );
+
+	expect( 1 );
+
+	input.checkboxradio( "refresh" );
+	strictEqual( input.parent()[ 0 ], element[ 0 ], "Input preserved" );
+});
+
+} );
diff --git a/tests/unit/checkboxradio/options.js b/tests/unit/checkboxradio/options.js
new file mode 100644
index 000000000..11bd072ca
--- /dev/null
+++ b/tests/unit/checkboxradio/options.js
@@ -0,0 +1,189 @@
+define( [
+	"jquery",
+	"ui/checkboxradio"
+], function( $ ) {
+
+module( "Checkboxradio: options" );
+
+function assertDisabled( checkbox, assert ) {
+	assert.hasClasses( checkbox.checkboxradio( "widget" ), "ui-state-disabled",
+		"label gets ui-state-disabled" );
+	strictEqual( checkbox.is( ":disabled" ), true,
+		"checkbox is disabled" );
+}
+
+function assertEnabled( checkbox, assert ) {
+	assert.lacksClasses(  checkbox.checkboxradio( "widget" ), "ui-state-disabled",
+		"label has ui-state-disabled removed when disabled set to false" );
+	strictEqual( checkbox.is( ":disabled" ), false,
+		"checkbox has disabled prop removed when disabled set to false" );
+}
+
+test( "disabled", function( assert ) {
+	var checkbox = $( "#checkbox-option-disabled" );
+	expect( 6 );
+	checkbox.checkboxradio({
+		disabled: true
+	});
+
+	assertDisabled( checkbox, assert );
+
+	checkbox.checkboxradio( "option", "disabled", false );
+	assertEnabled( checkbox, assert  );
+
+	checkbox.checkboxradio( "option", "disabled", true );
+	assertDisabled( checkbox, assert );
+});
+test( "disabled - prop true on init", function( assert ) {
+	expect( 2 );
+	var checkbox = $( "#checkbox-option-disabled" );
+
+	checkbox.prop( "disabled", true );
+	checkbox.checkboxradio();
+
+	assertDisabled( checkbox, assert );
+});
+test( "disabled - explicit null value, checks the DOM", function( assert ) {
+	expect( 2 );
+	var checkbox = $( "#checkbox-option-disabled" );
+
+	checkbox.prop( "disabled", true );
+	checkbox.checkboxradio({
+		disabled: null
+	});
+	assertDisabled( checkbox, assert );
+});
+
+function assertNoIcon( checkbox ) {
+	strictEqual( checkbox.checkboxradio( "widget" ).find( "span.ui-icon" ).length, 0,
+		"Label does not contain an icon" );
+}
+function assertIcon( checkbox, icon, assert ) {
+	var iconElement = checkbox.checkboxradio( "widget" ).find( ".ui-icon" );
+
+	icon = icon || "blank";
+	strictEqual( iconElement.length, 1,
+		"Label contains icon" );
+	assert.hasClasses( iconElement, "ui-checkboxradio-icon ui-corner-all ui-icon " +
+		"ui-icon-background ui-icon-" + icon,
+		"Icon has proper classes" );
+}
+test( "icon - false on init", function() {
+	var checkbox = $( "#checkbox-option-icon" );
+
+	expect( 1 );
+
+	checkbox.checkboxradio({ icon: false });
+	assertNoIcon( checkbox );
+});
+
+test( "icon - default unchecked", function( assert ) {
+	var checkbox = $( "#checkbox-option-icon" );
+
+	expect( 2 );
+
+	checkbox.checkboxradio();
+	assertIcon( checkbox, false, assert );
+});
+test( "icon", function( assert ){
+	var checkbox = $( "#checkbox-option-icon" );
+
+	expect( 8 );
+
+	checkbox.prop( "checked", true );
+
+	checkbox.checkboxradio();
+	assertIcon( checkbox, "check", assert );
+
+	checkbox.checkboxradio( "option", "icon", false );
+	assertNoIcon( checkbox );
+
+	checkbox.checkboxradio( "option", "icon", true );
+	assertIcon( checkbox, "check", assert );
+
+	checkbox.checkboxradio( "option", "icon", false );
+	assertNoIcon( checkbox );
+
+	checkbox.prop( "checked", false ).checkboxradio( "refresh" );
+	checkbox.checkboxradio( "option", "icon", true );
+	assertIcon( checkbox, false, assert );
+
+});
+
+test( "label - default", function() {
+	var checkbox = $( "#checkbox-option-label" ),
+		widget;
+
+	expect( 2 );
+
+	checkbox.checkboxradio();
+	widget = checkbox.checkboxradio( "widget" );
+	strictEqual( checkbox.checkboxradio( "option", "label" ),
+		"checkbox label", "When no value passed on create text from dom is used for option" );
+	strictEqual( widget.text(),
+		" checkbox label", "When no value passed on create text from dom is used in dom" );
+});
+test( "label - explicit value", function() {
+	expect( 5 );
+	var checkbox = $( "#checkbox-option-label" ).checkboxradio({
+			label: "foo"
+		}),
+		widget = checkbox.checkboxradio( "widget" ),
+		icon = widget.find( ".ui-icon" ),
+		iconSpace = widget.find( ".ui-checkboxradio-icon-space" );
+
+	strictEqual( checkbox.checkboxradio( "option", "label" ),
+		"foo", "When value is passed on create value is used for option" );
+	strictEqual( widget.text(),
+		" foo", "When value is passed on create value is used in dom" );
+	strictEqual( icon.length, 1,
+		"Icon is preserved when label is set on init when wrapped in label" );
+	strictEqual( iconSpace.length, 1,
+		"Icon space is preserved when label is set on init when wrapped in label" );
+	strictEqual( $( "#checkbox-option-label" ).length, 1,
+		"Element is preserved when label is set on init when wrapped in label" );
+});
+
+test( "label - explicit null value", function() {
+	var checkbox = $( "#checkbox-option-label" ),
+		widget;
+
+	expect( 2 );
+
+	// We are testing the default here because the default null is a special value which means to check
+	// the DOM, so we need to make sure this happens correctly checking the options should never return
+	// null. It should always be true or false
+	checkbox.checkboxradio({
+		label: null
+	});
+	widget = checkbox.checkboxradio( "widget" );
+	strictEqual( checkbox.checkboxradio( "option", "label" ),
+		"checkbox label", "When null is passed on create text from dom is used for option" );
+	strictEqual( widget.text(),
+		" checkbox label", "When null is passed on create text from dom is used in dom" );
+
+});
+
+test( "label", function() {
+	var checkbox = $( "#checkbox-option-label" ),
+		widget;
+
+	expect( 4 );
+
+	checkbox.checkboxradio();
+	widget = checkbox.checkboxradio( "widget" );
+	checkbox.checkboxradio( "option", "label", "bar" );
+	strictEqual( checkbox.checkboxradio( "option", "label" ),
+		"bar", "When value is passed value is used for option" );
+	strictEqual( widget.text(),
+		" bar", "When value is passed value is used in dom" );
+
+	checkbox.checkboxradio( "option", "label", null );
+	strictEqual( checkbox.checkboxradio( "option", "label" ),
+		"bar", "When null is passed text from dom is used for option" );
+	strictEqual( widget.text(),
+		" bar", "When null is passed text from dom is used in dom" );
+
+});
+
+} );
diff --git a/tests/unit/controlgroup/controlgroup_core.js b/tests/unit/controlgroup/controlgroup_core.js
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/tests/unit/controlgroup/controlgroup_core.js
diff --git a/tests/unit/index.html b/tests/unit/index.html
index 418cfd34c..fe358cb6c 100644
--- a/tests/unit/index.html
+++ b/tests/unit/index.html
@@ -40,6 +40,7 @@
 			<li><a href="accordion/accordion.html">Accordion</a></li>
 			<li><a href="autocomplete/autocomplete.html">Autocomplete</a></li>
 			<li><a href="button/button.html">Button</a></li>
+			<li><a href="checkboxradio/checkboxradio.html">Checkboxradio</a></li>
 			<li><a href="datepicker/datepicker.html">Datepicker</a></li>
 			<li><a href="dialog/dialog.html">Dialog</a></li>
 			<li><a href="menu/menu.html">Menu</a></li>
diff --git a/tests/visual/checkboxradio/checkboxradio.html b/tests/visual/checkboxradio/checkboxradio.html
new file mode 100644
index 000000000..634e8df81
--- /dev/null
+++ b/tests/visual/checkboxradio/checkboxradio.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI - Checkboxes</title>
+	<link rel="stylesheet" href="../../../themes/base/all.css">
+	<script src="../../../external/jquery/jquery.js"></script>
+	<script src="../../../ui/core.js"></script>
+	<script src="../../../ui/widget.js"></script>
+	<script src="../../../ui/button.js"></script>
+	<script src="../../../ui/checkboxradio.js"></script>
+	<script>
+	$(function() {
+		var checkboxes = $( "form input" ).checkboxradio();
+
+		$( ".controls input, .controls select" ).on( "change keyup", function() {
+			var option = $( this ).attr( "name" ),
+				value = $( this ).val();
+
+			if ( $( this ).is( "[type=checkbox]" ) ) {
+				value = $( this ).is( ":checked" );
+			}
+			if ( option != "label" || value !== "" ) {
+				checkboxes.checkboxradio( "option", option, value );
+			}
+		});
+		$( ".controls > button" ).click( function() {
+			if ( this.id !== "create" ) {
+				checkboxes.checkboxradio( this.id );
+			} else {
+				checkboxes.checkboxradio();
+			}
+		});
+	});
+	</script>
+	<style>
+	#format { margin-top: 2em; }
+	</style>
+</head>
+<body>
+<h2>
+	Easy way to toggle through various combinations of options and states to make sure non lead to
+	a broken appearence.
+</h2>
+<div class="controls">
+	<button id="create">Create</button>
+	<button id="destroy">Destroy</button>
+	<button id="enable">Enable</button>
+	<button id="disable">Disable</button>
+	<button id="refresh">Refresh</button>
+	<input type="checkbox" id="icon" name="icon" checked><label for="icon">Icon</label>
+	<input type="checkbox" id="disabled" name="disabled"><label for="disabled">Disabled</label>
+	<label for="label">Label<input type="text" id="label" name="label"></label>
+</div>
+<form>
+	<input type="checkbox" id="checkbox-1">
+	<label for="checkbox-1">Checkbox widget sample</label>
+	<input type="checkbox" id="checkbox-2"><label for="checkbox-2">Checkbox widget sample</label>
+
+	<label for="radio-1">Radio widget sample <input type="radio" id="radio-1" name="radio" checked></label>
+	<input type="radio" id="radio-2" name="radio"><label for="radio-2"><span>boom</span>Radio widget sample 2</label>
+	<button type="reset">Reset</button>
+</form>
+</body>
+</html>
diff --git a/tests/visual/index.html b/tests/visual/index.html
index 98753c827..39168c9f4 100644
--- a/tests/visual/index.html
+++ b/tests/visual/index.html
@@ -31,6 +31,11 @@
 			<li><a href="button/performance.html">Performance</a></li>
 		</ul>
 
+		<h2>Checkboxradio</h2>
+		<ul>
+			<li><a href="checkboxradio/checkboxradio.html">General</a></li>
+		</ul>
+
 		<h2>Dialog</h2>
 		<ul>
 			<li><a href="dialog/animated.html">Animations</a></li>