library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tests: Use demo bootstrap for visual tests

Browse Source 
Adds a data-composite option and fixes paths for effects. Otherwise
just applies the same conversion as already applied to demos, sometimes
moving a <style> element to the right place.
This commit is contained in:
Jörn Zaefferer 2015-09-30 09:49:13 +02:00
parent c02f59981f
commit b698f809de
35 changed files with 243 additions and 485 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
Gruntfile.js
View File

@ -147,15 +147,12 @@ grunt.initConfig({
},
uglify: minify,
htmllint: {
good: [ "tests/**/*.html" ].concat( htmllintBad.map( function( file ) {
return "!" + file;
} ) ),
demos: {
good: {
options: {
ignore: [
/The text content of element “script” was not in the required format: Expected space, tab, newline, or slash but found “.” instead/
] },
src: [ "demos/**/*.html" ].concat( htmllintBad.map( function( file ) {
src: [ "demos/**/*.html", "tests/**/*.html" ].concat( htmllintBad.map( function( file ) {
return "!" + file;
} ) )
},

17
demos/bootstrap.js vendored
View File

@ -7,6 +7,7 @@ var script = scripts[ scripts.length - 1 ];
// Read the modules
var modules = script.getAttribute( "data-modules" );
var composite = script.getAttribute( "data-composite" ) || false;
var pathParts = window.location.pathname.split( "/" );
var effectsAll = [
"effects/effect-blind",
@ -22,7 +23,8 @@ var effectsAll = [
"effects/effect-scale",
"effects/effect-shake",
"effects/effect-size",
"effects/effect-slide"
"effects/effect-slide",
"effects/effect-transfer"
];
var widgets = [
"accordion",
@ -52,10 +54,15 @@ function getPath( module ) {
}
}
for ( var j = 0; j < effectsAll.length; j++ ) {
if ( module !== "effect" && effectsAll[ j ].indexOf( module ) !== -1 ) {
if ( module !== "effect" ) {
if ( effectsAll[ j ] === module ) {
return module;
}
if ( effectsAll[ j ].indexOf( module ) !== -1 ) {
return "effects/" + module;
}
}
}
return module;
}
function fixPaths( modules ) {
@ -69,7 +76,7 @@ function fixPaths( modules ) {
document.documentElement.className = "demo-loading";
require.config( {
baseUrl: "../../ui",
baseUrl: window.location.pathname.indexOf( "demos/" ) !== -1 ? "../../ui" : "../../../ui",
paths: {
jquery: "../external/jquery/jquery",
external: "../external/"
@ -86,7 +93,9 @@ if ( modules && modules.indexOf( "effects-all" ) !== -1 ) {
}
modules = modules ? modules.replace( /^\s+|\s+$/g, "" ).split( /\s+/ ) : [];
modules.push( pathParts[ pathParts.length - 2 ] );
if ( !composite ) {
modules.push( pathParts[ pathParts.length - 2 ] );
}
modules = fixPaths( modules );
require( modules, function() {

9
tests/visual/accordion/icons.html
View File

@ -4,12 +4,8 @@
<meta charset="utf-8">
<title>Accordion Visual Test</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/accordion.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
$( "#accordion-ynynyn" ).accordion({ icons: null });
$( "#accordion-ynyny" ).accordion();
$( "#accordion-ynyn" ).accordion({ icons: null });
@ -23,7 +19,6 @@
$( "#accordion-nyn" ).accordion({ icons: null });
$( "#accordion-ny" ).accordion();
$( "#accordion-n" ).accordion({ icons: null });
});
</script>
</head>
<body>

7
tests/visual/addClass/queue.html
View File

@ -4,8 +4,6 @@
<meta charset="utf-8">
<title>addClass Visual Test : Queue</title>
<link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/effect.js"></script>
<style>
.box {
width: 100px;
@ -22,8 +20,8 @@
background-color: #00f;
}
</style>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="effect" data-composite="true">
$( "#box1" )
.delay( 500 )
.addClass( "red", 2000 )
@ -37,7 +35,6 @@
.addClass( "green", 2000 )
.delay( 500 )
.addClass( "blue", 2000 );
});
</script>
</head>
<body>

9
tests/visual/button/button.html
View File

@ -4,12 +4,8 @@
<meta charset="utf-8">
<title>Button Visual Test</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>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
$( ".buttons" ).each(function() {
$( this ).children()
.eq( 0 )
@ -31,7 +27,6 @@
.eq( 2 )
.button();
});
});
</script>
</head>
<body>

9
tests/visual/button/performance.html
View File

@ -4,12 +4,8 @@
<meta charset="utf-8">
<title>Button Visual Test: Initialization Performance</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>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
var start,
html = new Array( 500 ).join( "<button>button</button>" );
$( html ).appendTo( "body" );
@ -17,7 +13,6 @@
start = $.now();
$( "button" ).button();
$( "<p>" ).text( "Time to initialize: " + ($.now() - start) + "ms" ).prependTo( "body" );
});
</script>
</head>
<body>

10
tests/visual/compound/accordion_tabs.html
View File

@ -5,16 +5,10 @@
<title>Compound Visual Test : Accordion in Tabs</title>
<link rel="stylesheet" href="../visual.css">
<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/accordion.js"></script>
<script src="../../../ui/tabs.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="tabs accordion" data-composite="true">
$( "#accordion-1, #accordion-2" ).accordion();
$( "#tabs" ).tabs();
});
</script>
</head>
<body>

15
tests/visual/compound/datepicker_dialog.html
View File

@ -5,21 +5,10 @@
<title>Compound Visual Test : Datepicker in Dialog</title>
<link rel="stylesheet" href="../visual.css">
<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/mouse.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/resizable.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/datepicker.js"></script>
<script src="../../../ui/dialog.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="datepicker dialog" data-composite="true">
$( "#datepicker" ).datepicker();
$( "#dialog" ).dialog();
});
</script>
</head>
<body>

25
tests/visual/compound/dialog_widgets.html
View File

@ -5,26 +5,10 @@
<title>Compound Visual Test : All Widgets in Dialog</title>
<link rel="stylesheet" href="../visual.css">
<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/mouse.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/menu.js"></script>
<script src="../../../ui/resizable.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/accordion.js"></script>
<script src="../../../ui/autocomplete.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/datepicker.js"></script>
<script src="../../../ui/dialog.js"></script>
<script src="../../../ui/progressbar.js"></script>
<script src="../../../ui/slider.js"></script>
<script src="../../../ui/tabs.js"></script>
<script src="../../../ui/tooltip.js"></script>
<script src="../../../ui/selectmenu.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js"
data-modules="accordion autocomplete button datepicker dialog progressbar slider tabs tooltip selectmenu"
data-composite="true">
$( "#dialog" ).dialog();
$( "[title]" ).tooltip();
$( "#accordion" ).accordion();
@ -54,7 +38,6 @@
height: 75,
modal: true
});
});
</script>
</head>
<body>

