it('should get the modified float', function() {
var div = domify('<div>');
el.appendChild(div);
css(div, 'float', 'right');
assert('right' == css(div, 'float'), 'Modified CSS float using \"float\": Assert float is right');
el.removeChild(div);
});
it('should return z-index properly (#14432)', function() {
var div = domify('<div>');
css(div, { position: 'absolute', 'z-index': 1000 });
el.appendChild(div);
assert('1000' == css(div, 'z-index'));
el.removeChild(div);
});
test('hidden div', function () {
css(div, {display: 'none'})
assert(dimensions(div).innerHeight() === 70)
// reset
css(div, {display: '', border: '', padding: '', width: '', height: ''})
})
each([ "0", "0.25", "0.5", "0.75", "1" ], function(opacity) {
css(div, 'opacity', opacity);
assert(parseFloat(opacity) == css(div, 'opacity'), 'opacity can be a string');
opacity = parseFloat(opacity);
css(div, 'opacity', opacity);
assert(opacity == css(div, 'opacity'), 'opacity can be a number');
});
it('should set percentages correctly', function() {
child.setAttribute('class', 'prct');
var val = parseInt(css(child, 'fontSize'), 10);
var checkval;
if (16 == val || 24 == val) checkval = val;
assert(checkval == val, 'verify font-size % is set');
assert('string' == typeof css(child, 'width'), 'make sure a string is returned from width');
});
it('should handle modified font-size', function() {
var span = domify('<span style="float: right">');
el.appendChild(span);
css(span, 'font-size', '30px');
assert('right' == css(span, 'float'), 'Modified CSS float using \"float\": Assert float is right');
assert('30px' == css(span, 'font-size'), 'Modified CSS font-size: Assert font-size is 30px');
el.removeChild(span);
});
it ('should be able to get height on hidden elements', function() {
var div = domify( "<div style='display:none;'><input type='text' style='height:20px;'/><textarea style='height:20px;'></textarea><div style='height:20px;'></div></div>");
el.appendChild(div);
assert('20px' == css(div.querySelector('input'), 'height'), 'height on hidden input');
assert('20px' == css(div.querySelector('textarea'), 'height'), 'height on hidden textarea');
assert('20px' == css(div.querySelector('div'), 'height'), 'height on hidden div');
el.removeChild(div);
});
PageArrows.prototype.setPage = function (index, total) {
if(!this._arrows){
return
}
css(this._arrows.left, {
display:index>0 ? 'block' : 'none'
})
css(this._arrows.right, {
display:index<total-1 ? 'block' : 'none'
})
}
it('shouldn\'t change an attribute on NaN', function() {
var div = domify('<div style="height: 36px">');
el.appendChild(div);
css(div, 'height', parseFloat('nan'));
assert('36px' == div.style.height);
el.removeChild(div);
});
Scrollbar.Vertical.prototype.update = function () {
var paneHeight = this.pane.el.offsetHeight,
trackHeight = paneHeight - this.pane.padding * 2,
scrollHeight = this.pane.inner.scrollHeight;
var scrollbarHeight = trackHeight * paneHeight / scrollHeight;
scrollbarHeight = scrollbarHeight < 20 ? 20 : scrollbarHeight;
var topPos = trackHeight * this.pane.inner.scrollTop / scrollHeight;
if((topPos + scrollbarHeight) > trackHeight) {
var diff = (topPos + scrollbarHeight) - trackHeight;
topPos = topPos - diff - 3;
}
scrollbarHeight = Math.floor(scrollbarHeight);
topPos = Math.floor(topPos);
css(this.el, {
height: scrollbarHeight,
transform: 'translateY(' + topPos + 'px)'
});
return paneHeight < scrollHeight;
};
function pad(dir, n){
var els = document.all;
var style;
for (var i = 0; i < els.length; ++i) {
if (1 != els[i].nodeType) continue;
style = window.getComputedStyle(els[i]);
if ('fixed' != style.position) continue;
if ('auto' == style[dir]) continue;
var value = parseFloat(style[dir]);
if (n <= value) continue;
css(els[i], dir, value + n);
}
css(document.body, 'margin-' + dir, n);
}
Time.prototype.place = function() {
var par = this.el.parentNode;
var min = Math.min(par.offsetHeight, par.offsetWidth);
var size = min * .8;
this.canvas.width = size;
this.canvas.height = size;
autoscale(this.canvas);
css(this.el, {
display: 'block'
});
css(this.canvas, {
position: 'absolute',
top: par.offsetHeight / 2 - size / 2,
left: par.offsetWidth / 2 - size / 2
});
};
it('shouldn\'t change with null', function() {
var div = domify('<div style="height: 36px">');
el.appendChild(div);
css(div, 'height', null);
assert('36px' == div.style.height);
el.removeChild(div);
});
width: function () {
css(el, {
minWidth: size('width'),
display: 'block'
});
return { listen: listen('width') };
}
Tip.prototype.show = function(el){
var self = this;
if ('string' == typeof el) el = query(el);
// show it
this.target = el;
document.body.appendChild(this.el);
this.classes.add('tip-' + this._position.replace(/\s+/g, '-'));
raf(function(){
self.classes.remove('tip-hide');
});
// x,y
if ('number' == typeof el) {
var x = arguments[0];
var y = arguments[1];
this.emit('show');
css(this.el, {
top: y,
left: x
});
return this;
}
// el
this.reposition();
this.el.offsetHeight;
this.emit('show', this.target);
this.winEvents.bind('resize', 'reposition');
this.winEvents.bind('scroll', 'reposition');
return this;
};
height: function () {
css(el, {
minHeight: size('height'),
display: 'block'
});
return { listen: listen('height') };
},
Tip.prototype.reposition = function(){
var pos = this._position;
var off = this.offset(pos);
var newpos = this._auto && this.suggested(pos, off);
if (newpos) off = this.offset(pos = newpos);
this.replaceClass(pos);
css(this.el, off);
};
suiteSetup(function () {
table = domify('<table><colgroup><col/><col/></colgroup><tbody><tr><td></td><td>a</td></tr><tr><td></td><td>a</td></tr></tbody></table>')
td = table.querySelector('td')
col = table.querySelector('col')
document.body.appendChild(table)
dimensions(col).width(300)
css(td, {margin: 0, padding: 0})
})
dom.css = function (el, styles, val) {
el = raw(el)
if ('string' == typeof styles) {
var prop = styles
if (2 == arguments.length) return el.style[prop]
styles = {}
styles[prop] = val
}
css(el, styles)
return el
}
ImageZoom.prototype.zoomToFull = function(){
redraw(this.clone);
css(this.clone, {
top: 0,
left: 0,
width: '100%',
height: '100%'
});
this.emit('zoom', this);
return this;
};
exports.css = function(prop, val) {
// getter
if (!val && 'object' != typeof prop) {
return css(this[0], prop);
}
// setter
this.forEach(function(el) {
css(el, prop, val);
});
return this;
};
Scrollbar.Horizontal.prototype.update = function () {
var paneWidth = this.pane.el.offsetWidth,
trackWidth = paneWidth - this.pane.padding * 2,
scrollWidth = this.pane.inner.scrollWidth;
css(this.el, {
width: Math.floor(trackWidth * paneWidth / scrollWidth),
transform: 'translateX(' + Math.floor(trackWidth * this.pane.inner.scrollLeft / scrollWidth) + 'px)'
});
return paneWidth < scrollWidth;
};
ImageZoom.prototype.setOriginalDeminsions = function(){
// Ideally, we would use translate3d to animate the position of the
// element, instead of left + top. Consider using the below
// code in the future...
css(this.clone, {
top: this.originalPosition.top,
left: this.originalPosition.left,
width: this.originalDimensions.width,
height: this.originalDimensions.height,
'background-image' : 'url('+ this.src +')'
});
return this;
};
it ('should be compatible with old component/css', function() {
var el = { style: {} };
css(el, {
display: 'block',
top: 5,
left: 5,
width: 1,
height: 1,
opacity: 1,
lineHeight: 1.5,
zIndex: 10
});
assert('block' == el.style.display)
assert('5px' == el.style.top)
assert('5px' == el.style.left)
assert('1px' == el.style.width)
assert('1px' == el.style.height)
assert('1' == el.style.opacity)
assert('1.5' == el.style.lineHeight)
assert('10' == el.style.zIndex)
assert(el == css(el, {}))
});
suiteSetup(function () {
divNormal = domify('<div></div>')
css(divNormal, {
width: '100px',
height: '100px',
border: '10px solid white',
padding: '2px',
margin: '3px'
})
divChild = divNormal.cloneNode(true)
var divUnconnected = divNormal.cloneNode(true)
divHiddenParent = domify('<div></div>')
css(divHiddenParent, {
display: 'none'
})
divHiddenParent.appendChild(divChild)
document.body.appendChild(divHiddenParent)
document.body.appendChild(divNormal)
})
it('should handle negative numbers by setting to zero', function() {
var div = domify('<div></div>');
el.appendChild(div);
css(div, { width: 1, height: 1 });
assert('1px' == css(div, 'height'));
assert('1px' == css(div, 'width'));
css(div, { width: -1, height: -1 });
assert('0px' == css(div, 'height'));
assert('0px' == css(div, 'width'));
el.removeChild(div);
});
spin.update = function(){
debug('update');
var w = el.offsetWidth;
var h = el.offsetHeight;
// size
var s = options.size || w / 5;
spin.size(s);
debug('show %dpx (%dms)', s, ms);
// position
css(spin.el, {
position: 'absolute',
top: h / 2 - s / 2,
left: w / 2 - s / 2
});
}
Scrollbar.prototype.mousedown = function (ev) {
ev.preventDefault();
this.dragging = true;
var scroll = matrix2position(css(this.el, 'transform'));
this.startPageX = ev.pageX - scroll[0];
this.startPageY = ev.pageY - scroll[1];
this.ownerEvents = events(this.el.ownerDocument, this);
// prevent crazy selections on IE
this.el.ownerDocument.onselectstart = function () { return false; };
this.ownerEvents.bind('mousemove', 'mousemove');
this.ownerEvents.bind('mouseup', 'cancelDragging');
};
function cssParse(file, silent, map) {
var cssString = cssString(file);
var ast = css(
cssString,
{
silent: silent,
source: file
}
);
return css.stringify(
ast,
{
sourcemap: map
}
);
}
function Antiscroll (el, opts) {
if (!(this instanceof Antiscroll)) return new Antiscroll(el, opts);
this.el = el;
this.options = opts || {};
this.x = (false !== this.options.x) || this.options.forceHorizontal;
this.y = (false !== this.options.y) || this.options.forceVertical;
this.autoHide = false !== this.options.autoHide;
this.padding = undefined === this.options.padding ? 2 : this.options.padding;
this.inner = q('.antiscroll-inner', this.el);
css(this.inner, {
width: this.inner.offsetWidth + (this.y ? scrollbarSize() : 0),
height: this.inner.offsetHeight + (this.x ? scrollbarSize() : 0)
});
this.refresh();
}