Merge pull request #9396 from twbs/docs-html-validation

add HTML5 validation of docs pages to the build

.gitignore

@@ -33,6 +33,9 @@ nbproject
 *.komodoproject
 .komodotools
 
+# grunt-html-validation
+validation-staus.json
+
 # Folders to ignore
 .hg
 .svn

.travis.yml

@@ -2,6 +2,7 @@ language: node_js
 node_js:
   - 0.8
 before_script:
+  - gem install jekyll
   - npm install -g grunt-cli
 env:
   global:

Gruntfile.js

@@ -102,6 +102,19 @@ module.exports = function(grunt) {
       }
     },
 
+    jekyll: {
+      docs: {}
+    },
+
+    validation: {
+      options: {
+        reset: true,
+      },
+      files: {
+        src: ["_gh_pages/**/*.html"]
+      }
+    },
+
     watch: {
       src: {
         files: '<%= jshint.src.src %>',
@@ -127,12 +140,17 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-qunit');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-html-validation');
+  grunt.loadNpmTasks('grunt-jekyll');
   grunt.loadNpmTasks('grunt-recess');
   grunt.loadNpmTasks('browserstack-runner');
 
 
+  // Docs HTML validation task
+  grunt.registerTask('validate-docs', ['jekyll', 'validation']);
+
   // Test task.
-  var testSubtasks = ['jshint', 'qunit'];
+  var testSubtasks = ['jshint', 'qunit', 'validate-docs'];
   // Only run BrowserStack tests under Travis
   if (process.env.TRAVIS) {
     // Only run BrowserStack tests if this is a mainline commit in twbs/bootstrap, or you have your own BrowserStack key

css.html

@@ -2012,9 +2012,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
     </div>
     <div class="bs-example bs-example-images">
-      <img data-src="holder.js/140x140" class="img-rounded" alt="A generic square placeholder image with rounded corners">
-      <img data-src="holder.js/140x140" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
-      <img data-src="holder.js/140x140" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
+      <img data-src="holder.js/140x140" src="data:image/png;base64," class="img-rounded" alt="A generic square placeholder image with rounded corners">
+      <img data-src="holder.js/140x140" src="data:image/png;base64," class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
+      <img data-src="holder.js/140x140" src="data:image/png;base64," class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
     </div>
 {% highlight html %}
 <img src="..." alt="..." class="img-rounded">

javascript.html

@@ -1613,13 +1613,13 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
         </ol>
         <div class="carousel-inner">
           <div class="item active">
-            <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
+            <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
           </div>
           <div class="item">
-            <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
+            <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
           </div>
           <div class="item">
-            <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
+            <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
           </div>
         </div>
         <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
@@ -1675,21 +1675,21 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
         </ol>
         <div class="carousel-inner">
           <div class="item active">
-            <img data-src="holder.js/900x500/auto/#777:#777" alt="">
+            <img data-src="holder.js/900x500/auto/#777:#777" src="data:image/png;base64," alt="First slide image">
             <div class="carousel-caption">
               <h3>First slide label</h3>
               <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
             </div>
           </div>
           <div class="item">
-            <img data-src="holder.js/900x500/auto/#666:#666" alt="">
+            <img data-src="holder.js/900x500/auto/#666:#666" src="data:image/png;base64," alt="Second slide image">
             <div class="carousel-caption">
               <h3>Second slide label</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
             </div>
           </div>
           <div class="item">
-            <img data-src="holder.js/900x500/auto/#555:#5555" alt="">
+            <img data-src="holder.js/900x500/auto/#555:#5555" src="data:image/png;base64," alt="Third slide image">
             <div class="carousel-caption">
               <h3>Third slide label</h3>
               <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
@@ -1706,7 +1706,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
     </div><!-- /example -->
 {% highlight html %}
 <div class="item active">
-  <img src="..." alt="">
+  <img src="..." alt="...">
   <div class="carousel-caption">
     <h3>...</h3>
     <p>...</p>

package.json

@@ -25,6 +25,8 @@
     , "grunt-contrib-uglify": "~0.2.2"
     , "grunt-contrib-qunit": "~0.2.2"
     , "grunt-contrib-watch": "~0.5.1"
+    , "grunt-html-validation": "git://github.com/praveenvijayan/grunt-html-validation.git"
+    , "grunt-jekyll": "~0.3.8"
     , "grunt-recess": "~0.3.3"
     , "browserstack-runner": "~0.0.11"
   }