aboutsummaryrefslogtreecommitdiffstats
path: root/tests
diff options
context:
space:
mode:
authorAblay Keldibek <atomio.ak@gmail.com>2015-04-07 20:10:27 +0600
committerScott González <scott.gonzalez@gmail.com>2015-04-22 12:55:54 -0400
commit897a238332110c5c1a58ee9a0db5bf4e54fc3059 (patch)
treec157dbaf6d87ab9e3f871fb81c85c2c5582ef250 /tests
parentec952e2909113b45dab7ddaa817cb3766f39ba18 (diff)
downloadjquery-ui-897a238332110c5c1a58ee9a0db5bf4e54fc3059.tar.gz
jquery-ui-897a238332110c5c1a58ee9a0db5bf4e54fc3059.zip
Slider: Range fills all space after changing orientation
Resets width/height of range Fixes #12205 Closes gh-1533
Diffstat (limited to 'tests')
-rw-r--r--tests/unit/slider/options.js41
-rw-r--r--tests/unit/slider/slider.html11
2 files changed, 50 insertions, 2 deletions
diff --git a/tests/unit/slider/options.js b/tests/unit/slider/options.js
index 923c3c1c9..8e43c3e89 100644
--- a/tests/unit/slider/options.js
+++ b/tests/unit/slider/options.js
@@ -109,7 +109,7 @@ test( "min", function() {
});
test( "orientation", function( assert ) {
- expect( 8 );
+ expect( 14 );
element = $( "#slider1" );
options = {
@@ -119,7 +119,8 @@ test( "orientation", function( assert ) {
value: 1
};
- var percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100;
+ var newValue, rangeSize,
+ percentVal = ( options.value - options.min ) / ( options.max - options.min ) * 100;
element.slider( options ).slider( "option", "orientation", "horizontal" );
assert.hasClasses( element, "ui-slider-horizontal" );
@@ -146,6 +147,42 @@ test( "orientation", function( assert ) {
element.slider( "destroy" );
+ newValue = 7;
+ rangeSize = 500 - (500 * newValue / 10);
+ element = $( "#slider2" ).slider({
+ range: "max",
+ min: 0,
+ max: 10
+ });
+
+ element.slider( "option", "value", newValue );
+ element.slider( "option", "orientation", "vertical" );
+ equal( element.find( ".ui-slider-range" ).width(), 12,
+ "range should occupy all horizontal space after changing orientation to vertical" );
+ equal( element.find( ".ui-slider-range" ).height(), rangeSize,
+ "range height of vertical slider should be proportional to the value" );
+
+ element.slider( "option", "orientation", "horizontal" );
+ equal( element.find( ".ui-slider-range " ).height(), 12,
+ "range should occupy all vertical space after changing orientation to horizontal" );
+ equal( element.find( ".ui-slider-range" ).width(), rangeSize,
+ "range width of horizontal slider should be proportional to the value" );
+
+ element.slider( "destroy" );
+
+ element = $( "#slider2" ).slider({
+ range: true,
+ min: 0,
+ max: 100
+ });
+ element.slider( "option", { values: [ 60, 70 ] } );
+ notEqual( element.find( ".ui-slider-range " ).position().left, 0,
+ "range should not pull over to the track's border" );
+ element.slider( "option", "orientation", "vertical" );
+ equal( element.find( ".ui-slider-range " ).position().left, 0,
+ "range should pull over to the track's border" );
+
+ element.slider( "destroy" );
});
//spec: http://wiki.jqueryui.com/Slider#specs
diff --git a/tests/unit/slider/slider.html b/tests/unit/slider/slider.html
index a9ec5324f..39bcd05c3 100644
--- a/tests/unit/slider/slider.html
+++ b/tests/unit/slider/slider.html
@@ -7,6 +7,16 @@
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js" data-modules="core slider"></script>
<script src="../../lib/bootstrap.js" data-widget="slider"></script>
+ <style>
+ #slider2.ui-slider-horizontal {
+ height: 12px;
+ width: 500px;
+ }
+ #slider2.ui-slider-vertical {
+ width: 12px;
+ height: 500px;
+ }
+ </style>
</head>
<body>
@@ -14,6 +24,7 @@
<div id="qunit-fixture">
<div id="slider1"></div>
+<div id="slider2"></div>
<div id="slider3" style="position: relative; margin: 40px; width: 217px; height: 28px;">
<div class="ui-slider-handle" style="position: absolute; height: 21px; left: 0px; bottom: 0px; width: 17px;"></div>
</div>