12
tests/visual/compound/draggable_accordion.html
View File

@ -5,20 +5,15 @@
<title>Compound Visual Test : Draggable in Accordion</title>
<link rel="stylesheet" href="../visual.css">
<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/mouse.js"></script>
<script src="../../../ui/accordion.js"></script>
<script src="../../../ui/draggable.js"></script>
<style>
.draggable {
width: 10em;
margin: 0.5em;
}
</style>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="accordion draggable"
data-composite="true">
$( ".draggable" ).addClass( "ui-widget ui-widget-content ui-corner-all" )
$( "#first .draggable" ).draggable();
$( "#second .draggable" ).draggable({
@ -29,7 +24,6 @@
appendTo: "body"
});
$( "#accordion" ).accordion();
});
</script>
</head>
<body>

13
tests/visual/compound/draggable_accordion_accordion_tabs_draggable.html
View File

@ -5,13 +5,6 @@
<title>Compound Visual Test : Draggable in Accordion</title>
<link rel="stylesheet" href="../visual.css">
<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/mouse.js"></script>
<script src="../../../ui/accordion.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/tabs.js"></script>
<style>
#main-draggable {
width: 300px;
@ -27,8 +20,9 @@
margin: 0.5em;
}
</style>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="accordion draggable tabs"
data-composite="true">
$( ".draggable" )
.addClass( "ui-widget ui-widget-content ui-corner-all" )
.draggable({
@ -44,7 +38,6 @@
$( "#main-draggable" ).draggable({
handle: "#main-draggable-handle"
});
});
</script>
</head>
<body>

