Merge commit 'd21ea7816e' as 'jquery-ui'

This commit is contained in:
Mark Schouten 2016-08-05 13:20:20 +02:00
commit e904a80717
629 changed files with 341074 additions and 0 deletions

View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "button" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

View file

@ -0,0 +1,79 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button Test Suite</title>
<script src="../../jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/jquery-simulate/jquery.simulate.js"></script>
<script src="../testsuite.js"></script>
<script>
TestHelpers.loadResources({
css: [ "core", "button" ],
js: [
"ui/core.js",
"ui/widget.js",
"ui/button.js"
]
});
</script>
<script src="button_common.js"></script>
<script src="button_core.js"></script>
<script src="button_events.js"></script>
<script src="button_methods.js"></script>
<script src="button_options.js"></script>
<script src="../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<div><button id="button" class="foo">Label</button></div>
<div id="radio0" style="margin-top: 2em;">
<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>
<div id="checkbox0">
<input type="checkbox" id="checkbox01" name="checkbox"><label for="checkbox01">Choice 1</label>
<input type="checkbox" id="checkbox02" name="checkbox"><label for="checkbox02">Choice 2</label>
<input type="checkbox" id="checkbox03" name="checkbox"><label for="checkbox03">Choice 3</label>
</div>
<form>
<div id="radio1" style="margin-top: 2em;">
<input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
<input type="radio" id="radio12" name="radio" checked="checked"><label for="radio12">Choice 2</label>
<input type="radio" id="radio13" name="radio"><label for="radio13">Choice 3</label>
</div>
</form>
<form>
<div id="radio2" style="margin-top: 2em;">
<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>
<div><input id="submit" type="submit" value="Label"></div>
<button id="button1">Button</button>
</div>
</body>
</html>

View file

@ -0,0 +1,14 @@
TestHelpers.commonWidgetTests( "button", {
defaults: {
disabled: null,
icons: {
primary: null,
secondary: null
},
label: null,
text: true,
// callbacks
create: null
}
});

View file

