add width properties

- outerWidth
- innerWidth
- scrollWidth
- contentWidth

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`.
  *

test/dimensions.js

@@ -56,3 +56,52 @@ test('.scrollHeight()', function() {
 });
 
 suite('dimensions - width');
+
+var w1 = dom('<div style="display:inline-block; width:1px; border:1px solid; padding:1px; margin:1px">');
+var w2 = dom('<div style="display:inline-block">');
+
+// box sized div
+var w3 = dom('<div style="display:inline-block;width:10px; border:1px solid; padding:1px; -mox-box-sizing:border-box; --webkit-box-sizing:border-box; box-sizing:border-box">');
+
+var w4 = dom('<div style="display:inline-block;width:5px">');
+
+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('<div style="display:inline-block; width:20px">');
+    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);
+});
+