12
tests/visual/compound/draggable_resizable.html
View File

@ -5,12 +5,6 @@
<title>Compound Visual Test: Draggable and Resizable block element</title>
<link rel="stylesheet" href="../visual.css">
<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/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/resizable.js"></script>
<style>
.draggable {
margin: 0.5em;
@ -21,8 +15,9 @@
position: absolute !important;
}
</style>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="draggable resizable"
data-composite="true">
$( ".draggable" )
.addClass( "ui-widget ui-widget-header ui-corner-all" )
.draggable({
@ -33,7 +28,6 @@
handles: "s"
});
$( ".draggable:last" ).addClass( "absolute" );
});
</script>
</head>
<body>

13
tests/visual/compound/sortable_accordion_sortable_tabs.html
View File

@ -5,15 +5,9 @@
<title>Compound Visual Test : Accordion in Tabs</title>
<link rel="stylesheet" href="../visual.css">
<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/mouse.js"></script>
<script src="../../../ui/sortable.js"></script>
<script src="../../../ui/accordion.js"></script>
<script src="../../../ui/tabs.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="accordion tabs sortable"
data-composite="true">
$( "#accordion-1, #accordion-2" )
.accordion({
header: "> div > h3"
@ -24,7 +18,6 @@
.tabs()
.find( ".ui-tabs-nav" )
.sortable();
});
</script>
</head>
<body>

12
tests/visual/compound/tabs_selectmenu.html
View File

@ -5,18 +5,10 @@
<title>Compound Visual Test : Selectmenu in Tabs</title>
<link rel="stylesheet" href="../visual.css">
<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/position.js"></script>
<script src="../../../ui/menu.js"></script>
<script src="../../../ui/selectmenu.js"></script>
<script src="../../../ui/tabs.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="tabs selectmenu" data-composite="true">
$( "#tabs" ).tabs();
$( "select" ).selectmenu();
});
</script>
<style>
select { width: 200px; }

10
tests/visual/compound/tabs_tabs.html
View File

@ -5,15 +5,9 @@
<title>Compound Visual Test : Tabs in Tabs</title>
<link rel="stylesheet" href="../visual.css">
<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/accordion.js"></script>
<script src="../../../ui/tabs.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="tabs" data-composite="true">
$( "#tabs, #tabs-a, #tabs-b" ).tabs();
});
</script>
</head>
<body>

11
tests/visual/compound/tabs_tooltips.html
View File

@ -5,17 +5,10 @@
<title>Compound Visual Test : Tabs in Tabs</title>
<link rel="stylesheet" href="../visual.css">
<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/position.js"></script>
<script src="../../../ui/tooltip.js"></script>
<script src="../../../ui/tabs.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="tabs tooltip" data-composite="true">
$( "#tabs" ).tabs();
$( "a" ).tooltip();
});
</script>
</head>
<body>

17
tests/visual/dialog/animated.html
View File