@ -0,0 +1,226 @@
/*
* button_core.js
*/
(function($) {
module("button: core");
test("checkbox", function() {
expect( 4 );
var input = $("#check"),
label = $("label[for=check]");
ok( input.is(":visible") );
ok( label.is(":not(.ui-button)") );
input.button();
ok( input.is(".ui-helper-hidden-accessible") );
ok( label.is(".ui-button") );
});
test("radios", function() {
expect( 4 );
var inputs = $("#radio0 input"),
labels = $("#radio0 label");
ok( inputs.is(":visible") );
ok( labels.is(":not(.ui-button)") );
inputs.button();
ok( inputs.is(".ui-helper-hidden-accessible") );
ok( labels.is(".ui-button") );
});
function assert(noForm, form1, form2) {
ok( $("#radio0 .ui-button" + noForm).is(".ui-state-active") );
ok( $("#radio1 .ui-button" + form1).is(".ui-state-active") );
ok( $("#radio2 .ui-button" + form2).is(".ui-state-active") );
}
test("radio groups", function() {
expect( 12 );
$("input[type=radio]").button();
assert(":eq(0)", ":eq(1)", ":eq(2)");
// click outside of forms
$("#radio0 .ui-button:eq(1)").click();
assert(":eq(1)", ":eq(1)", ":eq(2)");
// click in first form
$("#radio1 .ui-button:eq(0)").click();
assert(":eq(1)", ":eq(0)", ":eq(2)");
// click in second form
$("#radio2 .ui-button:eq(0)").click();
assert(":eq(1)", ":eq(0)", ":eq(0)");
});
test( "radio groups - ignore elements with same name", function() {
expect( 1 );
var form = $( "form:first" ),
radios = form.find( "[type=radio]" ).button(),
checkbox = $( "<input>", {
type: "checkbox",
name: radios.attr( "name" )
});
form.append( checkbox );
radios.button( "refresh" );
ok( true, "no exception from accessing button instance of checkbox" );
});
test("input type submit, don't create child elements", function() {
expect( 2 );
var input = $("#submit");
deepEqual( input.children().length, 0 );
input.button();
deepEqual( input.children().length, 0 );
});
test("buttonset", function() {
expect( 6 );
var set = $("#radio1").buttonset();
ok( set.is(".ui-buttonset") );
deepEqual( set.children(".ui-button").length, 3 );
deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 );
ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") );
ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") );
ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") );
});
test("buttonset (rtl)", function() {
expect( 6 );
var set,
parent = $("#radio1").parent();
// Set to rtl
parent.attr("dir", "rtl");
set = $("#radio1").buttonset();
ok( set.is(".ui-buttonset") );
deepEqual( set.children(".ui-button").length, 3 );
deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 );
ok( set.children("label:eq(0)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") );
ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") );
ok( set.children("label:eq(2)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") );
});
// TODO: simulated click events don't behave like real click events in IE
// remove this when simulate properly simulates this
// see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info
if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) {
asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function() {
expect( 3 );
$("#check2").button().change( function() {
var lbl = $( this ).button("widget");
ok( this.checked, "checked ok" );
ok( lbl.attr("aria-pressed") === "true", "aria ok" );
ok( lbl.hasClass("ui-state-active"), "ui-state-active ok" );
});
// 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").button("widget").simulate("click");
start();
}, 1 );
});
}
test( "#7092 - button creation that requires a matching label does not find label in all cases", function() {
expect( 5 );
var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" );
group.find( "input[type=checkbox]" ).button();
ok( group.find( "label" ).is( ".ui-button" ) );
group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" );
group.filter( "input[type=checkbox]" ).button();
ok( group.filter( "label" ).is( ".ui-button" ) );
group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" );
group.find( "input[type=checkbox]" ).button();
ok( group.filter( "label" ).is( ".ui-button" ) );
group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" );
group.find( "input[type=checkbox]" ).button();
ok( group.find( "label" ).is( ".ui-button" ) );
group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" );
group.filter( "input[type=checkbox]" ).button();
ok( group.find( "label" ).is( ".ui-button" ) );
});
test( "#5946 - buttonset should ignore buttons that are not :visible", function() {
expect( 2 );
$( "#radio01" ).next().addBack().hide();
var set = $( "#radio0" ).buttonset({ items: "input[type=radio]:visible" });
ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) );
ok( set.find( "label:eq(1)" ).is( ".ui-button.ui-corner-left" ) );
});
test( "#6262 - buttonset not applying ui-corner to invisible elements", function() {
expect( 3 );
$( "#radio0" ).hide();
var set = $( "#radio0" ).buttonset();
ok( set.find( "label:eq(0)" ).is( ".ui-button.ui-corner-left" ) );
ok( set.find( "label:eq(1)" ).is( ".ui-button" ) );
ok( set.find( "label:eq(2)" ).is( ".ui-button.ui-corner-right" ) );
});
asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function() {
expect( 2 );
var form = $( "<form>" +
"<button></button>" +
"<label for='c1'></label><input id='c1' type='checkbox' checked>" +
"</form>" ),
button = form.find( "button" ).button(),
checkbox = form.find( "input[type=checkbox]" ).button();
checkbox.prop( "checked", false ).button( "refresh" );
ok( !checkbox.button( "widget" ).hasClass( "ui-state-active" ) );
form.get( 0 ).reset();
// #9213: If a button has been removed, refresh should not be called on it when
// its corresponding form is reset.
button.remove();
setTimeout(function() {
ok( checkbox.button( "widget" ).hasClass( "ui-state-active" ));
start();
}, 1 );
});
asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() {
expect( 2 );
var check = $( "#check" ).button(),
label = $( "label[for='check']" );
ok( !label.is( ".ui-state-focus" ) );
check.focus();
setTimeout(function() {
ok( label.is( ".ui-state-focus" ) );
start();
});
});
test( "#7534 - Button label selector works for ids with \":\"", function() {
expect( 1 );
var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" );
group.find( "input" ).button();
ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" );
});
asyncTest( "#9169 - Disabled button maintains ui-state-focus", function() {
expect( 2 );
var element = $( "#button1" ).button();
element[ 0 ].focus();
setTimeout(function() {
ok( element.hasClass( "ui-state-focus" ), "button has ui-state-focus" );
element.button( "disable" );
ok( !element.hasClass( "ui-state-focus" ),
"button does not have ui-state-focus when disabled" );
start();
});
});
})(jQuery);

