Specs/Element/Element.Style.js

   1 /*
   2 ---
   3 name: Element.Style
   4 requires: ~
   5 provides: ~
   6 ...
   7 */
   8
   9 //<1.2compat>
  10 describe('Element.set `opacity`', function(){
  11
  12         it('should set the opacity of an Element', function(){
  13                 var el = new Element('div').set('opacity', 0.4);
  14                 if (document.html.style.opacity != null)
  15                         expect(el.style.opacity).to.equal('0.4');
  16                 else if (document.html.style.filter != null)
  17                         expect(el.style.filter).to.equal('alpha(opacity=40)');
  18                 else
  19                         expect(el.getStyle('opacity')).to.equal(0.4);
  20         });
  21
  22         it('should return the opacity of an Element', function(){
  23                 var div = new Element('div').set('opacity', 0.4);
  24                 expect(div.get('opacity')).to.equal(0.4);
  25                 div.set('opacity', 0);
  26                 expect(div.get('opacity')).to.equal(0);
  27         });
  28
  29 });
  30 //</1.2compat>
  31
  32 describe('Element.set `opacity`', function(){
  33
  34         it('should set the opacity of an Element', function(){
  35                 var el = new Element('div').setStyle('opacity', 0.4);
  36                 if (document.html.style.opacity != null)
  37                         expect(el.style.opacity).to.equal('0.4');
  38                 else if (document.html.style.filter != null)
  39                         expect(el.style.filter).to.equal('alpha(opacity=40)');
  40                 else
  41                         expect(el.getStyle('opacity')).to.equal(0.4);
  42         });
  43
  44         it('should return the opacity of an Element', function(){
  45                 var div = new Element('div').setStyle('opacity', 0.4);
  46                 expect(div.getStyle('opacity')).to.equal(0.4);
  47                 div.setStyle('opacity', 0);
  48                 expect(div.getStyle('opacity')).to.equal(0);
  49         });
  50
  51 });
  52
  53 describe('Element.getStyle', function(){
  54
  55         it('should get a six digit hex code from a three digit hex code', function(){
  56                 var el = new Element('div').set('html', '<div style="color:#00ff00"></div>');
  57                 expect(el.getElement('div').getStyle('color')).to.equal('#00ff00');
  58         });
  59
  60         it('should getStyle a six digit hex code from an RGB value', function(){
  61                 var el = new Element('div').set('html', '<div style="color:rgb(0, 255, 0)"></div>');
  62                 expect(el.getElement('div').getStyle('color')).to.equal('#00ff00');
  63         });
  64
  65         it('should `getStyle` with a dash in it', function(){
  66                 var el = new Element('div').set('html', '<div style="list-style-type:square"></div>');
  67                 expect(el.getElement('div').getStyle('list-style-type')).to.equal('square');
  68         });
  69
  70         it('should `getStyle` padding', function(){
  71                 var el = new Element('div').set('html', '<div style="padding:20px"></div>');
  72                 expect(el.getElement('div').getStyle('padding-left')).to.equal('20px');
  73         });
  74
  75 });
  76
  77 describe('Element.setStyle', function(){
  78
  79         it('should set the `styles` property on an Element using the Element constructor', function(){
  80                 expect(new Element('div', {styles:{'color':'#00ff00'}}).getStyle('color')).to.equal('#00ff00');
  81         });
  82
  83         it('should `setStyle` on an Element', function(){
  84                 expect(new Element('div').setStyle('color', '#00ff00').getStyle('color')).to.equal('#00ff00');
  85         });
  86
  87         it('should properly `setStyle` for a property with a dash in it', function(){
  88                 expect(new Element('div').setStyle('list-style-type', 'square').getStyle('list-style-type')).to.equal('square');
  89         });
  90
  91 });
  92
  93 describe('Element.getStyles', function(){
  94
  95         it('should return multiple styles', function(){
  96                 var el = new Element('div').set('html', '<div style="color:#00ff00;list-style-type:square"></div>');
  97                 expect(el.getElement('div').getStyles('color', 'list-style-type')).to.eql({color:'#00ff00', 'list-style-type':'square'});
  98         });
  99
 100 });
 101
 102 describe('Element.setStyles', function(){
 103
 104         it('should set multiple styles', function(){
 105                 expect(new Element('div').setStyles({'list-style-type':'square', 'color':'#00ff00'}).getStyles('list-style-type', 'color')).to.eql({'list-style-type':'square', color:'#00ff00'});
 106         });
 107
 108 });
 109
 110 describe('Element.set opacity', function(){
 111
 112         it('should not remove existent filters on browsers with filters', function(){
 113                 var div = new Element('div'),
 114                         hasOpacity = document.html.style.opacity != null;
 115
 116                 if (!hasOpacity && document.html.style.filter != null && !window.opera && !syn.browser.gecko){ // We can probably remove the last two checks.
 117                         div.style.filter = 'blur(strength=50)';
 118                         div.set('opacity', 0.4);
 119                         expect(div.style.filter).to.match(/blur\(strength=50\)/i);
 120                 }
 121         });
 122
 123         it('should handle very small numbers with scientific notation like 1.1e-20 with opacity', function(){
 124                 var div = new Element('div');
 125                 div.set('opacity', 1e-20);
 126                 div.set('opacity', 0.5);
 127                 expect(+div.get('opacity')).to.equal(0.5);
 128         });
 129
 130 });
 131
 132 describe('Element.Style', function(){
 133
 134         describe('opacity', function(){
 135
 136                 beforeEach(function(){
 137                         var className = String.uniqueID();
 138                         var style = this.style = $(document.createElement('style'));
 139                         style.type = 'text/css';
 140                         var definition = [
 141                                 '.' + className + '{',
 142                                 '    opacity: 0.5;',
 143                                 '    filter: alpha(opacity=50);',
 144                                 '    color: #ff0000;',
 145                                 '}'
 146                         ].join('');
 147
 148                         // Fix this. See: https://github.com/mootools/mootools-core/issues/2265
 149                         if (style.styleSheet) style.styleSheet.cssText = definition;
 150                         else style.set('text', definition);
 151
 152                         document.head.appendChild(style);
 153
 154                         this.element = new Element('div', {
 155                                 'class': className,
 156                                 text: 'yo'
 157                         }).inject(document.body);
 158                 });
 159
 160                 afterEach(function(){
 161                         this.style.destroy();
 162                         this.element.destroy();
 163                         this.element = null;
 164                 });
 165
 166                 it('should get the opacity defined by the CSS', function(){
 167                         expect(this.element.getStyle('opacity')).to.equal(0.5);
 168                 });
 169
 170                 it('should set/overwrite the opacity', function(){
 171                         this.element.setStyle('opacity', 1);
 172                         expect(this.element.getStyle('opacity')).to.equal(1);
 173                         this.element.setStyle('opacity', null);
 174                         expect(this.element.getStyle('opacity')).to.equal(0.5);
 175                 });
 176
 177                 it('should remove the style by setting it to `null`', function(){
 178                         this.element.setStyle('color', '#FF9900');
 179                         expect(this.element.getStyle('color')).to.equal('#ff9900');
 180                         this.element.setStyle('color', null);
 181                         expect(this.element.getStyle('color')).to.equal('#ff0000');
 182                 });
 183
 184         });
 185
 186         describe('getStyle height / width / margin with CSS', function(){
 187
 188                 var style, element;
 189
 190                 it('[beforeAll]', function(){
 191                         var className = String.uniqueID();
 192                         style = $(document.createElement('style'));
 193                         style.type = 'text/css';
 194                         var definition = [
 195                                 '.' + className + '{',
 196                                 '    height: 200px;',
 197                                 '    width: 50%;',
 198                                 '    margin-left: 20%;',
 199                                 '}'
 200                         ].join('');
 201
 202                         // Fix this. See: https://github.com/mootools/mootools-core/issues/2265
 203                         if (style.styleSheet) style.styleSheet.cssText = definition;
 204                         else style.set('text', definition);
 205
 206                         document.head.appendChild(style);
 207
 208                         element = new Element('div', {
 209                                 'class': className,
 210                                 text: 'yo'
 211                         }).inject(document.body);
 212
 213                 });
 214
 215                 it('should get the height from the CSS', function(){
 216                         expect(element.getStyle('height')).to.equal('200px');
 217                 });
 218
 219                 it('should get the width from the CSS', function(){
 220                         expect(element.getStyle('width')).to.match(/\d+px/);
 221                 });
 222
 223                 it('should not mangle the units from inline width in %', function(){
 224                         expect(new Element('div').setStyle('width', '40%').getStyle('width')).to.equal('40%');
 225                 });
 226
 227                 it('should not mangle the units from inline auto width', function(){
 228                         expect(new Element('div').setStyle('width', 'auto').getStyle('width')).to.equal('auto');
 229                 });
 230
 231                 it('should get the left margin from the CSS', function(){
 232                         // FireFox returns px (and maybe even as floats).
 233                         var re = /^(20\%|(\d+|\d+\.\d+)px)$/;
 234                         expect(re.test('20%')).to.equal(true);
 235                         expect(re.test('20px')).to.equal(true);
 236                         expect(re.test('20.43px')).to.equal(true);
 237                         expect(re.test('20')).to.equal(false);
 238                         expect(re.test('auto')).to.equal(false);
 239                         expect(element.getStyle('margin-left')).to.match(re);
 240                 });
 241
 242                 it('[afterAll]', function(){
 243                         style.destroy();
 244                         element.destroy();
 245                 });
 246
 247         });
 248
 249         describe('getStyle height / width / borders from auto values', function(){
 250
 251                 var element;
 252
 253                 it('[beforeAll]', function(){
 254                         // The test framework stylesheet pollutes this test by setting border at 0px.
 255                         // Create an unknown element to bypass it and use browser defaults.
 256                         element = new Element('unknown', {
 257                                 styles: {
 258                                         display: 'block'
 259                                 }
 260                         });
 261
 262                         var child = new Element('div', {
 263                                 styles: {
 264                                         width: '200px',
 265                                         height: '100px'
 266                                 }
 267                         });
 268
 269                         element.adopt(child).inject(document.body);
 270                 });
 271
 272                 it('should inherit the height from the child', function(){
 273                         expect(element.getStyle('height')).to.equal('100px');
 274                 });
 275
 276                 it('should get a pixel based width', function(){
 277                         expect(element.getStyle('width')).to.match(/\d+px/);
 278                 });
 279
 280                 it('should have a 0px border left', function(){
 281                         expect(element.getStyle('borderLeftWidth')).to.equal('0px');
 282                 });
 283
 284                 it('[afterAll]', function(){
 285                         element.destroy();
 286                 });
 287
 288         });
 289
 290         describe('getStyle border after setStyle', function(){
 291
 292                 it('should have same order when getting a previously set border', function(){
 293                         var border = '2px solid #123abc';
 294                         expect(new Element('div').setStyle('border', border).getStyle('border')).to.equal(border);
 295                 });
 296
 297         });
 298
 299         describe('getComputedStyle margin-left on detached element', function(){
 300
 301                 it('should have a non-null margin-left', function(){
 302                         expect(new Element('div').getComputedStyle('margin-left')).to.not.equal(null);
 303                 });
 304
 305         });
 306
 307         describe('set/getStyle background-size', function(){
 308
 309                 xit('should return the correct pixel size', function(){
 310                         var foo = new Element('div', {
 311                                 styles: {
 312                                         backgroundSize: '44px'
 313                                 }
 314                         });
 315                         foo.setStyle('background-size', 20);
 316                         expect(foo.getStyle('backgroundSize')).to.equal('20px');
 317                 });
 318
 319         });
 320
 321         describe('getStyle background-position', function(){
 322                 beforeEach(function(){
 323                         var className = 'getStyleBackgroundPosition';
 324                         var style = this.style = $(document.createElement('style'));
 325                         style.type = 'text/css';
 326                         var definition = [
 327                                 '.' + className + '{',
 328                                 '    background: #69a none no-repeat left bottom;',
 329                                 '}'
 330                         ].join('');
 331
 332                         // Fix this. See: https://github.com/mootools/mootools-core/issues/2265
 333                         if (style.styleSheet) style.styleSheet.cssText = definition;
 334                         else style.set('text', definition);
 335
 336                         document.head.appendChild(style);
 337
 338                         this.element = new Element('div', {
 339                                 'class': className,
 340                                 text: 'yo'
 341                         }).inject(document.body);
 342                 });
 343
 344                 afterEach(function(){
 345                         this.style.destroy();
 346                         this.element.destroy();
 347                         this.element = null;
 348                 });
 349
 350                 it('should have non-empty background-position shorthand', function(){
 351                         expect(this.element.getStyle('background-position')).to.not.equal(null);
 352                         expect(this.element.getStyle('background-position')).to.match(/\w+/);
 353                 });
 354
 355                 it('should not return a keyword-based background-position shorthand', function(){
 356                         expect(this.element.getStyle('background-position')).to.not.match(/(top|right|bottom|left)/);
 357                         expect(this.element.getStyle('background-position')).to.equal('0% 100%');
 358                 });
 359
 360                 it('should have non-empty background-position on an element with no set styles', function(){
 361                         var element = new Element('div');
 362                         expect(element.getStyle('background-position')).to.not.equal(null);
 363                         expect(element.getStyle('background-position')).to.match(/\w+/);
 364                         element = null;
 365                 });
 366
 367                 it('should remove the background-position', function(){
 368                         var element = new Element('div');
 369                         element.setStyle('background-position', '40px 10px');
 370                         element.setStyle('background-position', null);
 371                         expect(element.getStyle('background-position')).to.match(/0px 0px|0% 0%/);
 372                 });
 373
 374         });
 375
 376         describe('Border Radius', function(){
 377
 378                 var supportBorderRadius = (document.body.style.borderRadius != null);
 379                 if (navigator.userAgent.match(/PhantomJS\/1./)) supportBorderRadius = false;
 380                 var dit = supportBorderRadius ? it : xit; // Don't run unless border-radius is supported.
 381                 var element = new Element('div');
 382
 383                 dit('should set and read each borderRadius corner', function(){
 384                         expect(element.getStyle('borderRadius')).to.equal('0px 0px 0px 0px');
 385                         element.setStyle('border-top-left-radius', '15px');
 386                         expect(element.getStyle('border-top-left-radius')).to.equal('15px');
 387                         expect(element.getStyle('borderRadius')).to.equal('15px 0px 0px 0px');
 388
 389                         element.setStyle('border-radius', '10px');
 390                         expect(element.getStyle('border-top-left-radius')).to.not.equal('15px');
 391                         expect(element.getStyle('border-top-left-radius')).to.equal('10px');
 392
 393                         element.setStyle('border-radius', '2em');
 394                         element.setStyle('border-bottom-left-radius', '1em');
 395                         expect(element.getStyle('border-bottom-left-radius')).to.equal('1em');
 396                         expect(element.getStyle('border-radius')).to.equal('2em 2em 2em 1em');
 397
 398                         element.setStyle('border-radius', '2px 2px 0px 0px');
 399                         expect(element.getStyle('border-radius')).to.equal('2px 2px 0px 0px');
 400                         element.setStyle('borderRadius', '10px');
 401                         element.setStyle('border-top-left-radius', '20px');
 402                         element.setStyle('border-bottom-left-radius', '0px');
 403                         expect(element.getStyle('border-top-left-radius')).to.equal('20px');
 404                         expect(element.getStyle('border-radius')).to.equal('20px 10px 10px 0px');
 405                 });
 406
 407                 element.destroy();
 408
 409         });
 410
 411 });