@ -4,20 +4,8 @@
<meta charset="utf-8">
<title>Dialog Visual Test</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/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/resizable.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/dialog.js"></script>
<script src="../../../ui/effect.js"></script>
<script src="../../../ui/effect-blind.js"></script>
<script src="../../../ui/effect-explode.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="effect-blind effect-explode">
$( "#dialog" ).dialog({
autoOpen: false,
show: {
@ -34,7 +22,6 @@
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>

21
tests/visual/dialog/complex-dialogs.html
View File

@ -4,24 +4,8 @@
<meta charset="utf-8">
<title>Dialog Visual Test</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/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/resizable.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/dialog.js"></script>
<!-- stuff needed to make things complex -->
<script src="../../../ui/datepicker.js"></script>
<script src="../../../ui/menu.js"></script>
<script src="../../../ui/autocomplete.js"></script>
<script src="../../../ui/tooltip.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="datepicker autocomplete tooltip">
var dialog = $( "#dialog" ).dialog({
modal: true,
width: 500,
@ -87,7 +71,6 @@
});
$( document ).tooltip();
});
</script>
</head>
<body>

17
tests/visual/dialog/form.html
View File

@ -4,20 +4,8 @@
<meta charset="utf-8">
<title>Dialog Visual Test</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/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/resizable.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/dialog.js"></script>
<script src="../../../ui/effect.js"></script>
<script src="../../../ui/effect-blind.js"></script>
<script src="../../../ui/effect-explode.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
$( "#form-dialog, #prompt-dialog" ).dialog({
autoOpen: false,
modal: true
@ -30,7 +18,6 @@
$( "#open-prompt" ).on( "click", function() {
$( "#prompt-dialog" ).dialog( "open" );
});
});
</script>
<style>
label {

14
tests/visual/dialog/performance.html
View File

@ -4,17 +4,8 @@
<meta charset="utf-8">
<title>Dialog Visual Test - Modal Dialog in Large DOM</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/position.js"></script>
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/resizable.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/dialog.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
var start,
html = new Array( 500 ).join( $.trim( $( "#template" ).html() ) );
$( html ).appendTo( "body" );
@ -31,7 +22,6 @@
$( "#dialog" ).dialog( "open" );
$( "<li>Open: " + ($.now() - start) + "ms</li>" ).appendTo( "#log" );
});
});
</script>
</head>
<body>

15
tests/visual/dialog/stacking.html
View File

@ -4,18 +4,8 @@
<meta charset="utf-8">
<title>Dialog Visual Test</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/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/position.js"></script>
<script src="../../../ui/resizable.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/dialog.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
var iframeDialog = $( "#dialog-iframe" ).dialog({
position: {
my: "right-90 center"
@ -34,7 +24,6 @@
width: 200,
height: 150
});
});
</script>
</head>
<body>

10
tests/visual/draggable/replaced.html
View File

@ -4,19 +4,13 @@
<meta charset="utf-8">
<title>Draggable Visual Test</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/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
$( "#draggable" )
.draggable()
.on( "mousedown", function() {
$( this ).html( "<div>replaced</div>" );
});
});
</script>
<style>

22
tests/visual/effects/all.html
View File

@ -4,24 +4,10 @@
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<link rel="stylesheet" href="effects.css">
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/effect.js"></script>
<script src="../../../ui/effect-blind.js"></script>
<script src="../../../ui/effect-bounce.js"></script>
<script src="../../../ui/effect-clip.js"></script>
<script src="../../../ui/effect-drop.js"></script>
<script src="../../../ui/effect-explode.js"></script>
<script src="../../../ui/effect-fade.js"></script>
<script src="../../../ui/effect-fold.js"></script>
<script src="../../../ui/effect-highlight.js"></script>
<script src="../../../ui/effect-puff.js"></script>
<script src="../../../ui/effect-pulsate.js"></script>
<script src="../../../ui/effect-scale.js"></script>
<script src="../../../ui/effect-size.js"></script>
<script src="../../../ui/effect-shake.js"></script>
<script src="../../../ui/effect-slide.js"></script>
<script src="../../../ui/effect-transfer.js"></script>
<script src="effects.js"></script>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="effects-all" data-composite="true">
require( ["./effects.js"] );
</script>
</head>
<body>