View file

@ -0,0 +1,36 @@
/*
* button_events.js
*/
(function($) {
module("button: events");
test("buttonset works with single-quote named elements (#7505)", function() {
expect( 1 );
$("#radio3").buttonset();
$("#radio33").click( function(){
ok( true, "button clicks work with single-quote named elements" );
}).click();
});
asyncTest( "when button loses focus, ensure active state is removed (#8559)", function() {
expect( 1 );
var element = $( "#button" ).button();
element.one( "keypress", function() {
element.one( "blur", function() {
ok( !element.is(".ui-state-active"), "button loses active state appropriately" );
start();
}).blur();
});
element.focus();
setTimeout(function() {
element
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } )
.simulate( "keypress", { keyCode: $.ui.keyCode.ENTER } );
});
});
})(jQuery);

View file

@ -0,0 +1,74 @@
/*
* button_methods.js
*/
(function($) {
module("button: methods");
test("destroy", function() {
expect( 1 );
domEqual( "#button", function() {
$( "#button" ).button().button( "destroy" );
});
});
test( "refresh: Ensure disabled state is preserved correctly.", function() {
expect( 8 );
var element = $( "<a href='#'></a>" );
element.button({ disabled: true }).button( "refresh" );
ok( element.button( "option", "disabled" ), "Anchor button should remain disabled after refresh" ); //See #8237
element = $( "<div></div>" );
element.button({ disabled: true }).button( "refresh" );
ok( element.button( "option", "disabled" ), "<div> buttons should remain disabled after refresh" );
element = $( "<button></button>" );
element.button( { disabled: true} ).button( "refresh" );
ok( element.button( "option", "disabled" ), "<button> should remain disabled after refresh");
element = $( "<input type='checkbox'>" );
element.button( { disabled: true} ).button( "refresh" );
ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh");
element = $( "<input type='radio'>" );
element.button( { disabled: true} ).button( "refresh" );
ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh");
element = $( "<button></button>" );
element.button( { disabled: true} ).prop( "disabled", false ).button( "refresh" );
ok( !element.button( "option", "disabled" ), "Changing a <button>'s disabled property should update the state after refresh."); //See #8828
element = $( "<input type='checkbox'>" );
element.button( { disabled: true} ).prop( "disabled", false ).button( "refresh" );
ok( !element.button( "option", "disabled" ), "Changing a checkbox's disabled property should update the state after refresh.");
element = $( "<input type='radio'>" );
element.button( { disabled: true} ).prop( "disabled", false ).button( "refresh" );
ok( !element.button( "option", "disabled" ), "Changing a radio button's disabled property should update the state after refresh.");
});
// #8975
test( "refresh: buttonset should turn added elements into button widgets", function() {
expect( 2 );
var radioButtonset = $( "#radio0" ).buttonset(),
checkboxButtonset = $( "#checkbox0" ).buttonset();
radioButtonset.append(
"<input type='radio' name='radio' id='radio04'>" +
"<label for='radio04'>Choice 4</label>"
);
checkboxButtonset.append(
"<input type='checkbox' name='checkbox' id='checkbox04'>" +
"<label for='checkbox04'>Choice 4</label>"
);
radioButtonset.buttonset( "refresh" );
checkboxButtonset.buttonset( "refresh" );
equal( radioButtonset.find( ":ui-button" ).length, 4, "radio" );
equal( checkboxButtonset.find( ":ui-button" ).length, 4, "checkbox" );
});
})(jQuery);

View file

