diff --git a/index.js b/index.js index f18eb02..74abb16 100644 --- a/index.js +++ b/index.js @@ -522,13 +522,37 @@ proto.contentHeight = function() { var pbot = style.getPropertyValue('padding-bottom').replace('px', '') - 0; return this.innerHeight() - ptop - pbot; - }; proto.scrollHeight = function() { return this.els[0].scrollHeight; }; +/// includes border +proto.outerWidth = function() { + return this.els[0].offsetWidth; +}; + +/// no border, includes padding +proto.innerWidth = function() { + return this.els[0].clientWidth; +}; + +/// no border, no padding +/// this is slower than the others because it must get computed style values +proto.contentWidth = function() { + var style = window.getComputedStyle(this.els[0], null); + var pleft = style.getPropertyValue('padding-left').replace('px', '') - 0; + var pright = style.getPropertyValue('padding-right').replace('px', '') - 0; + + return this.innerWidth() - pleft - pright; + +}; + +proto.scrollWidth = function() { + return this.els[0].scrollWidth; +}; + /** * Add the given class `name`. * diff --git a/test/dimensions.js b/test/dimensions.js index 6703f3e..9b5db28 100644 --- a/test/dimensions.js +++ b/test/dimensions.js @@ -56,3 +56,52 @@ test('.scrollHeight()', function() { }); suite('dimensions - width'); + +var w1 = dom('
'); +var w2 = dom('
'); + +// box sized div +var w3 = dom('
'); + +var w4 = dom('
'); + +test('setup', function() { + // need to append to document to get height + dom(document.body).append(w1); + + // two elements in a div + dom(document.body).append(w2); + w2.append(w1.clone()).append(w1.clone()); + + dom(document.body).append(w3); + + var d = dom('
'); + w4.append(d.clone()); + dom(document.body).append(w4); +}); + +test('.outerWidth()', function() { + assert.equal(w1.outerWidth(), 5); + assert.equal(w2.outerWidth(), 14); + assert.equal(w3.outerWidth(), 10); + assert.equal(w4.outerWidth(), 5); +}); + +test('.innerWidth()', function() { + assert.equal(w1.innerWidth(), 3); + assert.equal(w2.innerWidth(), 14); + assert.equal(w3.innerWidth(), 8); + assert.equal(w4.innerWidth(), 5); +}); + +test('.contentWidth()', function() { + assert.equal(w1.contentWidth(), 1); + assert.equal(w2.contentWidth(), 14); + assert.equal(w3.contentWidth(), 6); + assert.equal(w4.contentWidth(), 5); +}); + +test('.scrollWidth()', function() { + assert.equal(w4.scrollWidth(), 20); +}); +