9
tests/visual/effects/clip.html
View File

@ -4,11 +4,9 @@
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<link rel="stylesheet" href="effects.css">
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/effect.js"></script>
<script src="../../../ui/effect-clip.js"></script>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="effect effect-clip"
data-composite="true">
var target = $( ".target" ),
duration = 2000;
@ -33,7 +31,6 @@
direction: "vertical"
}, duration );
});
});
</script>
<style>
.clipped {

4
tests/visual/effects/effects.js vendored
View File

@ -1,5 +1,3 @@
$( function() {
var duration = 1000,
wait = 500;
@ -104,5 +102,3 @@ $( "#removeClass" ).on( "click", function() {
$( "#toggleClass" ).on( "click", function() {
$( this ).toggleClass( "current", duration );
} );
} );

71
tests/visual/effects/scale.html
View File

@ -4,12 +4,39 @@
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<link rel="stylesheet" href="effects.css">
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/effect.js"></script>
<script src="../../../ui/effect-scale.js"></script>
<script src="../../../ui/effect-size.js"></script>
<script>
$(function() {
<style>
#testArea {
width: 200px;
height: 200px;
position: relative;
}
#testBox {
width: 50px;
height: 50px;
background-color: #bada55;
color: black;
border: 10px solid #fff;
margin: 10px;
padding: 10px;
position: absolute;
left: 5px;
top: 5px;
}
label {
display: block;
}
#controls {
position: absolute;
z-index: 300;
left: 50%;
top: 50%;
margin-left: -200px;
width: 400px;
opacity: 0.8;
}
</style>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="effect-scale" data-composite="true">
var test = $( "#testBox" ),
opts = $( ".arg" ),
optsRev = $( opts.get().reverse() ),
@ -84,39 +111,7 @@
.delay( 100 )
.effect( effect );
}
});
</script>
<style>
#testArea {
width: 200px;
height: 200px;
position: relative;
}
#testBox {
width: 50px;
height: 50px;
background-color: #bada55;
color: black;
border: 10px solid #fff;
margin: 10px;
padding: 10px;
position: absolute;
left: 5px;
top: 5px;
}
label {
display: block;
}
#controls {
position: absolute;
z-index: 300;
left: 50%;
top: 50%;
margin-left: -200px;
width: 400px;
opacity: 0.8;
}
</style>
</head>
<body>

23
tests/visual/effects/shake.html
View File

@ -4,20 +4,6 @@
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<link rel="stylesheet" href="effects.css">
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/effect.js"></script>
<script src="../../../ui/effect-scale.js"></script>
<script src="../../../ui/effect-shake.js"></script>
<script>
$(function() {
$( "#btn" ).on( "click", function() {
$( ".shake" ).effect( "shake", {
duration: +$( "#duration" ).val(),
mode: "toggle"
});
});
});
</script>
<style>
#inputbox {
background: green;
@ -54,6 +40,15 @@
padding: 10px;
}
</style>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="effect-shake" data-composite="true">
$( "#btn" ).on( "click", function() {
$( ".shake" ).effect( "shake", {
duration: +$( "#duration" ).val(),
mode: "toggle"
});
});
</script>
</head>
<body>

1
tests/visual/index.html
View File

@ -89,6 +89,7 @@
<li><a href="compound/draggable_accordion_accordion_tabs_draggable.html">Nested Widgets</a></li>
<li><a href="compound/draggable_resizable.html">Draggable Resizable</a></li>
<li><a href="compound/sortable_accordion_sortable_tabs.html">Sortable Tabs in Sortable Accordion</a></li>
<li><a href="compound/tabs_selectmenu.html">Selectmenu in Tabs</a></li>
<li><a href="compound/tabs_tabs.html">Nested Tabs</a></li>
<li><a href="compound/tabs_tooltips.html">Tabs with Tooltips</a></li>
</ul>

