Don't warn for empty spacer when element is self closing

Fixes #184.

package.json

@@ -64,7 +64,8 @@
     "express": "^4.11.2",
     "glob": "^4.4.0",
     "morgan": "^1.5.1",
-    "semver": "^4.3.0"
+    "semver": "^4.3.0",
+    "void-elements": "^2.0.1"
   },
   "main": "./src/bootlint.js",
   "bin": {

src/bootlint.js

@@ -10,6 +10,7 @@
 var cheerio = require('cheerio');
 var parseUrl = require('url').parse;
 var semver = require('semver');
+var voidElements = require('void-elements');
 var _location = require('./location');
 var LocationIndex = _location.LocationIndex;
 
@@ -828,15 +829,16 @@ var LocationIndex = _location.LocationIndex;
     });
     addLinter("W009", function lintEmptySpacerCols($, reporter) {
         var selector = COL_CLASSES.map(function (colClass) {
-            return colClass + ':not(col):not(:last-child)';
+            return colClass + ':not(:last-child)';
         }).join(',');
         var columns = $(selector);
         columns.each(function (_index, col) {
             var column = $(col);
+            var isVoidElement = voidElements[col.tagName.toLowerCase()];
             // can't just use :empty because :empty excludes nodes with all-whitespace text content
             var hasText = !!column.text().trim().length;
             var hasChildren = !!column.children(':first-child').length;
-            if (hasChildren || hasText) {
+            if (hasChildren || hasText || isVoidElement) {
                 return;
             }
 

test-infra/npm-shrinkwrap.json

@@ -1,6 +1,6 @@
 {
   "name": "bootlint",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "npm-shrinkwrap-version": "200.1.0",
   "node-version": "v0.12.0",
   "dependencies": {
@@ -1476,28 +1476,6 @@
                       "version": "1.1.1",
                       "resolved": "https://registry.npmjs.org/through2/-/through2-1.1.1.tgz",
                       "dependencies": {
-                        "readable-stream": {
-                          "version": "1.1.13",
-                          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.13.tgz",
-                          "dependencies": {
-                            "core-util-is": {
-                              "version": "1.0.1",
-                              "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.1.tgz"
-                            },
-                            "inherits": {
-                              "version": "2.0.1",
-                              "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz"
-                            },
-                            "isarray": {
-                              "version": "0.0.1",
-                              "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz"
-                            },
-                            "string_decoder": {
-                              "version": "0.10.31",
-                              "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
-                            }
-                          }
-                        },
                         "xtend": {
                           "version": "4.0.0",
                           "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.0.tgz"
@@ -4615,6 +4593,10 @@
           "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
         }
       }
+    },
+    "void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz"
     }
   }
 }

test/bootlint_test.js

@@ -452,7 +452,7 @@ exports.bootlint = {
     },
 
     'empty spacer grid columns': function (test) {
-        test.expect(9);
+        test.expect(10);
         test.deepEqual(lintHtml(utf8Fixture('grid/spacer-col/blank-text.html')),
             ['Using empty spacer columns isn\'t necessary with Bootstrap\'s grid. So instead of having an empty grid column with `class="col-xs-11"` , just add `class="col-xs-offset-11"` to the next grid column.'],
             'should complain when spacer column contains only whitespace text content.'
@@ -489,6 +489,10 @@ exports.bootlint = {
             ['Using empty spacer columns isn\'t necessary with Bootstrap\'s grid. So instead of having an empty grid column with `class="col-xs-11 col-sm-8 col-md-6 col-lg-5"` , just add `class="col-xs-offset-11 col-sm-offset-8 col-md-offset-6 col-lg-offset-5"` to the next grid column.'],
             'should sort the grid classes in its message and handle multiple grid classes correctly.'
         );
+        test.deepEqual(lintHtml(utf8Fixture('grid/spacer-col/void-elements.html')),
+            [],
+            'should ignore void elements.'
+        );
         test.done();
     },
 

test/fixtures/grid/spacer-col/void-elements.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Test</title>
+        <!--[if lt IE 9]>
+            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+        <![endif]-->
+        <script src="../../../lib/jquery.min.js"></script>
+
+        <link rel="stylesheet" href="../../../lib/qunit.css">
+        <script src="../../../lib/qunit.js"></script>
+        <script src="../../../../dist/browser/bootlint.js"></script>
+        <script src="../../generic-qunit.js"></script>
+    </head>
+    <body>
+        <div class="container">
+            <div class="row">
+                <br class="col-xs-4">
+                <div class="col-xs-8">Actual column</div>
+            </div>
+        </div>
+
+        <div class="container">
+            <div class="row">
+                <embed class="col-xs-4" src="#" type="video/mp4">
+                <div class="col-xs-8">Actual column</div>
+            </div>
+        </div>
+
+        <div class="container">
+            <div class="row">
+                <hr class="col-xs-4">
+                <div class="col-xs-8">Actual column</div>
+            </div>
+        </div>
+
+        <div class="container">
+            <div class="row">
+                <img class="col-xs-4" src="#" alt="An image">
+                <div class="col-xs-8">Actual column</div>
+            </div>
+        </div>
+
+        <div class="container">
+            <div class="row">
+                <input class="col-xs-4" type="text">
+                <div class="col-xs-8">Actual column</div>
+            </div>
+        </div>
+
+        <div id="qunit"></div>
+        <ol id="bootlint"></ol>
+    </body>
+</html>