@ -0,0 +1,159 @@
/*
* button_options.js
*/
(function($) {
module( "button: options" );
test( "disabled, explicit value", function() {
expect( 9 );
var element = $( "#radio01" ).button({ disabled: false });
deepEqual( element.button( "option", "disabled" ), false, "disabled option set to false" );
deepEqual( element.prop( "disabled" ), false, "element is disabled" );
ok( !element.button( "widget" ).hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" );
ok( !element.button( "widget" ).hasClass( "ui-button-disabled" ), "element gets ui-button-disabled" );
element = $( "#radio02" ).button({ disabled: true });
ok( element.button( "widget" ).hasClass( "ui-state-disabled" ), "element gets ui-state-disabled" );
ok( !element.button( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
ok( element.button( "widget" ).hasClass( "ui-button-disabled" ), "element gets ui-button-disabled" );
deepEqual( element.button( "option", "disabled" ), true, "disabled option set to true" );
deepEqual( element.prop( "disabled" ), true, "element is not disabled" );
});
test("disabled, null", function() {
expect( 4 );
$("#radio01").button({ disabled: null });
deepEqual(false, $("#radio01").button("option", "disabled"),
"disabled option set to false");
deepEqual(false, $("#radio01").prop("disabled"), "element is disabled");
$("#radio02").prop("disabled", true).button({ disabled: null });
deepEqual(true, $("#radio02").button("option", "disabled"),
"disabled option set to true");
deepEqual(true, $("#radio02").prop("disabled"), "element is not disabled");
});
test( "disabled, ui-state-active is removed unless checkbox or radio", function() {
expect( 12 );
var elements = [
$( "<input type='button'>" ),
$( "<button></button>" ),
$( "<a></a>" ),
$( "<div></div>" ),
$( "<input type='checkbox' id='checkbox' checked><label for='checkbox'></label>" ),
$( "<input type='radio' id='radio' checked><label for='radio'></label>" )
];
$.each( elements, function() {
var element = $( this ).first().button(),
buttonElement = element.button( "widget" ),
elementType = element.prop( "nodeName" ).toLowerCase();
if ( element.is( "input" ) ) {
elementType += ":" + element.attr( "type" );
}
element.trigger( "mousedown" );
ok( buttonElement.hasClass( "ui-state-active" ),
"[" + elementType + "] has ui-state-active class after mousedown." );
element.button( "disable" );
if ( element.is( "[type=checkbox], [type=radio]" ) ) {
ok( buttonElement.hasClass( "ui-state-active" ),
"Disabled [" + elementType + "] has ui-state-active class." );
} else {
ok( !buttonElement.hasClass( "ui-state-active" ),
"Disabled [" + elementType + "] does not have ui-state-active class." );
}
});
});
test("text false without icon", function() {
expect( 1 );
$("#button").button({
text: false
});
ok( $("#button").is(".ui-button-text-only:not(.ui-button-icon-only)") );
$("#button").button("destroy");
});
test("text false with icon", function() {
expect( 1 );
$("#button").button({
text: false,
icons: {
primary: "iconclass"
}
});
ok( $("#button").is(".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)") );
$("#button").button("destroy");
});
test("label, default", function() {
expect( 2 );
$("#button").button();
deepEqual( $("#button").text(), "Label" );
deepEqual( $( "#button").button( "option", "label" ), "Label" );
$("#button").button("destroy");
});
test("label", function() {
expect( 2 );
$("#button").button({
label: "xxx"
});
deepEqual( $("#button").text(), "xxx" );
deepEqual( $("#button").button( "option", "label" ), "xxx" );
$("#button").button("destroy");
});
test("label default with input type submit", function() {
expect( 2 );
deepEqual( $("#submit").button().val(), "Label" );
deepEqual( $("#submit").button( "option", "label" ), "Label" );
});
test("label with input type submit", function() {
expect( 2 );
var label = $("#submit").button({
label: "xxx"
}).val();
deepEqual( label, "xxx" );
deepEqual( $("#submit").button( "option", "label" ), "xxx" );
});
test("icons", function() {
expect( 1 );
$("#button").button({
text: false,
icons: {
primary: "iconclass",
secondary: "iconclass2"
}
});
ok( $("#button").is(":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)") );
$("#button").button("destroy");
});
test( "#5295 - button does not remove hoverstate if disabled" , function() {
expect( 1 );
var btn = $("#button").button();
btn.hover( function() {
btn.button( "disable" );
});
btn.trigger( "mouseenter" );
btn.trigger( "mouseleave" );
ok( !btn.is( ".ui-state-hover") );
});
})(jQuery);