24
tests/visual/menu/menu.html
View File

@ -4,13 +4,15 @@
<meta charset="utf-8">
<title>Menu Visual Test: Default</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/position.js"></script>
<script src="../../../ui/menu.js"></script>
<script>
$(function() {
<style>
.ui-menu { width: 250px; margin-bottom: 2em; }
.menu4 { height: 225px; overflow-y: auto; overflow-x: hidden; }
.address-item { border-bottom: 1px solid #999; }
.address-header { display: block; margin-bottom: .2em; font-weight: bold; }
.address-content { display: block; margin-bottom: .2em; padding-left: 10px; }
</style>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
function logger( event, ui ) {
$( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
}
@ -42,15 +44,7 @@
items: "> :not('.ui-menu-group')",
select: logger
});
});
</script>
<style>
.ui-menu { width: 250px; margin-bottom: 2em; }
.menu4 { height: 225px; overflow-y: auto; overflow-x: hidden; }
.address-item { border-bottom: 1px solid #999; }
.address-header { display: block; margin-bottom: .2em; font-weight: bold; }
.address-content { display: block; margin-bottom: .2em; padding-left: 10px; }
</style>
</head>
<body>

11
tests/visual/position/position.html
View File

@ -3,12 +3,6 @@
<head>
<meta charset="utf-8">
<title>Position Visual Test</title>
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/core.js"></script>
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/position.js"></script>
<style>
.demo {
position: relative;
@ -34,8 +28,8 @@
margin: 0 15px 15px 0;
}
</style>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="draggable">
var within = $( ".demo" ),
positionable = $( ".positionable" );
function position() {
@ -67,7 +61,6 @@
$( "select, input" ).on( "click keyup change", function() { position(); } );
position();
});
</script>
</head>
<body>

128
tests/visual/position/position_feedback.html
View File

@ -4,13 +4,67 @@
<meta charset="utf-8">
<title>Position Visual Test: Feedback</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/position.js"></script>
<script src="../../../ui/menu.js"></script>
<script>
$(function() {
<style>
#target, .element {
position: absolute;
border: 1px solid black;
border-radius: 5px;
width: 75px;
height: 25px;
padding: 5px;
font-size: 62.5%;
}
#target {
height: 75px;
}
.element:before {
font-size: 12pt;
content: "↑";
position: absolute;
top: -19px;
left: 5px;
}
.right:before {
left: auto;
right: 5px;
}
.bottom:before {
content: "↓";
top: auto;
bottom: -19px;
}
.center:before {
left: 50%;
right: auto;
}
.middle:before {
top: 50%;
bottom: auto;
}
.horizontal:before {
height: 10px;
top: 50%;
margin-top: -8px;
bottom: auto;
left: -18px;
right: auto;
content: "←";
}
.right.horizontal:before {
left: auto;
right: -18px;
content: "→";
}
.bottom.horizontal:before {
top: auto;
bottom: 5px;
}
.top.horizontal:before {
top: 5px;
}
</style>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
function using( position, feedback ) {
$( this )
.css( position )
@ -74,67 +128,7 @@
rightElement.position( positionWithOffset(
0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) );
});
});
</script>
<style>
#target, .element {
position: absolute;
border: 1px solid black;
border-radius: 5px;
width: 75px;
height: 25px;
padding: 5px;
font-size: 62.5%;
}
#target {
height: 75px;
}
.element:before {
font-size: 12pt;
content: "↑";
position: absolute;
top: -19px;
left: 5px;
}
.right:before {
left: auto;
right: 5px;
}
.bottom:before {
content: "↓";
top: auto;
bottom: -19px;
}
.center:before {
left: 50%;
right: auto;
}
.middle:before {
top: 50%;
bottom: auto;
}
.horizontal:before {
height: 10px;
top: 50%;
margin-top: -8px;
bottom: auto;
left: -18px;
right: auto;
content: "←";
}
.right.horizontal:before {
left: auto;
right: -18px;
content: "→";
}
.bottom.horizontal:before {
top: auto;
bottom: 5px;
}
.top.horizontal:before {
top: 5px;
}
</style>
</head>
<body>

