diff options
| author | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2015-09-30 09:49:13 +0200 |
|---|---|---|
| committer | Jörn Zaefferer <joern.zaefferer@gmail.com> | 2015-09-30 17:55:20 +0200 |
| commit | b698f809de908535acd93c690d90d867622ddd7e (patch) | |
| tree | 0929237517ef5edde429a1ab615bcc22222f773b | |
| parent | c02f59981f4c8aa2c606e22e0325dd34457c8b45 (diff) | |
| download | jquery-ui-b698f809de908535acd93c690d90d867622ddd7e.tar.gz jquery-ui-b698f809de908535acd93c690d90d867622ddd7e.zip | |
Tests: Use demo bootstrap for visual tests
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.
35 files changed, 243 insertions, 485 deletions
diff --git a/Gruntfile.js b/Gruntfile.js index fe6b588b2..0c9bf4447 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -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; } ) ) }, diff --git a/demos/bootstrap.js b/demos/bootstrap.js index b96620d6a..7a942374d 100644 --- a/demos/bootstrap.js +++ b/demos/bootstrap.js @@ -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,8 +54,13 @@ function getPath( module ) { } } for ( var j = 0; j < effectsAll.length; j++ ) { - if ( module !== "effect" && effectsAll[ j ].indexOf( module ) !== -1 ) { - return "effects/" + module; + if ( module !== "effect" ) { + if ( effectsAll[ j ] === module ) { + return module; + } + if ( effectsAll[ j ].indexOf( module ) !== -1 ) { + return "effects/" + module; + } } } return module; @@ -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() { diff --git a/tests/visual/accordion/icons.html b/tests/visual/accordion/icons.html index a8723a859..b0ae18c65 100644 --- a/tests/visual/accordion/icons.html +++ b/tests/visual/accordion/icons.html @@ -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> diff --git a/tests/visual/addClass/queue.html b/tests/visual/addClass/queue.html index 88611ddc4..c939dce91 100644 --- a/tests/visual/addClass/queue.html +++ b/tests/visual/addClass/queue.html @@ -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> diff --git a/tests/visual/button/button.html b/tests/visual/button/button.html index 3ac055b91..1d82cf665 100644 --- a/tests/visual/button/button.html +++ b/tests/visual/button/button.html @@ -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> diff --git a/tests/visual/button/performance.html b/tests/visual/button/performance.html index ba90965a9..0d807d167 100644 --- a/tests/visual/button/performance.html +++ b/tests/visual/button/performance.html @@ -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> diff --git a/tests/visual/compound/accordion_tabs.html b/tests/visual/compound/accordion_tabs.html index 68207d151..3f2f93712 100644 --- a/tests/visual/compound/accordion_tabs.html +++ b/tests/visual/compound/accordion_tabs.html @@ -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> diff --git a/tests/visual/compound/datepicker_dialog.html b/tests/visual/compound/datepicker_dialog.html index 52c91a083..ba1a1de7e 100644 --- a/tests/visual/compound/datepicker_dialog.html +++ b/tests/visual/compound/datepicker_dialog.html @@ -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> diff --git a/tests/visual/compound/dialog_widgets.html b/tests/visual/compound/dialog_widgets.html index 2258231e9..f84ef0123 100644 --- a/tests/visual/compound/dialog_widgets.html +++ b/tests/visual/compound/dialog_widgets.html @@ -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> diff --git a/tests/visual/compound/draggable_accordion.html b/tests/visual/compound/draggable_accordion.html index 528cdc321..345c0b038 100644 --- a/tests/visual/compound/draggable_accordion.html +++ b/tests/visual/compound/draggable_accordion.html @@ -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> diff --git a/tests/visual/compound/draggable_accordion_accordion_tabs_draggable.html b/tests/visual/compound/draggable_accordion_accordion_tabs_draggable.html index 302a2e910..bfc5f81e6 100644 --- a/tests/visual/compound/draggable_accordion_accordion_tabs_draggable.html +++ b/tests/visual/compound/draggable_accordion_accordion_tabs_draggable.html @@ -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> diff --git a/tests/visual/compound/draggable_resizable.html b/tests/visual/compound/draggable_resizable.html index d07c8bdc4..539091b7f 100644 --- a/tests/visual/compound/draggable_resizable.html +++ b/tests/visual/compound/draggable_resizable.html @@ -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> diff --git a/tests/visual/compound/sortable_accordion_sortable_tabs.html b/tests/visual/compound/sortable_accordion_sortable_tabs.html index f44f2b929..9ccc36751 100644 --- a/tests/visual/compound/sortable_accordion_sortable_tabs.html +++ b/tests/visual/compound/sortable_accordion_sortable_tabs.html @@ -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> diff --git a/tests/visual/compound/tabs_selectmenu.html b/tests/visual/compound/tabs_selectmenu.html index ca2020b71..ddd72c75f 100644 --- a/tests/visual/compound/tabs_selectmenu.html +++ b/tests/visual/compound/tabs_selectmenu.html @@ -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; } diff --git a/tests/visual/compound/tabs_tabs.html b/tests/visual/compound/tabs_tabs.html index bf5cf4ead..54c2d48a1 100644 --- a/tests/visual/compound/tabs_tabs.html +++ b/tests/visual/compound/tabs_tabs.html @@ -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> diff --git a/tests/visual/compound/tabs_tooltips.html b/tests/visual/compound/tabs_tooltips.html index bb8f2d11d..8ee625e1e 100644 --- a/tests/visual/compound/tabs_tooltips.html +++ b/tests/visual/compound/tabs_tooltips.html @@ -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> diff --git a/tests/visual/dialog/animated.html b/tests/visual/dialog/animated.html index 2bb0b398b..2fd1d04a6 100644 --- a/tests/visual/dialog/animated.html +++ b/tests/visual/dialog/animated.html @@ -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> diff --git a/tests/visual/dialog/complex-dialogs.html b/tests/visual/dialog/complex-dialogs.html index 9a6209be9..0bea3414e 100644 --- a/tests/visual/dialog/complex-dialogs.html +++ b/tests/visual/dialog/complex-dialogs.html @@ -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> diff --git a/tests/visual/dialog/form.html b/tests/visual/dialog/form.html index 42d40f1f4..b1cdaa54a 100644 --- a/tests/visual/dialog/form.html +++ b/tests/visual/dialog/form.html @@ -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 { diff --git a/tests/visual/dialog/performance.html b/tests/visual/dialog/performance.html index e01098ad1..20adbfa6b 100644 --- a/tests/visual/dialog/performance.html +++ b/tests/visual/dialog/performance.html @@ -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> diff --git a/tests/visual/dialog/stacking.html b/tests/visual/dialog/stacking.html index 221498a55..e2e23e58a 100644 --- a/tests/visual/dialog/stacking.html +++ b/tests/visual/dialog/stacking.html @@ -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> diff --git a/tests/visual/draggable/replaced.html b/tests/visual/draggable/replaced.html index f343eea28..38931f345 100644 --- a/tests/visual/draggable/replaced.html +++ b/tests/visual/draggable/replaced.html @@ -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> diff --git a/tests/visual/effects/all.html b/tests/visual/effects/all.html index c1bdd9fa3..e3fa3ee48 100644 --- a/tests/visual/effects/all.html +++ b/tests/visual/effects/all.html @@ -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> diff --git a/tests/visual/effects/clip.html b/tests/visual/effects/clip.html index b8ede414b..c20e6506a 100644 --- a/tests/visual/effects/clip.html +++ b/tests/visual/effects/clip.html @@ -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 { diff --git a/tests/visual/effects/effects.js b/tests/visual/effects/effects.js index 0b0de96f4..6d36a55ea 100644 --- a/tests/visual/effects/effects.js +++ b/tests/visual/effects/effects.js @@ -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 ); } ); - -} ); diff --git a/tests/visual/effects/scale.html b/tests/visual/effects/scale.html index 0723d9458..b032ac896 100644 --- a/tests/visual/effects/scale.html +++ b/tests/visual/effects/scale.html @@ -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> diff --git a/tests/visual/effects/shake.html b/tests/visual/effects/shake.html index 29159e39d..c93f0eb57 100644 --- a/tests/visual/effects/shake.html +++ b/tests/visual/effects/shake.html @@ -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> diff --git a/tests/visual/index.html b/tests/visual/index.html index 4979921a4..98753c827 100644 --- a/tests/visual/index.html +++ b/tests/visual/index.html @@ -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> diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html index c71f50ff4..9bbaa95e1 100644 --- a/tests/visual/menu/menu.html +++ b/tests/visual/menu/menu.html @@ -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> diff --git a/tests/visual/position/position.html b/tests/visual/position/position.html index 70a9c40e5..d5c19fd32 100644 --- a/tests/visual/position/position.html +++ b/tests/visual/position/position.html @@ -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> diff --git a/tests/visual/position/position_feedback.html b/tests/visual/position/position_feedback.html index 988451026..f094b5148 100644 --- a/tests/visual/position/position_feedback.html +++ b/tests/visual/position/position_feedback.html @@ -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> diff --git a/tests/visual/selectmenu/selectmenu.html b/tests/visual/selectmenu/selectmenu.html index f91894710..693885d25 100644 --- a/tests/visual/selectmenu/selectmenu.html +++ b/tests/visual/selectmenu/selectmenu.html @@ -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> diff --git a/tests/visual/slider/range_slider.html b/tests/visual/slider/range_slider.html index 2b041f377..64152a9ff 100644 --- a/tests/visual/slider/range_slider.html +++ b/tests/visual/slider/range_slider.html @@ -11,11 +11,23 @@ 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> + <script src="../../../external/requirejs/require.js"></script> + <script src="../../../demos/bootstrap.js"> + var el = $( "#slider" ).slider({ + range: true, + min: 0, + max: 100, + values: [ 0, 50 ] + }); + + $( "#set-max-values" ).on( "click", function() { + el.slider( "option", { values: [ 100, 100 ] } ); + }); + + $( "#set-min-values" ).on( "click", function() { + el.slider( "option", { values: [ 0, 0 ] } ); + }); + </script> </head> <body> <div id="wrapper"> @@ -26,22 +38,5 @@ <button id="set-max-values">set values to max</button> <button id="set-min-values">set values to min</button> </div> - -<script> - var el = $( "#slider" ).slider({ - range: true, - min: 0, - max: 100, - values: [ 0, 50 ] - }); - - $( "#set-max-values" ).on( "click", function() { - el.slider( "option", { values: [ 100, 100 ] } ); - }); - - $( "#set-min-values" ).on( "click", function() { - el.slider( "option", { values: [ 0, 0 ] } ); - }); -</script> </body> </html> diff --git a/tests/visual/tooltip/animations.html b/tests/visual/tooltip/animations.html index 6131db436..7427d7ebd 100644 --- a/tests/visual/tooltip/animations.html +++ b/tests/visual/tooltip/animations.html @@ -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,52 +11,51 @@ 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> <pre>{}</pre> <pre>{ - "show": { - "effect": "slideDown" - }, - "hide": { - "effect": "slideUp" - } + "show": { + "effect": "slideDown" + }, + "hide": { + "effect": "slideUp" + } }</pre> <pre>{ - "show": { - "effect": "explode" - }, - "hide": { - "effect": "explode" - } + "show": { + "effect": "explode" + }, + "hide": { + "effect": "explode" + } }</pre> <pre>{ - "show": { - "effect": "bounce" - }, - "hide": { - "effect": "blind" - } + "show": { + "effect": "bounce" + }, + "hide": { + "effect": "blind" + } }</pre> <pre>{ - "show": { - "effect": "drop", - "direction": "right" - }, - "hide": { - "effect": "drop", - "direction": "right" - } + "show": { + "effect": "drop", + "direction": "right" + }, + "hide": { + "effect": "drop", + "direction": "right" + } }</pre> </body> diff --git a/tests/visual/tooltip/tooltip.html b/tests/visual/tooltip/tooltip.html index 176af85d8..9453190d7 100644 --- a/tests/visual/tooltip/tooltip.html +++ b/tests/visual/tooltip/tooltip.html @@ -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> |