31
tests/visual/selectmenu/selectmenu.html
View File

@ -4,14 +4,18 @@
<meta charset="utf-8">
<title>Selectmenu Visual Test: Default</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/position.js"></script>
<script src="../../../ui/menu.js"></script>
<script src="../../../ui/selectmenu.js"></script>
<script>
$(function() {
<style>
fieldset { border: 0; }
label { display: block; }
select { width: 200px; }
.ui-selectmenu-button { display: block; margin-bottom: 1em;}
/* width */
.width-menu { width: 196px; }
</style>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
var log = $("#log"),
index = 0,
text;
@ -119,18 +123,7 @@
var widthMenu = $("#width_menu").selectmenu();
widthMenu.selectmenu("menuWidget").addClass("width-menu");
});
</script>
<style>
fieldset { border: 0; }
label { display: block; }
select { width: 200px; }
.ui-selectmenu-button { display: block; margin-bottom: 1em;}
/* width */
.width-menu { width: 196px; }
</style>
</head>
<body>

31
tests/visual/slider/range_slider.html
View File

@ -11,23 +11,8 @@
margin: 20px auto;
}
</style>
<script src="../../../external/jquery/jquery.js"></script>
<script src="../../../ui/core.js"></script>
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/slider.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Range Slider</h1>
<h3>When set both values of range slider to the maximum, slider should not lock</h3>
<div id="slider"></div>
<br>
<button id="set-max-values">set values to max</button>
<button id="set-min-values">set values to min</button>
</div>
<script>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
var el = $( "#slider" ).slider({
range: true,
min: 0,
@ -42,6 +27,16 @@
$( "#set-min-values" ).on( "click", function() {
el.slider( "option", { values: [ 0, 0 ] } );
});
</script>
</script>
</head>
<body>
<div id="wrapper">
<h1>Range Slider</h1>
<h3>When set both values of range slider to the maximum, slider should not lock</h3>
<div id="slider"></div>
<br>
<button id="set-max-values">set values to max</button>
<button id="set-min-values">set values to min</button>
</div>
</body>
</html>

15
tests/visual/tooltip/animations.html
View File

@ -4,16 +4,6 @@
<meta charset="utf-8">
<title>Tooltip Visual Test: Animations</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/position.js"></script>
<script src="../../../ui/tooltip.js"></script>
<script src="../../../ui/effect.js"></script>
<script src="../../../ui/effect-blind.js"></script>
<script src="../../../ui/effect-bounce.js"></script>
<script src="../../../ui/effect-drop.js"></script>
<script src="../../../ui/effect-explode.js"></script>
<style>
pre {
width: 250px;
@ -21,14 +11,13 @@
padding: .5em;
}
</style>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js">
$( "pre" ).each(function( index, elem ) {
$( elem )
.attr( "title", "animated tooltips" )
.tooltip( $.parseJSON( $( elem ).text() ) );
});
});
</script>
</head>
<body>

11
tests/visual/tooltip/tooltip.html
View File

@ -4,19 +4,13 @@
<meta charset="utf-8">
<title>Tooltip Visual Test: Default</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/position.js"></script>
<script src="../../../ui/button.js"></script>
<script src="../../../ui/tooltip.js"></script>
<style>
.group {
margin-top: 2em;
}
</style>
<script>
$(function() {
<script src="../../../external/requirejs/require.js"></script>
<script src="../../../demos/bootstrap.js" data-modules="button">
// default
$( "#context1, form, #childish, #nested-input" ).tooltip();
@ -103,7 +97,6 @@
}).on( "click", function() {
$( "#focus-on-me" ).trigger( "focus" );
});
});
</script>
</head>
<body>