remove closureness from plugins

author: fat <[email protected]> 2015-05-06 13:34:14 -0700
committer: fat <[email protected]> 2015-05-06 13:34:14 -0700
commit: d1fbe200f46002431cdeebf965c4b789ef7ed267 (patch)
tree: 43a7cc7667492e519b906f8a428935da2972ac14 /js/tests
parent: 09fb80568a52af6c440db971cdc6fd88eab8f8b5 (diff)
download: bootstrap-d1fbe200f46002431cdeebf965c4b789ef7ed267.tar.xz
bootstrap-d1fbe200f46002431cdeebf965c4b789ef7ed267.zip
22 files changed, 1800 insertions, 614 deletions
diff --git a/js/tests/closure.html b/js/tests/closure.html
deleted file mode 100644
index 82c65f62b..000000000
--- a/js/tests/closure.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Bootstrap Plugin Test Suite</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- jQuery -->
-    <script src="vendor/jquery.min.js"></script>
-
-    <!-- QUnit -->
-    <link rel="stylesheet" href="vendor/qunit.css" media="screen">
-    <script src="vendor/qunit.js"></script>
-    <style>
-      #qunit-tests > li.pass {
-        display: none;/* Make it easier to see failing tests in Sauce screencasts */
-      }
-
-      #qunit-fixture {
-        top: 0;
-        left: 0;
-      }
-    </style>
-    <script>
-      // See https://github.com/axemclion/grunt-saucelabs#test-result-details-with-qunit
-      var log = []
-      QUnit.done(function (testResults) {
-        var tests = []
-        for (var i = 0, len = log.length; i < len; i++) {
-          var details = log[i]
-          tests.push({
-            name: details.name,
-            result: details.result,
-            expected: details.expected,
-            actual: details.actual,
-            source: details.source
-          })
-        }
-        testResults.tests = tests
-
-        window.global_test_results = testResults
-      })
-
-      QUnit.testStart(function (testDetails) {
-        $(window).scrollTop(0)
-        QUnit.log = function (details) {
-          if (!details.result) {
-            details.name = testDetails.name
-            log.push(details)
-          }
-        }
-      })
-
-      // Cleanup
-      QUnit.testDone(function () {
-        $('#qunit-fixture').empty()
-        $('#modal-test, .modal-backdrop').remove()
-      })
-    </script>
-
-    <!-- Plugin sources -->
-    <script src="../../dist/js/bootstrap.min.js"></script>
-
-    <!-- Unit tests -->
-    <script src="unit/alert.js"></script>
-    <script src="unit/button.js"></script>
-    <script src="unit/carousel.js"></script>
-    <script src="unit/collapse.js"></script>
-    <script src="unit/dropdown.js"></script>
-    <script src="unit/modal.js"></script>
-    <script src="unit/scrollspy.js"></script>
-    <script src="unit/tab.js"></script>
-    <script src="unit/tooltip.js"></script>
-    <script src="unit/popover.js"></script>
-
-  </head>
-  <body>
-    <div id="qunit-container">
-      <div id="qunit"></div>
-      <div id="qunit-fixture"></div>
-    </div>
-  </body>
-</html>
diff --git a/js/tests/index.html b/js/tests/index.html
index d1ec0a7f4..fab2ebc16 100644
--- a/js/tests/index.html
+++ b/js/tests/index.html
@@ -130,7 +130,7 @@
     </script>
 
     <!-- Plugin sources -->
-    <script src="../../js/util.js"></script>
+    <script>$.support.transition = false</script>
     <script src="../../js/alert.js"></script>
     <script src="../../js/button.js"></script>
     <script src="../../js/carousel.js"></script>
@@ -141,6 +141,7 @@
     <script src="../../js/tab.js"></script>
     <script src="../../js/tooltip.js"></script>
     <script src="../../js/popover.js"></script>
+    <script src="../../js/affix.js"></script>
 
     <!-- Unit tests -->
     <script src="unit/alert.js"></script>
@@ -153,6 +154,7 @@
     <script src="unit/tab.js"></script>
     <script src="unit/tooltip.js"></script>
     <script src="unit/popover.js"></script>
+    <script src="unit/affix.js"></script>
 
   </head>
   <body>
diff --git a/js/tests/unit/affix.js b/js/tests/unit/affix.js
new file mode 100644
index 000000000..3a6918f86
--- /dev/null
+++ b/js/tests/unit/affix.js
@@ -0,0 +1,107 @@
+$(function () {
+  'use strict';
+
+  QUnit.module('affix plugin')
+
+  QUnit.test('should be defined on jquery object', function (assert) {
+    assert.expect(1)
+    assert.ok($(document.body).affix, 'affix method is defined')
+  })
+
+  QUnit.module('affix', {
+    beforeEach: function () {
+      // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
+      $.fn.bootstrapAffix = $.fn.affix.noConflict()
+    },
+    afterEach: function () {
+      $.fn.affix = $.fn.bootstrapAffix
+      delete $.fn.bootstrapAffix
+    }
+  })
+
+  QUnit.test('should provide no conflict', function (assert) {
+    assert.expect(1)
+    assert.strictEqual($.fn.affix, undefined, 'affix was set back to undefined (org value)')
+  })
+
+  QUnit.test('should return jquery collection containing the element', function (assert) {
+    assert.expect(2)
+    var $el = $('<div/>')
+    var $affix = $el.bootstrapAffix()
+    assert.ok($affix instanceof $, 'returns jquery collection')
+    assert.strictEqual($affix[0], $el[0], 'collection contains element')
+  })
+
+  QUnit.test('should exit early if element is not visible', function (assert) {
+    assert.expect(1)
+    var $affix = $('<div style="display: none"/>').bootstrapAffix()
+    $affix.data('bs.affix').checkPosition()
+    assert.ok(!$affix.hasClass('affix'), 'affix class was not added')
+  })
+
+  QUnit.test('should trigger affixed event after affix', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+
+    var templateHTML = '<div id="affixTarget">'
+        + '<ul>'
+        + '<li>Please affix</li>'
+        + '<li>And unaffix</li>'
+        + '</ul>'
+        + '</div>'
+        + '<div id="affixAfter" style="height: 20000px; display: block;"/>'
+    $(templateHTML).appendTo(document.body)
+
+    $('#affixTarget').bootstrapAffix({
+      offset: $('#affixTarget ul').position()
+    })
+
+    $('#affixTarget')
+      .on('affix.bs.affix', function () {
+        assert.ok(true, 'affix event fired')
+      }).on('affixed.bs.affix', function () {
+        assert.ok(true, 'affixed event fired')
+        $('#affixTarget, #affixAfter').remove()
+        done()
+      })
+
+    setTimeout(function () {
+      window.scrollTo(0, document.body.scrollHeight)
+
+      setTimeout(function () {
+        window.scroll(0, 0)
+      }, 16) // for testing in a browser
+    }, 0)
+  })
+
+  QUnit.test('should affix-top when scrolling up to offset when parent has padding', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+
+    var templateHTML = '<div id="padding-offset" style="padding-top: 20px;">'
+        + '<div id="affixTopTarget">'
+        + '<p>Testing affix-top class is added</p>'
+        + '</div>'
+        + '<div style="height: 1000px; display: block;"/>'
+        + '</div>'
+    $(templateHTML).appendTo(document.body)
+
+    $('#affixTopTarget')
+      .bootstrapAffix({
+        offset: { top: 120, bottom: 0 }
+      })
+      .on('affixed-top.bs.affix', function () {
+        assert.ok($('#affixTopTarget').hasClass('affix-top'), 'affix-top class applied')
+        $('#padding-offset').remove()
+        done()
+      })
+
+    setTimeout(function () {
+      window.scrollTo(0, document.body.scrollHeight)
+
+      setTimeout(function () {
+        window.scroll(0, 119)
+      }, 250)
+    }, 250)
+  })
+})
diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index 08b071d65..691796c42 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -1,83 +1,137 @@
 $(function () {
   'use strict';
 
-  module('button plugin')
+  QUnit.module('button plugin')
 
-  test('should be defined on jquery object', function () {
-    ok($(document.body).button, 'button method is defined')
+  QUnit.test('should be defined on jquery object', function (assert) {
+    assert.expect(1)
+    assert.ok($(document.body).button, 'button method is defined')
   })
 
-  module('button', {
-    setup: function () {
+  QUnit.module('button', {
+    beforeEach: function () {
       // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
       $.fn.bootstrapButton = $.fn.button.noConflict()
     },
-    teardown: function () {
+    afterEach: function () {
       $.fn.button = $.fn.bootstrapButton
       delete $.fn.bootstrapButton
     }
   })
 
-  test('should provide no conflict', function () {
-    strictEqual($.fn.button, undefined, 'button was set back to undefined (org value)')
+  QUnit.test('should provide no conflict', function (assert) {
+    assert.expect(1)
+    assert.strictEqual($.fn.button, undefined, 'button was set back to undefined (org value)')
   })
 
-  test('should return jquery collection containing the element', function () {
+  QUnit.test('should return jquery collection containing the element', function (assert) {
+    assert.expect(2)
     var $el = $('<div/>')
     var $button = $el.bootstrapButton()
-    ok($button instanceof $, 'returns jquery collection')
-    strictEqual($button[0], $el[0], 'collection contains element')
+    assert.ok($button instanceof $, 'returns jquery collection')
+    assert.strictEqual($button[0], $el[0], 'collection contains element')
   })
 
-  test('should toggle active', function () {
+  QUnit.test('should return set state to loading', function (assert) {
+    assert.expect(4)
+    var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
+    assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo')
+    $btn.bootstrapButton('loading')
+    var done = assert.async()
+    setTimeout(function () {
+      assert.strictEqual($btn.html(), 'fat', 'btn text equals fat')
+      assert.ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
+      assert.ok($btn.hasClass('disabled'), 'btn has disabled class')
+      done()
+    }, 0)
+  })
+
+  QUnit.test('should return reset state', function (assert) {
+    assert.expect(7)
+    var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
+    assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo')
+    $btn.bootstrapButton('loading')
+    var doneOne = assert.async()
+    setTimeout(function () {
+      assert.strictEqual($btn.html(), 'fat', 'btn text equals fat')
+      assert.ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
+      assert.ok($btn.hasClass('disabled'), 'btn has disabled class')
+      doneOne()
+      var doneTwo = assert.async()
+      $btn.bootstrapButton('reset')
+      setTimeout(function () {
+        assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo')
+        assert.ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
+        assert.ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
+        doneTwo()
+      }, 0)
+    }, 0)
+  })
+
+  QUnit.test('should work with an empty string as reset state', function (assert) {
+    assert.expect(7)
+    var $btn = $('<button class="btn" data-loading-text="fat"/>')
+    assert.strictEqual($btn.html(), '', 'btn text equals ""')
+    $btn.bootstrapButton('loading')
+    var doneOne = assert.async()
+    setTimeout(function () {
+      assert.strictEqual($btn.html(), 'fat', 'btn text equals fat')
+      assert.ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
+      assert.ok($btn.hasClass('disabled'), 'btn has disabled class')
+      doneOne()
+      var doneTwo = assert.async()
+      $btn.bootstrapButton('reset')
+      setTimeout(function () {
+        assert.strictEqual($btn.html(), '', 'btn text equals ""')
+        assert.ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
+        assert.ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
+        doneTwo()
+      }, 0)
+    }, 0)
+  })
+
+  QUnit.test('should toggle active', function (assert) {
+    assert.expect(2)
     var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
-    ok(!$btn.hasClass('active'), 'btn does not have active class')
+    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
     $btn.bootstrapButton('toggle')
-    ok($btn.hasClass('active'), 'btn has class active')
+    assert.ok($btn.hasClass('active'), 'btn has class active')
   })
 
-  test('should toggle active when btn children are clicked', function () {
+  QUnit.test('should toggle active when btn children are clicked', function (assert) {
+    assert.expect(2)
     var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
     var $inner = $('<i/>')
     $btn
       .append($inner)
       .appendTo('#qunit-fixture')
-    ok(!$btn.hasClass('active'), 'btn does not have active class')
-    $inner.click()
-    ok($btn.hasClass('active'), 'btn has class active')
+    assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
+    $inner.trigger('click')
+    assert.ok($btn.hasClass('active'), 'btn has class active')
   })
 
-  test('should toggle aria-pressed', function () {
+  QUnit.test('should toggle aria-pressed', function (assert) {
+    assert.expect(2)
     var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
-    equal($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
     $btn.bootstrapButton('toggle')
-    equal($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
+    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
   })
 
-  test('should toggle aria-pressed when btn children are clicked', function () {
+  QUnit.test('should toggle aria-pressed when btn children are clicked', function (assert) {
+    assert.expect(2)
     var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
     var $inner = $('<i/>')
     $btn
       .append($inner)
       .appendTo('#qunit-fixture')
-    equal($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
-    $inner.click()
-    equal($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
+    assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
+    $inner.trigger('click')
+    assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
   })
 
-  test('should toggle active when btn children are clicked within btn-group', function () {
-    var $btngroup = $('<div class="btn-group" data-toggle="buttons"/>')
-    var $btn = $('<button class="btn">fat</button>')
-    var $inner = $('<i/>')
-    $btngroup
-      .append($btn.append($inner))
-      .appendTo('#qunit-fixture')
-    ok(!$btn.hasClass('active'), 'btn does not have active class')
-    $inner.click()
-    ok($btn.hasClass('active'), 'btn has class active')
-  })
-
-  test('should check for closest matching toggle', function () {
+  QUnit.test('should check for closest matching toggle', function (assert) {
+    assert.expect(12)
     var groupHTML = '<div class="btn-group" data-toggle="buttons">'
       + '<label class="btn btn-primary active">'
       + '<input type="radio" name="options" id="option1" checked="true"> Option 1'
@@ -94,21 +148,21 @@ $(function () {
     var $btn1 = $group.children().eq(0)
     var $btn2 = $group.children().eq(1)
 
-    ok($btn1.hasClass('active'), 'btn1 has active class')
-    ok($btn1.find('input').prop('checked'), 'btn1 is checked')
-    ok(!$btn2.hasClass('active'), 'btn2 does not have active class')
-    ok(!$btn2.find('input').prop('checked'), 'btn2 is not checked')
-    $btn2.find('input').click()
-    ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
-    ok(!$btn1.find('input').prop('checked'), 'btn1 is checked')
-    ok($btn2.hasClass('active'), 'btn2 has active class')
-    ok($btn2.find('input').prop('checked'), 'btn2 is checked')
-
-    $btn2.find('input').click() // clicking an already checked radio should not un-check it
-    ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
-    ok(!$btn1.find('input').prop('checked'), 'btn1 is checked')
-    ok($btn2.hasClass('active'), 'btn2 has active class')
-    ok($btn2.find('input').prop('checked'), 'btn2 is checked')
+    assert.ok($btn1.hasClass('active'), 'btn1 has active class')
+    assert.ok($btn1.find('input').prop('checked'), 'btn1 is checked')
+    assert.ok(!$btn2.hasClass('active'), 'btn2 does not have active class')
+    assert.ok(!$btn2.find('input').prop('checked'), 'btn2 is not checked')
+    $btn2.find('input').trigger('click')
+    assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
+    assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
+    assert.ok($btn2.hasClass('active'), 'btn2 has active class')
+    assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
+
+    $btn2.find('input').trigger('click') // clicking an already checked radio should not un-check it
+    assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
+    assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
+    assert.ok($btn2.hasClass('active'), 'btn2 has active class')
+    assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
   })
 
 })
diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 2ad2c6734..39d250598 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -1,49 +1,54 @@
 $(function () {
   'use strict';
 
-  module('carousel plugin')
+  QUnit.module('carousel plugin')
 
-  test('should be defined on jQuery object', function () {
-    ok($(document.body).carousel, 'carousel method is defined')
+  QUnit.test('should be defined on jQuery object', function (assert) {
+    assert.expect(1)
+    assert.ok($(document.body).carousel, 'carousel method is defined')
   })
 
-  module('carousel', {
-    setup: function () {
+  QUnit.module('carousel', {
+    beforeEach: function () {
       // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
       $.fn.bootstrapCarousel = $.fn.carousel.noConflict()
     },
-    teardown: function () {
+    afterEach: function () {
       $.fn.carousel = $.fn.bootstrapCarousel
       delete $.fn.bootstrapCarousel
     }
   })
 
-  test('should provide no conflict', function () {
-    strictEqual($.fn.carousel, undefined, 'carousel was set back to undefined (orig value)')
+  QUnit.test('should provide no conflict', function (assert) {
+    assert.expect(1)
+    assert.strictEqual($.fn.carousel, undefined, 'carousel was set back to undefined (orig value)')
   })
 
-  test('should return jquery collection containing the element', function () {
+  QUnit.test('should return jquery collection containing the element', function (assert) {
+    assert.expect(2)
     var $el = $('<div/>')
     var $carousel = $el.bootstrapCarousel()
-    ok($carousel instanceof $, 'returns jquery collection')
-    strictEqual($carousel[0], $el[0], 'collection contains element')
+    assert.ok($carousel instanceof $, 'returns jquery collection')
+    assert.strictEqual($carousel[0], $el[0], 'collection contains element')
   })
 
-  test('should not fire slid when slide is prevented', function (assert) {
+  QUnit.test('should not fire slid when slide is prevented', function (assert) {
+    assert.expect(1)
     var done = assert.async()
     $('<div class="carousel"/>')
       .on('slide.bs.carousel', function (e) {
         e.preventDefault()
-        ok(true, 'slide event fired')
+        assert.ok(true, 'slide event fired')
         done()
       })
       .on('slid.bs.carousel', function () {
-        ok(false, 'slid event fired')
+        assert.ok(false, 'slid event fired')
       })
       .bootstrapCarousel('next')
   })
 
-  test('should reset when slide is prevented', function (assert) {
+  QUnit.test('should reset when slide is prevented', function (assert) {
+    assert.expect(6)
     var carouselHTML = '<div id="carousel-example-generic" class="carousel slide">'
         + '<ol class="carousel-indicators">'
         + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
@@ -51,13 +56,13 @@ $(function () {
         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
         + '</ol>'
         + '<div class="carousel-inner">'
-        + '<div class="carousel-item active">'
+        + '<div class="item active">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '<div class="carousel-caption"/>'
         + '</div>'
         + '</div>'
@@ -71,27 +76,28 @@ $(function () {
       .one('slide.bs.carousel', function (e) {
         e.preventDefault()
         setTimeout(function () {
-          ok($carousel.find('.carousel-item:eq(0)').is('.active'), 'first item still active')
-          ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
+          assert.ok($carousel.find('.item:eq(0)').is('.active'), 'first item still active')
+          assert.ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
           $carousel.bootstrapCarousel('next')
         }, 0)
       })
       .one('slid.bs.carousel', function () {
         setTimeout(function () {
-          ok(!$carousel.find('.carousel-item:eq(0)').is('.active'), 'first item still active')
-          ok(!$carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
-          ok($carousel.find('.carousel-item:eq(1)').is('.active'), 'second item active')
-          ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'), 'second indicator active')
+          assert.ok(!$carousel.find('.item:eq(0)').is('.active'), 'first item still active')
+          assert.ok(!$carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
+          assert.ok($carousel.find('.item:eq(1)').is('.active'), 'second item active')
+          assert.ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'), 'second indicator active')
           done()
         }, 0)
       })
       .bootstrapCarousel('next')
   })
 
-  test('should fire slide event with direction', function (assert) {
+  QUnit.test('should fire slide event with direction', function (assert) {
+    assert.expect(4)
     var carouselHTML = '<div id="myCarousel" class="carousel slide">'
         + '<div class="carousel-inner">'
-        + '<div class="carousel-item active">'
+        + '<div class="item active">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>First Thumbnail label</h4>'
@@ -100,7 +106,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Second Thumbnail label</h4>'
@@ -109,7 +115,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Third Thumbnail label</h4>'
@@ -128,13 +134,13 @@ $(function () {
 
     $carousel
       .one('slide.bs.carousel', function (e) {
-        ok(e.direction, 'direction present on next')
-        strictEqual(e.direction, 'left', 'direction is left on next')
+        assert.ok(e.direction, 'direction present on next')
+        assert.strictEqual(e.direction, 'left', 'direction is left on next')
 
         $carousel
           .one('slide.bs.carousel', function (e) {
-            ok(e.direction, 'direction present on prev')
-            strictEqual(e.direction, 'right', 'direction is right on prev')
+            assert.ok(e.direction, 'direction present on prev')
+            assert.strictEqual(e.direction, 'right', 'direction is right on prev')
             done()
           })
           .bootstrapCarousel('prev')
@@ -142,10 +148,11 @@ $(function () {
       .bootstrapCarousel('next')
   })
 
-  test('should fire slid event with direction', function (assert) {
+  QUnit.test('should fire slid event with direction', function (assert) {
+    assert.expect(4)
     var carouselHTML = '<div id="myCarousel" class="carousel slide">'
         + '<div class="carousel-inner">'
-        + '<div class="carousel-item active">'
+        + '<div class="item active">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>First Thumbnail label</h4>'
@@ -154,7 +161,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Second Thumbnail label</h4>'
@@ -163,7 +170,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Third Thumbnail label</h4>'
@@ -182,13 +189,13 @@ $(function () {
 
     $carousel
       .one('slid.bs.carousel', function (e) {
-        ok(e.direction, 'direction present on next')
-        strictEqual(e.direction, 'left', 'direction is left on next')
+        assert.ok(e.direction, 'direction present on next')
+        assert.strictEqual(e.direction, 'left', 'direction is left on next')
 
         $carousel
           .one('slid.bs.carousel', function (e) {
-            ok(e.direction, 'direction present on prev')
-            strictEqual(e.direction, 'right', 'direction is right on prev')
+            assert.ok(e.direction, 'direction present on prev')
+            assert.strictEqual(e.direction, 'right', 'direction is right on prev')
             done()
           })
           .bootstrapCarousel('prev')
@@ -196,10 +203,11 @@ $(function () {
       .bootstrapCarousel('next')
   })
 
-  test('should fire slide event with relatedTarget', function (assert) {
+  QUnit.test('should fire slide event with relatedTarget', function (assert) {
+    assert.expect(2)
     var template = '<div id="myCarousel" class="carousel slide">'
         + '<div class="carousel-inner">'
-        + '<div class="carousel-item active">'
+        + '<div class="item active">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>First Thumbnail label</h4>'
@@ -208,7 +216,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Second Thumbnail label</h4>'
@@ -217,7 +225,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Third Thumbnail label</h4>'
@@ -235,17 +243,18 @@ $(function () {
 
     $(template)
       .on('slide.bs.carousel', function (e) {
-        ok(e.relatedTarget, 'relatedTarget present')
-        ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "carousel-item"')
+        assert.ok(e.relatedTarget, 'relatedTarget present')
+        assert.ok($(e.relatedTarget).hasClass('item'), 'relatedTarget has class "item"')
         done()
       })
       .bootstrapCarousel('next')
   })
 
-  test('should fire slid event with relatedTarget', function (assert) {
+  QUnit.test('should fire slid event with relatedTarget', function (assert) {
+    assert.expect(2)
     var template = '<div id="myCarousel" class="carousel slide">'
         + '<div class="carousel-inner">'
-        + '<div class="carousel-item active">'
+        + '<div class="item active">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>First Thumbnail label</h4>'
@@ -254,7 +263,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Second Thumbnail label</h4>'
@@ -263,7 +272,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Third Thumbnail label</h4>'
@@ -281,17 +290,18 @@ $(function () {
 
     $(template)
       .on('slid.bs.carousel', function (e) {
-        ok(e.relatedTarget, 'relatedTarget present')
-        ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "carousel-item"')
+        assert.ok(e.relatedTarget, 'relatedTarget present')
+        assert.ok($(e.relatedTarget).hasClass('item'), 'relatedTarget has class "item"')
         done()
       })
       .bootstrapCarousel('next')
   })
 
-  test('should set interval from data attribute', function () {
+  QUnit.test('should set interval from data attribute', function (assert) {
+    assert.expect(4)
     var templateHTML = '<div id="myCarousel" class="carousel slide">'
         + '<div class="carousel-inner">'
-        + '<div class="carousel-item active">'
+        + '<div class="item active">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>First Thumbnail label</h4>'
@@ -300,7 +310,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Second Thumbnail label</h4>'
@@ -309,7 +319,7 @@ $(function () {
         + 'ultricies vehicula ut id elit.</p>'
         + '</div>'
         + '</div>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '<img alt="">'
         + '<div class="carousel-caption">'
         + '<h4>Third Thumbnail label</h4>'
@@ -322,45 +332,45 @@ $(function () {
         + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>'
         + '<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>'
         + '</div>'
-
     var $carousel = $(templateHTML)
     $carousel.attr('data-interval', 1814)
 
     $carousel.appendTo('body')
-    $('[data-slide]').first().click()
-    equal($carousel.data('bs.carousel').getConfig().interval, 1814)
+    $('[data-slide]').first().trigger('click')
+    assert.strictEqual($carousel.data('bs.carousel').options.interval, 1814)
     $carousel.remove()
 
     $carousel.appendTo('body').attr('data-modal', 'foobar')
-    $('[data-slide]').first().click()
-    equal($carousel.data('bs.carousel').getConfig().interval, 1814, 'even if there is an data-modal attribute set')
+    $('[data-slide]').first().trigger('click')
+    assert.strictEqual($carousel.data('bs.carousel').options.interval, 1814, 'even if there is an data-modal attribute set')
     $carousel.remove()
 
     $carousel.appendTo('body')
-    $('[data-slide]').first().click()
+    $('[data-slide]').first().trigger('click')
     $carousel.attr('data-interval', 1860)
-    $('[data-slide]').first().click()
-    equal($carousel.data('bs.carousel').getConfig().interval, 1814, 'attributes should be read only on initialization')
+    $('[data-slide]').first().trigger('click')
+    assert.strictEqual($carousel.data('bs.carousel').options.interval, 1814, 'attributes should be read only on initialization')
     $carousel.remove()
 
     $carousel.attr('data-interval', false)
     $carousel.appendTo('body')
     $carousel.bootstrapCarousel(1)
-    strictEqual($carousel.data('bs.carousel').getConfig().interval, false, 'data attribute has higher priority than default options')
+    assert.strictEqual($carousel.data('bs.carousel').options.interval, false, 'data attribute has higher priority than default options')
     $carousel.remove()
   })
 
-  test('should skip over non-items when using item indices', function () {
+  QUnit.test('should skip over non-items when using item indices', function (assert) {
+    assert.expect(2)
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
         + '<div class="carousel-inner">'
-        + '<div class="carousel-item active">'
+        + '<div class="item active">'
         + '<img alt="">'
         + '</div>'
         + '<script type="text/x-metamorph" id="thingy"/>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '<img alt="">'
         + '</div>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '</div>'
         + '</div>'
         + '</div>'
@@ -368,24 +378,25 @@ $(function () {
 
     $template.bootstrapCarousel()
 
-    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
+    assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
 
     $template.bootstrapCarousel(1)
 
-    strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
+    assert.strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
   })
 
-  test('should skip over non-items when using next/prev methods', function () {
+  QUnit.test('should skip over non-items when using next/prev methods', function (assert) {
+    assert.expect(2)
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
         + '<div class="carousel-inner">'
-        + '<div class="carousel-item active">'
+        + '<div class="item active">'
         + '<img alt="">'
         + '</div>'
         + '<script type="text/x-metamorph" id="thingy"/>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '<img alt="">'
         + '</div>'
-        + '<div class="carousel-item">'
+        + '<div class="item">'
         + '</div>'
         + '</div>'
         + '</div>'
@@ -393,23 +404,24 @@ $(function () {
 
     $template.bootstrapCarousel()
 
-    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
+    assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
 
     $template.bootstrapCarousel('next')
 
-    strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
+    assert.strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
   })
 
-  test('should go to previous item if left arrow key is pressed', function () {
+  QUnit.test('should go to previous item if left arrow key is pressed', function (assert) {
+    assert.expect(2)
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
         + '<div class="carousel-inner">'
-        + '<div id="first" class="carousel-item">'
+        + '<div id="first" class="item">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="second" class="carousel-item active">'
+        + '<div id="second" class="item active">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="third" class="carousel-item">'
+        + '<div id="third" class="item">'
         + '<img alt="">'
         + '</div>'
         + '</div>'
@@ -418,23 +430,24 @@ $(function () {
 
     $template.bootstrapCarousel()
 
-    strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
+    assert.strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
 
     $template.trigger($.Event('keydown', { which: 37 }))
 
-    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
+    assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
   })
 
-  test('should go to next item if right arrow key is pressed', function () {
+  QUnit.test('should go to next item if right arrow key is pressed', function (assert) {
+    assert.expect(2)
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
         + '<div class="carousel-inner">'
-        + '<div id="first" class="carousel-item active">'
+        + '<div id="first" class="item active">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="second" class="carousel-item">'
+        + '<div id="second" class="item">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="third" class="carousel-item">'
+        + '<div id="third" class="item">'
         + '<img alt="">'
         + '</div>'
         + '</div>'
@@ -443,23 +456,24 @@ $(function () {
 
     $template.bootstrapCarousel()
 
-    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
+    assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
 
     $template.trigger($.Event('keydown', { which: 39 }))
 
-    strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
+    assert.strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
   })
 
-  test('should support disabling the keyboard navigation', function () {
+  QUnit.test('should support disabling the keyboard navigation', function (assert) {
+    assert.expect(3)
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-keyboard="false">'
         + '<div class="carousel-inner">'
-        + '<div id="first" class="carousel-item active">'
+        + '<div id="first" class="item active">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="second" class="carousel-item">'
+        + '<div id="second" class="item">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="third" class="carousel-item">'
+        + '<div id="third" class="item">'
         + '<img alt="">'
         + '</div>'
         + '</div>'
@@ -468,29 +482,30 @@ $(function () {
 
     $template.bootstrapCarousel()
 
-    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
+    assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
 
     $template.trigger($.Event('keydown', { which: 39 }))
 
-    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press')
+    assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press')
 
     $template.trigger($.Event('keydown', { which: 37 }))
 
-    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press')
+    assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press')
   })
 
-  test('should ignore keyboard events within <input>s and <textarea>s', function () {
+  QUnit.test('should ignore keyboard events within <input>s and <textarea>s', function (assert) {
+    assert.expect(7)
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
         + '<div class="carousel-inner">'
-        + '<div id="first" class="carousel-item active">'
+        + '<div id="first" class="item active">'
         + '<img alt="">'
         + '<input type="text" id="in-put">'
         + '<textarea id="text-area"></textarea>'
         + '</div>'
-        + '<div id="second" class="carousel-item">'
+        + '<div id="second" class="item">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="third" class="carousel-item">'
+        + '<div id="third" class="item">'
         + '<img alt="">'
         + '</div>'
         + '</div>'
@@ -499,39 +514,40 @@ $(function () {
     var $input = $template.find('#in-put')
     var $textarea = $template.find('#text-area')
 
-    strictEqual($input.length, 1, 'found <input>')
-    strictEqual($textarea.length, 1, 'found <textarea>')
+    assert.strictEqual($input.length, 1, 'found <input>')
+    assert.strictEqual($textarea.length, 1, 'found <textarea>')
 
     $template.bootstrapCarousel()
 
-    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
+    assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
 
 
     $input.trigger($.Event('keydown', { which: 39 }))
-    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <input>')
+    assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <input>')
 
     $input.trigger($.Event('keydown', { which: 37 }))
-    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <input>')
+    assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <input>')
 
 
     $textarea.trigger($.Event('keydown', { which: 39 }))
-    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <textarea>')
+    assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <textarea>')
 
     $textarea.trigger($.Event('keydown', { which: 37 }))
-    strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <textarea>')
+    assert.strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <textarea>')
   })
 
-  test('should only add mouseenter and mouseleave listeners when not on mobile', function () {
+  QUnit.test('should only add mouseenter and mouseleave listeners when not on mobile', function (assert) {
+    assert.expect(2)
     var isMobile     = 'ontouchstart' in document.documentElement
     var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-pause="hover">'
         + '<div class="carousel-inner">'
-        + '<div id="first" class="carousel-item active">'
+        + '<div id="first" class="item active">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="second" class="carousel-item">'
+        + '<div id="second" class="item">'
         + '<img alt="">'
         + '</div>'
-        + '<div id="third" class="carousel-item">'
+        + '<div id="third" class="item">'
         + '<img alt="">'
         + '</div>'
         + '</div>'
@@ -539,11 +555,12 @@ $(function () {
     var $template = $(templateHTML).bootstrapCarousel()
 
     $.each(['mouseover', 'mouseout'], function (i, type) {
-      strictEqual(type in $._data($template[0], 'events'), !isMobile, 'does' + (isMobile ? ' not' : '') + ' listen for ' + type + ' events')
+      assert.strictEqual(type in $._data($template[0], 'events'), !isMobile, 'does' + (isMobile ? ' not' : '') + ' listen for ' + type + ' events')
     })
   })
 
-  test('should wrap around from end to start when wrap option is true', function (assert) {
+  QUnit.test('should wrap around from end to start when wrap option is true', function (assert) {
+    assert.expect(3)
     var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">'
         + '<ol class="carousel-indicators">'
         + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
@@ -551,13 +568,13 @@ $(function () {
         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
         + '</ol>'
         + '<div class="carousel-inner">'
-        + '<div class="carousel-item active" id="one">'
+        + '<div class="item active" id="one">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="carousel-item" id="two">'
+        + '<div class="item" id="two">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="carousel-item" id="three">'
+        + '<div class="item" id="three">'
         + '<div class="carousel-caption"/>'
         + '</div>'
         + '</div>'
@@ -565,19 +582,19 @@ $(function () {
         + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
         + '</div>'
     var $carousel = $(carouselHTML)
-    var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') }
+    var getActiveId = function () { return $carousel.find('.item.active').attr('id') }
 
     var done = assert.async()
 
     $carousel
       .one('slid.bs.carousel', function () {
-        strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
+        assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
         $carousel
           .one('slid.bs.carousel', function () {
-            strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
+            assert.strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
             $carousel
               .one('slid.bs.carousel', function () {
-                strictEqual(getActiveId(), 'one', 'carousel wrapped around and slid from 3rd to 1st slide')
+                assert.strictEqual(getActiveId(), 'one', 'carousel wrapped around and slid from 3rd to 1st slide')
                 done()
               })
               .bootstrapCarousel('next')
@@ -587,7 +604,8 @@ $(function () {
       .bootstrapCarousel('next')
   })
 
-  test('should wrap around from start to end when wrap option is true', function (assert) {
+  QUnit.test('should wrap around from start to end when wrap option is true', function (assert) {
+    assert.expect(1)
     var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">'
         + '<ol class="carousel-indicators">'
         + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
@@ -595,13 +613,13 @@ $(function () {
         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
         + '</ol>'
         + '<div class="carousel-inner">'
-        + '<div class="carousel-item active" id="one">'
+        + '<div class="item active" id="one">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="carousel-item" id="two">'
+        + '<div class="item" id="two">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="carousel-item" id="three">'
+        + '<div class="item" id="three">'
         + '<div class="carousel-caption"/>'
         + '</div>'
         + '</div>'
@@ -614,13 +632,14 @@ $(function () {
 
     $carousel
       .on('slid.bs.carousel', function () {
-        strictEqual($carousel.find('.carousel-item.active').attr('id'), 'three', 'carousel wrapped around and slid from 1st to 3rd slide')
+        assert.strictEqual($carousel.find('.item.active').attr('id'), 'three', 'carousel wrapped around and slid from 1st to 3rd slide')
         done()
       })
       .bootstrapCarousel('prev')
   })
 
-  test('should stay at the end when the next method is called and wrap is false', function (assert) {
+  QUnit.test('should stay at the end when the next method is called and wrap is false', function (assert) {
+    assert.expect(3)
     var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">'
         + '<ol class="carousel-indicators">'
         + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
@@ -628,13 +647,13 @@ $(function () {
         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
         + '</ol>'
         + '<div class="carousel-inner">'
-        + '<div class="carousel-item active" id="one">'
+        + '<div class="item active" id="one">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="carousel-item" id="two">'
+        + '<div class="item" id="two">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="carousel-item" id="three">'
+        + '<div class="item" id="three">'
         + '<div class="carousel-caption"/>'
         + '</div>'
         + '</div>'
@@ -642,22 +661,22 @@ $(function () {
         + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
         + '</div>'
     var $carousel = $(carouselHTML)
-    var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') }
+    var getActiveId = function () { return $carousel.find('.item.active').attr('id') }
 
     var done = assert.async()
 
     $carousel
       .one('slid.bs.carousel', function () {
-        strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
+        assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
         $carousel
           .one('slid.bs.carousel', function () {
-            strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
+            assert.strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
             $carousel
               .one('slid.bs.carousel', function () {
-                ok(false, 'carousel slid when it should not have slid')
+                assert.ok(false, 'carousel slid when it should not have slid')
               })
               .bootstrapCarousel('next')
-            strictEqual(getActiveId(), 'three', 'carousel did not wrap around and stayed on 3rd slide')
+            assert.strictEqual(getActiveId(), 'three', 'carousel did not wrap around and stayed on 3rd slide')
             done()
           })
           .bootstrapCarousel('next')
@@ -665,7 +684,8 @@ $(function () {
       .bootstrapCarousel('next')
   })
 
-  test('should stay at the start when the prev method is called and wrap is false', function () {
+  QUnit.test('should stay at the start when the prev method is called and wrap is false', function (assert) {
+    assert.expect(1)
     var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">'
         + '<ol class="carousel-indicators">'
         + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
@@ -673,13 +693,13 @@ $(function () {
         + '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
         + '</ol>'
         + '<div class="carousel-inner">'
-        + '<div class="carousel-item active" id="one">'
+        + '<div class="item active" id="one">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="carousel-item" id="two">'
+        + '<div class="item" id="two">'
         + '<div class="carousel-caption"/>'
         + '</div>'
-        + '<div class="carousel-item" id="three">'
+        + '<div class="item" id="three">'
         + '<div class="carousel-caption"/>'
         + '</div>'
         + '</div>'
@@ -690,9 +710,9 @@ $(function () {
 
     $carousel
       .on('slid.bs.carousel', function () {
-        ok(false, 'carousel slid when it should not have slid')
+        assert.ok(false, 'carousel slid when it should not have slid')
       })
       .bootstrapCarousel('prev')
-    strictEqual($carousel.find('.carousel-item.active').attr('id'), 'one', 'carousel did not wrap around and stayed on 1st slide')
+    assert.strictEqual($carousel.find('.item.active').attr('id'), 'one', 'carousel did not wrap around and stayed on 1st slide')
   })
 })
diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js
index 0f1b7b119..0efa65400 100644
--- a/js/tests/unit/collapse.js
+++ b/js/tests/unit/collapse.js
@@ -400,7 +400,7 @@ $(function () {
 
     $body2
       .toggleClass('in collapsing')
-      .data('bs.collapse').setTransitioning(true)
+      .data('bs.collapse').transitioning = 1
 
     $target1.trigger('click')
 
diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index 7018b865f..217e4d7f7 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -1,194 +1,209 @@
 $(function () {
   'use strict';
 
-  module('modal plugin')
+  QUnit.module('modal plugin')
 
-  test('should be defined on jquery object', function () {
-    ok($(document.body).modal, 'modal method is defined')
+  QUnit.test('should be defined on jquery object', function (assert) {
+    assert.expect(1)
+    assert.ok($(document.body).modal, 'modal method is defined')
   })
 
-  module('modal', {
-    setup: function () {
+  QUnit.module('modal', {
+    beforeEach: function () {
       // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
       $.fn.bootstrapModal = $.fn.modal.noConflict()
     },
-    teardown: function () {
+    afterEach: function () {
       $.fn.modal = $.fn.bootstrapModal
       delete $.fn.bootstrapModal
     }
   })
 
-  test('should provide no conflict', function () {
-    strictEqual($.fn.modal, undefined, 'modal was set back to undefined (orig value)')
+  QUnit.test('should provide no conflict', function (assert) {
+    assert.expect(1)
+    assert.strictEqual($.fn.modal, undefined, 'modal was set back to undefined (orig value)')
   })
 
-  test('should return jquery collection containing the element', function () {
+  QUnit.test('should return jquery collection containing the element', function (assert) {
+    assert.expect(2)
     var $el = $('<div id="modal-test"/>')
     var $modal = $el.bootstrapModal()
-    ok($modal instanceof $, 'returns jquery collection')
-    strictEqual($modal[0], $el[0], 'collection contains element')
+    assert.ok($modal instanceof $, 'returns jquery collection')
+    assert.strictEqual($modal[0], $el[0], 'collection contains element')
   })
 
-  test('should expose defaults var for settings', function () {
-    ok($.fn.bootstrapModal.Constructor.Defaults, 'default object exposed')
+  QUnit.test('should expose defaults var for settings', function (assert) {
+    assert.expect(1)
+    assert.ok($.fn.bootstrapModal.Constructor.DEFAULTS, 'default object exposed')
   })
 
-  test('should insert into dom when show method is called', function (assert) {
+  QUnit.test('should insert into dom when show method is called', function (assert) {
+    assert.expect(1)
     var done = assert.async()
 
     $('<div id="modal-test"/>')
       .on('shown.bs.modal', function () {
-        notEqual($('#modal-test').length, 0, 'modal inserted into dom')
+        assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
         done()
       })
       .bootstrapModal('show')
   })
 
-  test('should fire show event', function (assert) {
+  QUnit.test('should fire show event', function (assert) {
+    assert.expect(1)
     var done = assert.async()
 
     $('<div id="modal-test"/>')
       .on('show.bs.modal', function () {
-        ok(true, 'show event fired')
+        assert.ok(true, 'show event fired')
         done()
       })
       .bootstrapModal('show')
   })
 
-  test('should not fire shown when show was prevented', function (assert) {
+  QUnit.test('should not fire shown when show was prevented', function (assert) {
+    assert.expect(1)
     var done = assert.async()
 
     $('<div id="modal-test"/>')
       .on('show.bs.modal', function (e) {
         e.preventDefault()
-        ok(true, 'show event fired')
+        assert.ok(true, 'show event fired')
         done()
       })
       .on('shown.bs.modal', function () {
-        ok(false, 'shown event fired')
+        assert.ok(false, 'shown event fired')
       })
       .bootstrapModal('show')
   })
 
-  test('should hide modal when hide is called', function (assert) {
+  QUnit.test('should hide modal when hide is called', function (assert) {
+    assert.expect(3)
     var done = assert.async()
 
     $('<div id="modal-test"/>')
       .on('shown.bs.modal', function () {
-        ok($('#modal-test').is(':visible'), 'modal visible')
-        notEqual($('#modal-test').length, 0, 'modal inserted into dom')
+        assert.ok($('#modal-test').is(':visible'), 'modal visible')
+        assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
         $(this).bootstrapModal('hide')
       })
       .on('hidden.bs.modal', function () {
-        ok(!$('#modal-test').is(':visible'), 'modal hidden')
+        assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
         done()
       })
       .bootstrapModal('show')
   })
 
-  test('should toggle when toggle is called', function (assert) {
+  QUnit.test('should toggle when toggle is called', function (assert) {
+    assert.expect(3)
     var done = assert.async()
 
     $('<div id="modal-test"/>')
       .on('shown.bs.modal', function () {
-        ok($('#modal-test').is(':visible'), 'modal visible')
-        notEqual($('#modal-test').length, 0, 'modal inserted into dom')
+        assert.ok($('#modal-test').is(':visible'), 'modal visible')
+        assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
         $(this).bootstrapModal('toggle')
       })
       .on('hidden.bs.modal', function () {
-        ok(!$('#modal-test').is(':visible'), 'modal hidden')
+        assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
         done()
       })
       .bootstrapModal('toggle')
   })
 
-  test('should remove from dom when click [data-dismiss="modal"]', function (assert) {
+  QUnit.test('should remove from dom when click [data-dismiss="modal"]', function (assert) {
+    assert.expect(3)
     var done = assert.async()
 
     $('<div id="modal-test"><span class="close" data-dismiss="modal"/></div>')
       .on('shown.bs.modal', function () {
-        ok($('#modal-test').is(':visible'), 'modal visible')
-        notEqual($('#modal-test').length, 0, 'modal inserted into dom')
-        $(this).find('.close').click()
+        assert.ok($('#modal-test').is(':visible'), 'modal visible')
+        assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
+        $(this).find('.close').trigger('click')
       })
       .on('hidden.bs.modal', function () {
-        ok(!$('#modal-test').is(':visible'), 'modal hidden')
+        assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
         done()
       })
       .bootstrapModal('toggle')
   })
 
-  test('should allow modal close with "backdrop:false"', function (assert) {
+  QUnit.test('should allow modal close with "backdrop:false"', function (assert) {
+    assert.expect(2)
     var done = assert.async()
 
     $('<div id="modal-test" data-backdrop="false"/>')
       .on('shown.bs.modal', function () {
-        ok($('#modal-test').is(':visible'), 'modal visible')
+        assert.ok($('#modal-test').is(':visible'), 'modal visible')
         $(this).bootstrapModal('hide')
       })
       .on('hidden.bs.modal', function () {
-        ok(!$('#modal-test').is(':visible'), 'modal hidden')
+        assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
         done()
       })
       .bootstrapModal('show')
   })
 
-  test('should close modal when clicking outside of modal-content', function (assert) {
+  QUnit.test('should close modal when clicking outside of modal-content', function (assert) {
+    assert.expect(3)
     var done = assert.async()
 
     $('<div id="modal-test"><div class="contents"/></div>')
       .on('shown.bs.modal', function () {
-        notEqual($('#modal-test').length, 0, 'modal insterted into dom')
-        $('.contents').click()
-        ok($('#modal-test').is(':visible'), 'modal visible')
-        $('#modal-test .modal-backdrop').click()
+        assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
+        $('.contents').trigger('click')
+        assert.ok($('#modal-test').is(':visible'), 'modal visible')
+        $('#modal-test').trigger('click')
       })
       .on('hidden.bs.modal', function () {
-        ok(!$('#modal-test').is(':visible'), 'modal hidden')
+        assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
         done()
       })
       .bootstrapModal('show')
   })
 
-  test('should close modal when escape key is pressed via keydown', function (assert) {
+  QUnit.test('should close modal when escape key is pressed via keydown', function (assert) {
+    assert.expect(3)
     var done = assert.async()
 
-    var div = $('<div id="modal-test"/>')
-    div
+    var $div = $('<div id="modal-test"/>')
+    $div
       .on('shown.bs.modal', function () {
-        ok($('#modal-test').length, 'modal insterted into dom')
-        ok($('#modal-test').is(':visible'), 'modal visible')
-        div.trigger($.Event('keydown', { which: 27 }))
+        assert.ok($('#modal-test').length, 'modal insterted into dom')
+        assert.ok($('#modal-test').is(':visible'), 'modal visible')
+        $div.trigger($.Event('keydown', { which: 27 }))
 
         setTimeout(function () {
-          ok(!$('#modal-test').is(':visible'), 'modal hidden')
-          div.remove()
+          assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
+          $div.remove()
           done()
         }, 0)
       })
       .bootstrapModal('show')
   })
 
-  test('should not close modal when escape key is pressed via keyup', function (assert) {
+  QUnit.test('should not close modal when escape key is pressed via keyup', function (assert) {
+    assert.expect(3)
     var done = assert.async()
 
-    var div = $('<div id="modal-test"/>')
-    div
+    var $div = $('<div id="modal-test"/>')
+    $div
       .on('shown.bs.modal', function () {
-        ok($('#modal-test').length, 'modal insterted into dom')
-        ok($('#modal-test').is(':visible'), 'modal visible')
-        div.trigger($.Event('keyup', { which: 27 }))
+        assert.ok($('#modal-test').length, 'modal inserted into dom')
+        assert.ok($('#modal-test').is(':visible'), 'modal visible')
+        $div.trigger($.Event('keyup', { which: 27 }))
 
         setTimeout(function () {
-          ok($('#modal-test').is(':visible'), 'modal still visible')
-          div.remove()
+          assert.ok($div.is(':visible'), 'modal still visible')
+          $div.remove()
           done()
         }, 0)
       })
       .bootstrapModal('show')
   })
 
-  test('should trigger hide event once when clicking outside of modal-content', function (assert) {
+  QUnit.test('should trigger hide event once when clicking outside of modal-content', function (assert) {
+    assert.expect(1)
     var done = assert.async()
 
     var triggered
@@ -196,32 +211,33 @@ $(function () {
     $('<div id="modal-test"><div class="contents"/></div>')
       .on('shown.bs.modal', function () {
         triggered = 0
-        $('#modal-test .modal-backdrop').click()
+        $('#modal-test').trigger('click')
       })
       .on('hide.bs.modal', function () {
         triggered += 1
-        strictEqual(triggered, 1, 'modal hide triggered once')
+        assert.strictEqual(triggered, 1, 'modal hide triggered once')
         done()
       })
       .bootstrapModal('show')
   })
 
-  test('should close reopened modal with [data-dismiss="modal"] click', function (assert) {
+  QUnit.test('should close reopened modal with [data-dismiss="modal"] click', function (assert) {
+    assert.expect(2)
     var done = assert.async()
 
     $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
       .one('shown.bs.modal', function () {
-        $('#close').click()
+        $('#close').trigger('click')
       })
       .one('hidden.bs.modal', function () {
         // after one open-close cycle
-        ok(!$('#modal-test').is(':visible'), 'modal hidden')
+        assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
         $(this)
           .one('shown.bs.modal', function () {
-            $('#close').click()
+            $('#close').trigger('click')
           })
           .one('hidden.bs.modal', function () {
-            ok(!$('#modal-test').is(':visible'), 'modal hidden')
+            assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
             done()
           })
           .bootstrapModal('show')
@@ -229,7 +245,8 @@ $(function () {
       .bootstrapModal('show')
   })
 
-  test('should restore focus to toggling element when modal is hidden after having been opened via data-api', function (assert) {
+  QUnit.test('should restore focus to toggling element when modal is hidden after having been opened via data-api', function (assert) {
+    assert.expect(1)
     var done = assert.async()
 
     var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture')
@@ -237,19 +254,20 @@ $(function () {
     $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
       .on('hidden.bs.modal', function () {
         setTimeout(function () {
-          ok($(document.activeElement).is($toggleBtn), 'toggling element is once again focused')
+          assert.ok($(document.activeElement).is($toggleBtn), 'toggling element is once again focused')
           done()
         }, 0)
       })
       .on('shown.bs.modal', function () {
-        $('#close').click()
+        $('#close').trigger('click')
       })
       .appendTo('#qunit-fixture')
 
-    $toggleBtn.click()
+    $toggleBtn.trigger('click')
   })
 
-  test('should not restore focus to toggling element if the associated show event gets prevented', function (assert) {
+  QUnit.test('should not restore focus to toggling element if the associated show event gets prevented', function (assert) {
+    assert.expect(1)
     var done = assert.async()
     var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture')
     var $otherBtn = $('<button id="other-btn"/>').appendTo('#qunit-fixture')
@@ -257,22 +275,103 @@ $(function () {
     $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div>')
       .one('show.bs.modal', function (e) {
         e.preventDefault()
-        $otherBtn.focus()
+        $otherBtn.trigger('focus')
         setTimeout($.proxy(function () {
           $(this).bootstrapModal('show')
         }, this), 0)
       })
       .on('hidden.bs.modal', function () {
         setTimeout(function () {
-          ok($(document.activeElement).is($otherBtn), 'focus returned to toggling element')
+          assert.ok($(document.activeElement).is($otherBtn), 'focus returned to toggling element')
           done()
         }, 0)
       })
       .on('shown.bs.modal', function () {
-        $('#close').click()
+        $('#close').trigger('click')
       })
       .appendTo('#qunit-fixture')
 
-    $toggleBtn.click()
+    $toggleBtn.trigger('click')
+  })
+
+  QUnit.test('should restore inline body padding after closing', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var originalBodyPad = 0
+    var $body = $(document.body)
+
+    $body.css('padding-right', originalBodyPad)
+
+    $('<div id="modal-test"/>')
+      .on('hidden.bs.modal', function () {
+        var currentBodyPad = parseInt($body.css('padding-right'), 10)
+        assert.notStrictEqual($body.attr('style'), '', 'body has non-empty style attribute')
+        assert.strictEqual(currentBodyPad, originalBodyPad, 'original body padding was not changed')
+        $body.removeAttr('style')
+        done()
+      })
+      .on('shown.bs.modal', function () {
+        $(this).bootstrapModal('hide')
+      })
+      .bootstrapModal('show')
+  })
+
+  QUnit.test('should ignore values set via CSS when trying to restore body padding after closing', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+    var $body = $(document.body)
+    var $style = $('<style>body { padding-right: 42px; }</style>').appendTo('head')
+
+    $('<div id="modal-test"/>')
+      .on('hidden.bs.modal', function () {
+        assert.ok(!$body.attr('style'), 'body does not have inline padding set')
+        $style.remove()
+        done()
+      })
+      .on('shown.bs.modal', function () {
+        $(this).bootstrapModal('hide')
+      })
+      .bootstrapModal('show')
+  })
+
+  QUnit.test('should ignore other inline styles when trying to restore body padding after closing', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+    var $body = $(document.body)
+    var $style = $('<style>body { padding-right: 42px; }</style>').appendTo('head')
+
+    $body.css('color', 'red')
+
+    $('<div id="modal-test"/>')
+      .on('hidden.bs.modal', function () {
+        assert.strictEqual($body[0].style.paddingRight, '', 'body does not have inline padding set')
+        assert.strictEqual($body[0].style.color, 'red', 'body still has other inline styles set')
+        $body.removeAttr('style')
+        $style.remove()
+        done()
+      })
+      .on('shown.bs.modal', function () {
+        $(this).bootstrapModal('hide')
+      })
+      .bootstrapModal('show')
+  })
+
+  QUnit.test('should properly restore non-pixel inline body padding after closing', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+    var $body = $(document.body)
+
+    $body.css('padding-right', '5%')
+
+    $('<div id="modal-test"/>')
+      .on('hidden.bs.modal', function () {
+        assert.strictEqual($body[0].style.paddingRight, '5%', 'body does not have inline padding set')
+        $body.removeAttr('style')
+        done()
+      })
+      .on('shown.bs.modal', function () {
+        $(this).bootstrapModal('hide')
+      })
+      .bootstrapModal('show')
   })
 })
diff --git a/js/tests/unit/phantom.js b/js/tests/unit/phantom.js
index f6f0ac00f..3ed3b3ea3 100644
--- a/js/tests/unit/phantom.js
+++ b/js/tests/unit/phantom.js
@@ -52,9 +52,9 @@
 
   QUnit.moduleDone(function (obj) {
     if (obj.failed === 0) {
-      console.log('\r\u2714 All tests passed in "' + obj.name + '" module')
+      console.log('\r\u221A All tests passed in "' + obj.name + '" module')
     } else {
-      console.log('\u2716 ' + obj.failed + ' tests failed in "' + obj.name + '" module')
+      console.log('\u00D7 ' + obj.failed + ' tests failed in "' + obj.name + '" module')
     }
     sendMessage('qunit.moduleDone', obj.name, obj.failed, obj.passed, obj.total)
   })
diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js
index 68525540a..a25df3a58 100644
--- a/js/tests/unit/popover.js
+++ b/js/tests/unit/popover.js
@@ -152,7 +152,7 @@ $(function () {
       .bootstrapPopover({
         title: 'Test',
         content: 'Test',
-        template: '<div class="popover foobar"><div class="popover-arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>'
+        template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>'
       })
 
     $popover.bootstrapPopover('show')
@@ -166,8 +166,7 @@ $(function () {
 
   QUnit.test('should destroy popover', function (assert) {
     assert.expect(7)
-    var $popover = $('<div>Popover trigger</div>')
-      .appendTo('#qunit-fixture')
+    var $popover = $('<div/>')
       .bootstrapPopover({
         trigger: 'hover'
       })
@@ -241,17 +240,6 @@ $(function () {
       .bootstrapPopover('show')
   })
 
-  QUnit.test('should throw an error when trying to show a popover on a hidden element', function (assert) {
-    assert.expect(1)
-    var $target = $('<a href="#" title="Another popover" data-content="Body" style="display: none;">I am hidden</a>').appendTo('#qunit-fixture')
-
-    assert.throws(function () {
-      $target.bootstrapPopover('show')
-    }, new Error('Can\'t show a tooltip/popover on a hidden element'))
-
-    $target.remove()
-  })
-
   QUnit.test('should throw an error when initializing popover on the document object without specifying a delegation selector', function (assert) {
     assert.expect(1)
     assert.throws(function () {
@@ -271,4 +259,32 @@ $(function () {
     assert.strictEqual($popover.data('bs.popover'), undefined, 'should not initialize the popover')
   })
 
+  QUnit.test('should throw an error when template contains multiple top-level elements', function (assert) {
+    assert.expect(1)
+    assert.throws(function () {
+      $('<span data-toggle="popover" data-title="some title" data-content="some content">some text</span>')
+        .appendTo('#qunit-fixture')
+        .bootstrapPopover({ template: '<div>Foo</div><div>Bar</div>' })
+        .bootstrapPopover('show')
+    }, new Error('popover `template` option must consist of exactly 1 top-level element!'))
+  })
+
+  QUnit.test('should fire inserted event', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+
+    $('<a href="#">@Johann-S</a>')
+      .appendTo('#qunit-fixture')
+      .on('inserted.bs.popover', function () {
+        assert.notEqual($('.popover').length, 0, 'popover was inserted')
+        assert.ok(true, 'inserted event fired')
+        done()
+      })
+      .bootstrapPopover({
+        title: 'Test',
+        content: 'Test'
+      })
+      .bootstrapPopover('show')
+  })
+
 })
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index e1205b4c0..27ce6208e 100644
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -1,284 +1,319 @@
 $(function () {
   'use strict';
 
-  module('tooltip plugin')
+  QUnit.module('tooltip plugin')
 
-  test('should be defined on jquery object', function () {
-    ok($(document.body).tooltip, 'tooltip method is defined')
+  QUnit.test('should be defined on jquery object', function (assert) {
+    assert.expect(1)
+    assert.ok($(document.body).tooltip, 'tooltip method is defined')
   })
 
-  module('tooltip', {
-    setup: function () {
+  QUnit.module('tooltip', {
+    beforeEach: function () {
       // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
       $.fn.bootstrapTooltip = $.fn.tooltip.noConflict()
     },
-    teardown: function () {
+    afterEach: function () {
       $.fn.tooltip = $.fn.bootstrapTooltip
       delete $.fn.bootstrapTooltip
     }
   })
 
-  test('should provide no conflict', function () {
-    strictEqual($.fn.tooltip, undefined, 'tooltip was set back to undefined (org value)')
+  QUnit.test('should provide no conflict', function (assert) {
+    assert.expect(1)
+    assert.strictEqual($.fn.tooltip, undefined, 'tooltip was set back to undefined (org value)')
   })
 
-  test('should return jquery collection containing the element', function () {
+  QUnit.test('should return jquery collection containing the element', function (assert) {
+    assert.expect(2)
     var $el = $('<div/>')
     var $tooltip = $el.bootstrapTooltip()
-    ok($tooltip instanceof $, 'returns jquery collection')
-    strictEqual($tooltip[0], $el[0], 'collection contains element')
+    assert.ok($tooltip instanceof $, 'returns jquery collection')
+    assert.strictEqual($tooltip[0], $el[0], 'collection contains element')
   })
 
-  test('should expose default settings', function () {
-    ok($.fn.bootstrapTooltip.Constructor.Defaults, 'defaults is defined')
+  QUnit.test('should expose default settings', function (assert) {
+    assert.expect(1)
+    assert.ok($.fn.bootstrapTooltip.Constructor.DEFAULTS, 'defaults is defined')
   })
 
-  test('should empty title attribute', function () {
+  QUnit.test('should empty title attribute', function (assert) {
+    assert.expect(1)
     var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip"/>').bootstrapTooltip()
-    strictEqual($trigger.attr('title'), '', 'title attribute was emptied')
+    assert.strictEqual($trigger.attr('title'), '', 'title attribute was emptied')
   })
 
-  test('should add data attribute for referencing original title', function () {
+  QUnit.test('should add data attribute for referencing original title', function (assert) {
+    assert.expect(1)
     var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip"/>').bootstrapTooltip()
-    strictEqual($trigger.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute')
+    assert.strictEqual($trigger.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute')
   })
 
-  test('should add aria-describedby to the trigger on show', function () {
-    var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
+  QUnit.test('should add aria-describedby to the trigger on show', function (assert) {
+    assert.expect(3)
+    var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
       .bootstrapTooltip()
       .appendTo('#qunit-fixture')
       .bootstrapTooltip('show')
 
     var id = $('.tooltip').attr('id')
 
-    strictEqual($('#' + id).length, 1, 'has a unique id')
-    strictEqual($('.tooltip').attr('aria-describedby'), $trigger.attr('id'), 'tooltip id and aria-describedby on trigger match')
-    ok($trigger[0].hasAttribute('aria-describedby'), 'trigger has aria-describedby')
+    assert.strictEqual($('#' + id).length, 1, 'has a unique id')
+    assert.strictEqual($('.tooltip').attr('aria-describedby'), $trigger.attr('id'), 'tooltip id and aria-describedby on trigger match')
+    assert.ok($trigger[0].hasAttribute('aria-describedby'), 'trigger has aria-describedby')
   })
 
-  test('should remove aria-describedby from trigger on hide', function () {
-    var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
+  QUnit.test('should remove aria-describedby from trigger on hide', function (assert) {
+    assert.expect(2)
+    var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
       .bootstrapTooltip()
       .appendTo('#qunit-fixture')
 
     $trigger.bootstrapTooltip('show')
-    ok($trigger[0].hasAttribute('aria-describedby'), 'trigger has aria-describedby')
+    assert.ok($trigger[0].hasAttribute('aria-describedby'), 'trigger has aria-describedby')
 
     $trigger.bootstrapTooltip('hide')
-    ok(!$trigger[0].hasAttribute('aria-describedby'), 'trigger does not have aria-describedby')
+    assert.ok(!$trigger[0].hasAttribute('aria-describedby'), 'trigger does not have aria-describedby')
   })
 
-  test('should assign a unique id tooltip element', function () {
-    $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
+  QUnit.test('should assign a unique id tooltip element', function (assert) {
+    assert.expect(2)
+    $('<a href="#" rel="tooltip" title="Another tooltip"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip('show')
 
     var id = $('.tooltip').attr('id')
 
-    strictEqual($('#' + id).length, 1, 'tooltip has unique id')
-    strictEqual(id.indexOf('tooltip'), 0, 'tooltip id has prefix')
+    assert.strictEqual($('#' + id).length, 1, 'tooltip has unique id')
+    assert.strictEqual(id.indexOf('tooltip'), 0, 'tooltip id has prefix')
   })
 
-  test('should place tooltips relative to placement option', function () {
-    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
+  QUnit.test('should place tooltips relative to placement option', function (assert) {
+    assert.expect(2)
+    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({ placement: 'bottom' })
 
     $tooltip.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
+    assert.ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
 
     $tooltip.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed')
   })
 
-  test('should allow html entities', function () {
-    var $tooltip = $('<a href="#" rel="tooltip" title="&lt;b&gt;@fat&lt;/b&gt;">Tooltip trigger</a>')
+  QUnit.test('should allow html entities', function (assert) {
+    assert.expect(2)
+    var $tooltip = $('<a href="#" rel="tooltip" title="&lt;b&gt;@fat&lt;/b&gt;"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({ html: true })
 
     $tooltip.bootstrapTooltip('show')
-    notEqual($('.tooltip b').length, 0, 'b tag was inserted')
+    assert.notEqual($('.tooltip b').length, 0, 'b tag was inserted')
 
     $tooltip.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed')
   })
 
-  test('should respect custom classes', function () {
-    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
+  QUnit.test('should respect custom classes', function (assert) {
+    assert.expect(2)
+    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>' })
 
     $tooltip.bootstrapTooltip('show')
-    ok($('.tooltip').hasClass('some-class'), 'custom class is present')
+    assert.ok($('.tooltip').hasClass('some-class'), 'custom class is present')
 
     $tooltip.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed')
   })
 
-  test('should fire show event', function (assert) {
+  QUnit.test('should fire show event', function (assert) {
+    assert.expect(1)
     var done = assert.async()
 
-    $('<div title="tooltip title">Tooltip trigger</div>')
-      .appendTo('#qunit-fixture')
+    $('<div title="tooltip title"/>')
       .on('show.bs.tooltip', function () {
-        ok(true, 'show event fired')
+        assert.ok(true, 'show event fired')
         done()
       })
       .bootstrapTooltip('show')
   })
 
-  test('should fire shown event', function (assert) {
+  QUnit.test('should fire inserted event', function (assert) {
+    assert.expect(2)
     var done = assert.async()
 
-    $('<div title="tooltip title">Tooltip trigger</div>')
+    $('<div title="tooltip title"/>')
       .appendTo('#qunit-fixture')
-      .on('shown.bs.tooltip', function () {
-        ok(true, 'shown was called')
+      .on('inserted.bs.tooltip', function () {
+        assert.notEqual($('.tooltip').length, 0, 'tooltip was inserted')
+        assert.ok(true, 'inserted event fired')
         done()
       })
       .bootstrapTooltip('show')
   })
 
-  test('should not fire shown event when show was prevented', function (assert) {
+  QUnit.test('should fire shown event', function (assert) {
+    assert.expect(1)
     var done = assert.async()
 
-    $('<div title="tooltip title">Tooltip trigger</div>')
+    $('<div title="tooltip title"></div>')
       .appendTo('#qunit-fixture')
+      .on('shown.bs.tooltip', function () {
+        assert.ok(true, 'shown was called')
+        done()
+      })
+      .bootstrapTooltip('show')
+  })
+
+  QUnit.test('should not fire shown event when show was prevented', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+
+    $('<div title="tooltip title"/>')
       .on('show.bs.tooltip', function (e) {
         e.preventDefault()
-        ok(true, 'show event fired')
+        assert.ok(true, 'show event fired')
         done()
       })
       .on('shown.bs.tooltip', function () {
-        ok(false, 'shown event fired')
+        assert.ok(false, 'shown event fired')
       })
       .bootstrapTooltip('show')
   })
 
-  test('should fire hide event', function (assert) {
+  QUnit.test('should fire hide event', function (assert) {
+    assert.expect(1)
     var done = assert.async()
 
-    $('<div title="tooltip title">Tooltip trigger</div>')
+    $('<div title="tooltip title"/>')
       .appendTo('#qunit-fixture')
       .on('shown.bs.tooltip', function () {
         $(this).bootstrapTooltip('hide')
       })
       .on('hide.bs.tooltip', function () {
-        ok(true, 'hide event fired')
+        assert.ok(true, 'hide event fired')
         done()
       })
       .bootstrapTooltip('show')
   })
 
-  test('should fire hidden event', function (assert) {
+  QUnit.test('should fire hidden event', function (assert) {
+    assert.expect(1)
     var done = assert.async()
 
-    $('<div title="tooltip title">Tooltip trigger</div>')
+    $('<div title="tooltip title"/>')
       .appendTo('#qunit-fixture')
       .on('shown.bs.tooltip', function () {
         $(this).bootstrapTooltip('hide')
       })
       .on('hidden.bs.tooltip', function () {
-        ok(true, 'hidden event fired')
+        assert.ok(true, 'hidden event fired')
         done()
       })
       .bootstrapTooltip('show')
   })
 
-  test('should not fire hidden event when hide was prevented', function (assert) {
+  QUnit.test('should not fire hidden event when hide was prevented', function (assert) {
+    assert.expect(1)
     var done = assert.async()
 
-    $('<div title="tooltip title">Tooltip trigger</div>')
+    $('<div title="tooltip title"/>')
       .appendTo('#qunit-fixture')
       .on('shown.bs.tooltip', function () {
         $(this).bootstrapTooltip('hide')
       })
       .on('hide.bs.tooltip', function (e) {
         e.preventDefault()
-        ok(true, 'hide event fired')
+        assert.ok(true, 'hide event fired')
         done()
       })
       .on('hidden.bs.tooltip', function () {
-        ok(false, 'hidden event fired')
+        assert.ok(false, 'hidden event fired')
       })
       .bootstrapTooltip('show')
   })
 
-  test('should destroy tooltip', function () {
-    var $tooltip = $('<div>Tooltip trigger</div>')
-      .appendTo('#qunit-fixture')
+  QUnit.test('should destroy tooltip', function (assert) {
+    assert.expect(7)
+    var $tooltip = $('<div/>')
       .bootstrapTooltip()
       .on('click.foo', function () {})
 
-    ok($tooltip.data('bs.tooltip'), 'tooltip has data')
-    ok($._data($tooltip[0], 'events').mouseover && $._data($tooltip[0], 'events').mouseout, 'tooltip has hover events')
-    equal($._data($tooltip[0], 'events').click[0].namespace, 'foo', 'tooltip has extra click.foo event')
+    assert.ok($tooltip.data('bs.tooltip'), 'tooltip has data')
+    assert.ok($._data($tooltip[0], 'events').mouseover && $._data($tooltip[0], 'events').mouseout, 'tooltip has hover events')
+    assert.strictEqual($._data($tooltip[0], 'events').click[0].namespace, 'foo', 'tooltip has extra click.foo event')
 
     $tooltip.bootstrapTooltip('show')
     $tooltip.bootstrapTooltip('destroy')
 
-    ok(!$tooltip.hasClass('in'), 'tooltip is hidden')
-    ok(!$._data($tooltip[0], 'bs.tooltip'), 'tooltip does not have data')
-    equal($._data($tooltip[0], 'events').click[0].namespace, 'foo', 'tooltip still has click.foo')
-    ok(!$._data($tooltip[0], 'events').mouseover && !$._data($tooltip[0], 'events').mouseout, 'tooltip does not have hover events')
+    assert.ok(!$tooltip.hasClass('in'), 'tooltip is hidden')
+    assert.ok(!$._data($tooltip[0], 'bs.tooltip'), 'tooltip does not have data')
+    assert.strictEqual($._data($tooltip[0], 'events').click[0].namespace, 'foo', 'tooltip still has click.foo')
+    assert.ok(!$._data($tooltip[0], 'events').mouseover && !$._data($tooltip[0], 'events').mouseout, 'tooltip does not have hover events')
   })
 
-  test('should show tooltip with delegate selector on click', function () {
-    var $div = $('<div><a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a></div>')
+  QUnit.test('should show tooltip with delegate selector on click', function (assert) {
+    assert.expect(2)
+    var $div = $('<div><a href="#" rel="tooltip" title="Another tooltip"/></div>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({
         selector: 'a[rel="tooltip"]',
         trigger: 'click'
       })
 
-    $div.find('a').click()
-    ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
+    $div.find('a').trigger('click')
+    assert.ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
 
-    $div.find('a').click()
-    equal($('.tooltip').length, 0, 'tooltip was removed from dom')
+    $div.find('a').trigger('click')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip was removed from dom')
   })
 
-  test('should show tooltip when toggle is called', function () {
-    $('<a href="#" rel="tooltip" title="tooltip on toggle">Tooltip trigger</a>')
+  QUnit.test('should show tooltip when toggle is called', function (assert) {
+    assert.expect(1)
+    $('<a href="#" rel="tooltip" title="tooltip on toggle"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({ trigger: 'manual' })
       .bootstrapTooltip('toggle')
 
-    ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
+    assert.ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
   })
 
-  test('should hide previously shown tooltip when toggle is called on tooltip', function () {
+  QUnit.test('should hide previously shown tooltip when toggle is called on tooltip', function (assert) {
+    assert.expect(1)
     $('<a href="#" rel="tooltip" title="tooltip on toggle">@ResentedHook</a>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({ trigger: 'manual' })
       .bootstrapTooltip('show')
 
     $('.tooltip').bootstrapTooltip('toggle')
-    ok($('.tooltip').not('.fade.in'), 'tooltip was faded out')
+    assert.ok($('.tooltip').not('.fade.in'), 'tooltip was faded out')
   })
 
-  test('should place tooltips inside body when container is body', function () {
-    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
+  QUnit.test('should place tooltips inside body when container is body', function (assert) {
+    assert.expect(3)
+    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({ container: 'body' })
       .bootstrapTooltip('show')
 
-    notEqual($('body > .tooltip').length, 0, 'tooltip is direct descendant of body')
-    equal($('#qunit-fixture > .tooltip').length, 0, 'tooltip is not in parent')
+    assert.notEqual($('body > .tooltip').length, 0, 'tooltip is direct descendant of body')
+    assert.strictEqual($('#qunit-fixture > .tooltip').length, 0, 'tooltip is not in parent')
 
     $tooltip.bootstrapTooltip('hide')
-    equal($('body > .tooltip').length, 0, 'tooltip was removed from dom')
+    assert.strictEqual($('body > .tooltip').length, 0, 'tooltip was removed from dom')
   })
 
-  test('should add position class before positioning so that position-specific styles are taken into account', function () {
+  QUnit.test('should add position class before positioning so that position-specific styles are taken into account', function (assert) {
+    assert.expect(1)
     var styles = '<style>'
-        + '.tooltip.tooltip-right { white-space: nowrap; }'
-        + '.tooltip.tooltip-right .tooltip-inner { max-width: none; }'
+        + '.tooltip.right { white-space: nowrap; }'
+        + '.tooltip.right .tooltip-inner { max-width: none; }'
         + '</style>'
     var $styles = $(styles).appendTo('head')
 
     var $container = $('<div/>').appendTo('#qunit-fixture')
-    var $target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line">m</a>')
+    var $target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"/>')
       .appendTo($container)
       .bootstrapTooltip({
         placement: 'right',
@@ -291,101 +326,102 @@ $(function () {
     var top = Math.round($target.offset().top + ($target[0].offsetHeight / 2) - ($tooltip[0].offsetHeight / 2))
     var top2 = Math.round($tooltip.offset().top)
     var topDiff = top - top2
-    ok(topDiff <= 1 && topDiff >= -1)
+    assert.ok(topDiff <= 1 && topDiff >= -1)
     $target.bootstrapTooltip('hide')
 
     $container.remove()
     $styles.remove()
   })
 
-  test('should use title attribute for tooltip text', function () {
-    var $tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip">Tooltip trigger</a>')
+  QUnit.test('should use title attribute for tooltip text', function (assert) {
+    assert.expect(2)
+    var $tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip()
 
     $tooltip.bootstrapTooltip('show')
-    equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set')
+    assert.strictEqual($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set')
 
     $tooltip.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
   })
 
-  test('should prefer title attribute over title option', function () {
-    var $tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip">Tooltip trigger</a>')
+  QUnit.test('should prefer title attribute over title option', function (assert) {
+    assert.expect(2)
+    var $tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({
         title: 'This is a tooltip with some content'
       })
 
     $tooltip.bootstrapTooltip('show')
-    equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while preferred over title option')
+    assert.strictEqual($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while preferred over title option')
 
     $tooltip.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
   })
 
-  test('should use title option', function () {
-    var $tooltip = $('<a href="#" rel="tooltip">Tooltip trigger</a>')
+  QUnit.test('should use title option', function (assert) {
+    assert.expect(2)
+    var $tooltip = $('<a href="#" rel="tooltip"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({
         title: 'This is a tooltip with some content'
       })
 
     $tooltip.bootstrapTooltip('show')
-    equal($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set')
+    assert.strictEqual($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set')
 
     $tooltip.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
   })
 
-  test('should be placed dynamically with the dynamic placement option', function () {
-    var $style = $('<style> a[rel="tooltip"] { display: inline-block; position: absolute; } </style>')
+  QUnit.test('should be placed dynamically to viewport with the dynamic placement option', function (assert) {
+    assert.expect(6)
+    var $style = $('<style> div[rel="tooltip"] { position: absolute; } #qunit-fixture { top: inherit; left: inherit } </style>').appendTo('head')
     var $container = $('<div/>')
       .css({
-        position: 'absolute',
-        overflow: 'hidden',
-        width: 600,
-        height: 400,
-        top: 0,
-        left: 0
+        position: 'relative',
+        height: '100%'
       })
-      .appendTo(document.body)
+      .appendTo('#qunit-fixture')
 
     var $topTooltip = $('<div style="left: 0; top: 0;" rel="tooltip" title="Top tooltip">Top Dynamic Tooltip</div>')
       .appendTo($container)
-      .bootstrapTooltip({ placement: 'auto' })
+      .bootstrapTooltip({ placement: 'auto', viewport: '#qunit-fixture' })
 
     $topTooltip.bootstrapTooltip('show')
-    ok($('.tooltip').is('.tooltip-bottom'), 'top positioned tooltip is dynamically positioned to bottom')
+    assert.ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom')
 
     $topTooltip.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'top positioned tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'top positioned tooltip removed from dom')
 
     var $rightTooltip = $('<div style="right: 0;" rel="tooltip" title="Right tooltip">Right Dynamic Tooltip</div>')
       .appendTo($container)
-      .bootstrapTooltip({ placement: 'right auto' })
+      .bootstrapTooltip({ placement: 'right auto', viewport: '#qunit-fixture' })
 
     $rightTooltip.bootstrapTooltip('show')
-    ok($('.tooltip').is('.tooltip-left'), 'right positioned tooltip is dynamically positioned left')
+    assert.ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left')
 
     $rightTooltip.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'right positioned tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'right positioned tooltip removed from dom')
 
     var $leftTooltip = $('<div style="left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>')
       .appendTo($container)
-      .bootstrapTooltip({ placement: 'auto left' })
+      .bootstrapTooltip({ placement: 'auto left', viewport: '#qunit-fixture' })
 
     $leftTooltip.bootstrapTooltip('show')
-    ok($('.tooltip').is('.tooltip-right'), 'left positioned tooltip is dynamically positioned right')
+    assert.ok($('.tooltip').is('.right'), 'left positioned tooltip is dynamically positioned right')
 
     $leftTooltip.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'left positioned tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'left positioned tooltip removed from dom')
 
     $container.remove()
     $style.remove()
   })
 
-  test('should position tip on top if viewport has enough space and placement is "auto top"', function () {
+  QUnit.test('should position tip on top if viewport has enough space and placement is "auto top"', function (assert) {
+    assert.expect(2)
     var styles = '<style>'
         + 'body { padding-top: 100px; }'
         + '#section { height: 300px; border: 1px solid red; padding-top: 50px }'
@@ -402,15 +438,41 @@ $(function () {
       })
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.tooltip-top'), 'top positioned tooltip is dynamically positioned to top')
+    assert.ok($('.tooltip').is('.top'), 'top positioned tooltip is dynamically positioned to top')
 
     $target.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
 
     $styles.remove()
   })
 
-  test('should position tip on bottom if the tip\'s dimension exceeds the viewport area and placement is "auto top"', function () {
+  QUnit.test('should position tip on top if viewport has enough space and is not parent', function (assert) {
+    assert.expect(2)
+    var styles = '<style>'
+        + '#section { height: 300px; border: 1px solid red; margin-top: 100px; }'
+        + 'div[rel="tooltip"] { width: 150px; border: 1px solid blue; }'
+        + '</style>'
+    var $styles = $(styles).appendTo('head')
+
+    var $container = $('<div id="section"/>').appendTo('#qunit-fixture')
+    var $target = $('<div rel="tooltip" title="tip"/>')
+      .appendTo($container)
+      .bootstrapTooltip({
+        placement: 'auto top',
+        viewport: '#qunit-fixture'
+      })
+
+    $target.bootstrapTooltip('show')
+    assert.ok($('.tooltip').is('.top'), 'top positioned tooltip is dynamically positioned to top')
+
+    $target.bootstrapTooltip('hide')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
+
+    $styles.remove()
+  })
+
+  QUnit.test('should position tip on bottom if the tip\'s dimension exceeds the viewport area and placement is "auto top"', function (assert) {
+    assert.expect(2)
     var styles = '<style>'
         + 'body { padding-top: 100px; }'
         + '#section { height: 300px; border: 1px solid red; }'
@@ -427,15 +489,16 @@ $(function () {
       })
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.tooltip-bottom'), 'top positioned tooltip is dynamically positioned to bottom')
+    assert.ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom')
 
     $target.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
 
     $styles.remove()
   })
 
-  test('should display the tip on top whenever scrollable viewport has enough room if the given placement is "auto top"', function () {
+  QUnit.test('should display the tip on top whenever scrollable viewport has enough room if the given placement is "auto top"', function (assert) {
+    assert.expect(2)
     var styles = '<style>'
         + '#scrollable-div { height: 200px; overflow: auto; }'
         + '.tooltip-item { margin: 200px 0 400px; width: 150px; }'
@@ -453,15 +516,16 @@ $(function () {
     $('#scrollable-div').scrollTop(100)
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.tooltip-top.in'), 'has correct classes applied')
+    assert.ok($('.tooltip').is('.fade.top.in'), 'has correct classes applied')
 
     $target.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
 
     $styles.remove()
   })
 
-  test('should display the tip on bottom whenever scrollable viewport doesn\'t have enough room if the given placement is "auto top"', function () {
+  QUnit.test('should display the tip on bottom whenever scrollable viewport doesn\'t have enough room if the given placement is "auto top"', function (assert) {
+    assert.expect(2)
     var styles = '<style>'
         + '#scrollable-div { height: 200px; overflow: auto; }'
         + '.tooltip-item { padding: 200px 0 400px; width: 150px; }'
@@ -479,15 +543,16 @@ $(function () {
     $('#scrollable-div').scrollTop(200)
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
+    assert.ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
 
     $target.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
 
     $styles.remove()
   })
 
-  test('should display the tip on bottom whenever scrollable viewport has enough room if the given placement is "auto bottom"', function () {
+  QUnit.test('should display the tip on bottom whenever scrollable viewport has enough room if the given placement is "auto bottom"', function (assert) {
+    assert.expect(2)
     var styles = '<style>'
         + '#scrollable-div { height: 200px; overflow: auto; }'
         + '.spacer { height: 400px; }'
@@ -509,15 +574,16 @@ $(function () {
     $('#scrollable-div').scrollTop(200)
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied')
+    assert.ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
 
     $target.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
 
     $styles.remove()
   })
 
-  test('should display the tip on top whenever scrollable viewport doesn\'t have enough room if the given placement is "auto bottom"', function () {
+  QUnit.test('should display the tip on top whenever scrollable viewport doesn\'t have enough room if the given placement is "auto bottom"', function (assert) {
+    assert.expect(2)
     var styles = '<style>'
         + '#scrollable-div { height: 200px; overflow: auto; }'
         + '.tooltip-item { margin-top: 400px; width: 150px; }'
@@ -535,15 +601,16 @@ $(function () {
     $('#scrollable-div').scrollTop(400)
 
     $target.bootstrapTooltip('show')
-    ok($('.tooltip').is('.fade.tooltip-top.in'), 'has correct classes applied')
+    assert.ok($('.tooltip').is('.fade.top.in'), 'has correct classes applied')
 
     $target.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
 
     $styles.remove()
   })
 
-  test('should adjust the tip\'s top position when up against the top of the viewport', function () {
+  QUnit.test('should adjust the tip\'s top position when up against the top of the viewport', function (assert) {
+    assert.expect(2)
     var styles = '<style>'
         + '.tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; }'
         + 'a[rel="tooltip"] { position: fixed; }'
@@ -551,7 +618,7 @@ $(function () {
     var $styles = $(styles).appendTo('head')
 
     var $container = $('<div/>').appendTo('#qunit-fixture')
-    var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; left: 0px;">m</a>')
+    var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; left: 0px;"/>')
       .appendTo($container)
       .bootstrapTooltip({
         placement: 'right',
@@ -562,15 +629,16 @@ $(function () {
       })
 
     $target.bootstrapTooltip('show')
-    equal(Math.round($container.find('.tooltip').offset().top), 12)
+    assert.strictEqual(Math.round($container.find('.tooltip').offset().top), 12)
 
     $target.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
 
     $styles.remove()
   })
 
-  test('should adjust the tip\'s top position when up against the bottom of the viewport', function () {
+  QUnit.test('should adjust the tip\'s top position when up against the bottom of the viewport', function (assert) {
+    assert.expect(2)
     var styles = '<style>'
         + '.tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; }'
         + 'a[rel="tooltip"] { position: fixed; }'
@@ -578,7 +646,7 @@ $(function () {
     var $styles = $(styles).appendTo('head')
 
     var $container = $('<div/>').appendTo('#qunit-fixture')
-    var $target = $('<a href="#" rel="tooltip" title="tip" style="bottom: 0px; left: 0px;">m</a>')
+    var $target = $('<a href="#" rel="tooltip" title="tip" style="bottom: 0px; left: 0px;"/>')
       .appendTo($container)
       .bootstrapTooltip({
         placement: 'right',
@@ -590,16 +658,17 @@ $(function () {
 
     $target.bootstrapTooltip('show')
     var $tooltip = $container.find('.tooltip')
-    strictEqual(Math.round($tooltip.offset().top), Math.round($(window).height() - 12 - $tooltip[0].offsetHeight))
+    assert.strictEqual(Math.round($tooltip.offset().top), Math.round($(window).height() - 12 - $tooltip[0].offsetHeight))
 
     $target.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
 
     $container.remove()
     $styles.remove()
   })
 
-  test('should adjust the tip\'s left position when up against the left of the viewport', function () {
+  QUnit.test('should adjust the tip\'s left position when up against the left of the viewport', function (assert) {
+    assert.expect(2)
     var styles = '<style>'
         + '.tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; }'
         + 'a[rel="tooltip"] { position: fixed; }'
@@ -607,7 +676,7 @@ $(function () {
     var $styles = $(styles).appendTo('head')
 
     var $container = $('<div/>').appendTo('#qunit-fixture')
-    var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; left: 0px;">m</a>')
+    var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; left: 0px;"/>')
       .appendTo($container)
       .bootstrapTooltip({
         placement: 'bottom',
@@ -618,16 +687,17 @@ $(function () {
       })
 
     $target.bootstrapTooltip('show')
-    strictEqual(Math.round($container.find('.tooltip').offset().left), 12)
+    assert.strictEqual(Math.round($container.find('.tooltip').offset().left), 12)
 
     $target.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
 
     $container.remove()
     $styles.remove()
   })
 
-  test('should adjust the tip\'s left position when up against the right of the viewport', function () {
+  QUnit.test('should adjust the tip\'s left position when up against the right of the viewport', function (assert) {
+    assert.expect(2)
     var styles = '<style>'
         + '.tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; }'
         + 'a[rel="tooltip"] { position: fixed; }'
@@ -635,7 +705,7 @@ $(function () {
     var $styles = $(styles).appendTo('head')
 
     var $container = $('<div/>').appendTo('body')
-    var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; right: 0px;">m</a>')
+    var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 0px; right: 0px;"/>')
       .appendTo($container)
       .bootstrapTooltip({
         placement: 'bottom',
@@ -647,16 +717,17 @@ $(function () {
 
     $target.bootstrapTooltip('show')
     var $tooltip = $container.find('.tooltip')
-    strictEqual(Math.round($tooltip.offset().left), Math.round($(window).width() - 12 - $tooltip[0].offsetWidth))
+    assert.strictEqual(Math.round($tooltip.offset().left), Math.round($(window).width() - 12 - $tooltip[0].offsetWidth))
 
     $target.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
 
     $container.remove()
     $styles.remove()
   })
 
-  test('should adjust the tip when up against the right of an arbitrary viewport', function () {
+  QUnit.test('should adjust the tip when up against the right of an arbitrary viewport', function (assert) {
+    assert.expect(2)
     var styles = '<style>'
         + '.tooltip, .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; }'
         + '.container-viewport { position: absolute; top: 50px; left: 60px; width: 300px; height: 300px; }'
@@ -665,7 +736,7 @@ $(function () {
     var $styles = $(styles).appendTo('head')
 
     var $container = $('<div class="container-viewport"/>').appendTo(document.body)
-    var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 50px; left: 350px;">m</a>')
+    var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 50px; left: 350px;"/>')
       .appendTo($container)
       .bootstrapTooltip({
         placement: 'bottom',
@@ -674,18 +745,78 @@ $(function () {
 
     $target.bootstrapTooltip('show')
     var $tooltip = $container.find('.tooltip')
-    strictEqual(Math.round($tooltip.offset().left), Math.round(60 + $container.width() - $tooltip[0].offsetWidth))
+    assert.strictEqual(Math.round($tooltip.offset().left), Math.round(60 + $container.width() - $tooltip[0].offsetWidth))
+
+    $target.bootstrapTooltip('hide')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
+
+    $container.remove()
+    $styles.remove()
+  })
+
+  QUnit.test('should get viewport element from function', function (assert) {
+    assert.expect(3)
+    var styles = '<style>'
+        + '.tooltip, .tooltip .tooltip-inner { width: 200px; height: 200px; max-width: none; }'
+        + '.container-viewport { position: absolute; top: 50px; left: 60px; width: 300px; height: 300px; }'
+        + 'a[rel="tooltip"] { position: fixed; }'
+        + '</style>'
+    var $styles = $(styles).appendTo('head')
+
+    var $container = $('<div class="container-viewport"/>').appendTo(document.body)
+    var $target = $('<a href="#" rel="tooltip" title="tip" style="top: 50px; left: 350px;"/>').appendTo($container)
+    $target
+      .bootstrapTooltip({
+        placement: 'bottom',
+        viewport: function ($element) {
+          assert.strictEqual($element[0], $target[0], 'viewport function was passed target as argument')
+          return ($element.closest('.container-viewport'))
+        }
+      })
+
+    $target.bootstrapTooltip('show')
+    var $tooltip = $container.find('.tooltip')
+    assert.strictEqual(Math.round($tooltip.offset().left), Math.round(60 + $container.width() - $tooltip[0].offsetWidth))
+
+    $target.bootstrapTooltip('hide')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
+
+    $container.remove()
+    $styles.remove()
+  })
+
+  QUnit.test('should not misplace the tip when the right edge offset is greater or equal than the viewport width', function (assert) {
+    assert.expect(2)
+    var styles = '<style>'
+        + '.tooltip, .tooltip *, .tooltip *:before, .tooltip *:after { box-sizing: border-box; }'
+        + '.container-viewport, .container-viewport *, .container-viewport *:before, .container-viewport *:after { box-sizing: border-box; }'
+        + '.tooltip, .tooltip .tooltip-inner { width: 50px; height: 50px; max-width: none; background: red; }'
+        + '.container-viewport { padding: 100px; margin-left: 100px; width: 100px; }'
+        + '</style>'
+    var $styles = $(styles).appendTo('head')
+
+    var $container = $('<div class="container-viewport"/>').appendTo(document.body)
+    var $target = $('<a href="#" rel="tooltip" title="tip">foobar</a>')
+      .appendTo($container)
+      .bootstrapTooltip({
+        viewport: '.container-viewport'
+      })
+
+    $target.bootstrapTooltip('show')
+    var $tooltip = $container.find('.tooltip')
+    assert.strictEqual(Math.round($tooltip.offset().left), Math.round($target.position().left + $target.width() / 2 - $tooltip[0].offsetWidth / 2))
 
     $target.bootstrapTooltip('hide')
-    equal($('.tooltip').length, 0, 'tooltip removed from dom')
+    assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
 
     $container.remove()
     $styles.remove()
   })
 
-  test('should not error when trying to show an auto-placed tooltip that has been removed from the dom', function () {
+  QUnit.test('should not error when trying to show an auto-placed tooltip that has been removed from the dom', function (assert) {
+    assert.expect(1)
     var passed = true
-    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
+    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
       .appendTo('#qunit-fixture')
       .one('show.bs.tooltip', function () {
         $(this).remove()
@@ -699,10 +830,11 @@ $(function () {
       console.log(err)
     }
 
-    ok(passed, '.tooltip(\'show\') should not throw an error if element no longer is in dom')
+    assert.ok(passed, '.tooltip(\'show\') should not throw an error if element no longer is in dom')
   })
 
-  test('should place tooltip on top of element', function (assert) {
+  QUnit.test('should place tooltip on top of element', function (assert) {
+    assert.expect(1)
     var done = assert.async()
 
     var containerHTML = '<div>'
@@ -734,12 +866,13 @@ $(function () {
     var $tooltip = $container.find('.tooltip')
 
     setTimeout(function () {
-      ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($trigger.offset().top))
+      assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($trigger.offset().top))
       done()
     }, 0)
   })
 
-  test('should place tooltip inside viewport', function (assert) {
+  QUnit.test('should place tooltip inside viewport', function (assert) {
+    assert.expect(1)
     var done = assert.async()
 
     var $container = $('<div/>')
@@ -765,68 +898,71 @@ $(function () {
       .bootstrapTooltip('show')
 
     setTimeout(function () {
-      ok($('.tooltip').offset().left >= 0)
+      assert.ok($('.tooltip').offset().left >= 0)
       done()
     }, 0)
   })
 
-  test('should show tooltip if leave event hasn\'t occurred before delay expires', function (assert) {
+  QUnit.test('should show tooltip if leave event hasn\'t occurred before delay expires', function (assert) {
+    assert.expect(2)
     var done = assert.async()
 
-    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
+    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({ delay: 150 })
 
     setTimeout(function () {
-      ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip is not faded in')
+      assert.ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip is not faded in')
     }, 100)
 
     setTimeout(function () {
-      ok($('.tooltip').is('.fade.in'), '200ms: tooltip is faded in')
+      assert.ok($('.tooltip').is('.fade.in'), '200ms: tooltip is faded in')
       done()
     }, 200)
 
     $tooltip.trigger('mouseenter')
   })
 
-  test('should not show tooltip if leave event occurs before delay expires', function (assert) {
+  QUnit.test('should not show tooltip if leave event occurs before delay expires', function (assert) {
+    assert.expect(2)
     var done = assert.async()
 
-    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
+    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({ delay: 150 })
 
     setTimeout(function () {
-      ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
+      assert.ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
       $tooltip.trigger('mouseout')
     }, 100)
 
     setTimeout(function () {
-      ok(!$('.tooltip').is('.fade.in'), '200ms: tooltip not faded in')
+      assert.ok(!$('.tooltip').is('.fade.in'), '200ms: tooltip not faded in')
       done()
     }, 200)
 
     $tooltip.trigger('mouseenter')
   })
 
-  test('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', function (assert) {
+  QUnit.test('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', function (assert) {
+    assert.expect(3)
     var done = assert.async()
 
-    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
+    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({ delay: { show: 0, hide: 150 }})
 
     setTimeout(function () {
-      ok($('.tooltip').is('.fade.in'), '1ms: tooltip faded in')
+      assert.ok($('.tooltip').is('.fade.in'), '1ms: tooltip faded in')
       $tooltip.trigger('mouseout')
 
       setTimeout(function () {
-        ok($('.tooltip').is('.fade.in'), '100ms: tooltip still faded in')
+        assert.ok($('.tooltip').is('.fade.in'), '100ms: tooltip still faded in')
         $tooltip.trigger('mouseenter')
       }, 100)
 
       setTimeout(function () {
-        ok($('.tooltip').is('.fade.in'), '200ms: tooltip still faded in')
+        assert.ok($('.tooltip').is('.fade.in'), '200ms: tooltip still faded in')
         done()
       }, 200)
     }, 0)
@@ -834,65 +970,68 @@ $(function () {
     $tooltip.trigger('mouseenter')
   })
 
-  test('should not show tooltip if leave event occurs before delay expires', function (assert) {
+  QUnit.test('should not show tooltip if leave event occurs before delay expires', function (assert) {
+    assert.expect(2)
     var done = assert.async()
 
-    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
+    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({ delay: 150 })
 
     setTimeout(function () {
-      ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
+      assert.ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
       $tooltip.trigger('mouseout')
     }, 100)
 
     setTimeout(function () {
-      ok(!$('.tooltip').is('.fade.in'), '200ms: tooltip not faded in')
+      assert.ok(!$('.tooltip').is('.fade.in'), '200ms: tooltip not faded in')
       done()
     }, 200)
 
     $tooltip.trigger('mouseenter')
   })
 
-  test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function (assert) {
+  QUnit.test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function (assert) {
+    assert.expect(2)
     var done = assert.async()
 
-    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
+    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({ delay: { show: 150, hide: 0 }})
 
     setTimeout(function () {
-      ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
+      assert.ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
       $tooltip.trigger('mouseout')
     }, 100)
 
     setTimeout(function () {
-      ok(!$('.tooltip').is('.fade.in'), '250ms: tooltip not faded in')
+      assert.ok(!$('.tooltip').is('.fade.in'), '250ms: tooltip not faded in')
       done()
     }, 250)
 
     $tooltip.trigger('mouseenter')
   })
 
-  test('should wait 200ms before hiding the tooltip', function (assert) {
+  QUnit.test('should wait 200ms before hiding the tooltip', function (assert) {
+    assert.expect(3)
     var done = assert.async()
 
-    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip">Tooltip trigger</a>')
+    var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
       .appendTo('#qunit-fixture')
       .bootstrapTooltip({ delay: { show: 0, hide: 150 }})
 
     setTimeout(function () {
-      ok($('.tooltip').is('.fade.in'), '1ms: tooltip faded in')
+      assert.ok($tooltip.data('bs.tooltip').$tip.is('.fade.in'), '1ms: tooltip faded in')
 
       $tooltip.trigger('mouseout')
 
       setTimeout(function () {
-        ok($('.tooltip').is('.fade.in'), '100ms: tooltip still faded in')
+        assert.ok($tooltip.data('bs.tooltip').$tip.is('.fade.in'), '100ms: tooltip still faded in')
       }, 100)
 
       setTimeout(function () {
-        ok(!$('.tooltip').is('.in'), '200ms: tooltip removed')
-        start()
+        assert.ok(!$tooltip.data('bs.tooltip').$tip.is('.in'), '200ms: tooltip removed')
+        done()
       }, 200)
 
     }, 0)
@@ -900,12 +1039,13 @@ $(function () {
     $tooltip.trigger('mouseenter')
   })
 
-  test('should correctly position tooltips on SVG elements', function (assert) {
+  QUnit.test('should correctly position tooltips on SVG elements', function (assert) {
     if (!window.SVGElement) {
       // Skip IE8 since it doesn't support SVG
-      expect(0)
+      assert.expect(0)
       return
     }
+    assert.expect(2)
 
     var done = assert.async()
 
@@ -928,9 +1068,9 @@ $(function () {
       .on('shown.bs.tooltip', function () {
         var offset = $('.tooltip').offset()
         $styles.remove()
-        ok(Math.abs(offset.left - 88) <= 1, 'tooltip has correct horizontal location')
+        assert.ok(Math.abs(offset.left - 88) <= 1, 'tooltip has correct horizontal location')
         $circle.bootstrapTooltip('hide')
-        equal($('.tooltip').length, 0, 'tooltip removed from dom')
+        assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
         done()
       })
       .bootstrapTooltip({ container: 'body', placement: 'top', trigger: 'manual' })
@@ -938,7 +1078,8 @@ $(function () {
     $circle.bootstrapTooltip('show')
   })
 
-  test('should correctly determine auto placement based on container rather than parent', function (assert) {
+  QUnit.test('should correctly determine auto placement based on container rather than parent', function (assert) {
+    assert.expect(2)
     var done = assert.async()
 
     var styles = '<style>'
@@ -961,13 +1102,13 @@ $(function () {
         var $tip = $('.tooltip-inner')
         var tipXrightEdge = $tip.offset().left + $tip.width()
         var triggerXleftEdge = $trigger.offset().left
-        ok(tipXrightEdge < triggerXleftEdge, 'tooltip with auto left placement, when near the right edge of the viewport, gets left placement')
+        assert.ok(tipXrightEdge < triggerXleftEdge, 'tooltip with auto left placement, when near the right edge of the viewport, gets left placement')
         $trigger.bootstrapTooltip('hide')
       })
       .on('hidden.bs.tooltip', function () {
         $styles.remove()
         $(this).remove()
-        equal($('.tooltip').length, 0, 'tooltip removed from dom')
+        assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
         done()
       })
       .bootstrapTooltip({
@@ -979,9 +1120,10 @@ $(function () {
     $trigger.bootstrapTooltip('show')
   })
 
-  test('should not reload the tooltip on subsequent mouseenter events', function () {
+  QUnit.test('should not reload the tooltip on subsequent mouseenter events', function (assert) {
+    assert.expect(1)
     var titleHtml = function () {
-      var uid = 'fatTooltip'
+      var uid = $.fn.bootstrapTooltip.Constructor.prototype.getUID('tooltip')
       return '<p id="tt-content">' + uid + '</p><p>' + uid + '</p><p>' + uid + '</p>'
     }
 
@@ -1002,12 +1144,13 @@ $(function () {
     var currentUid = $('#tt-content').text()
 
     $('#tt-content').trigger('mouseenter')
-    equal(currentUid, $('#tt-content').text())
+    assert.strictEqual(currentUid, $('#tt-content').text())
   })
 
-  test('should not reload the tooltip if the mouse leaves and re-enters before hiding', function () {
+  QUnit.test('should not reload the tooltip if the mouse leaves and re-enters before hiding', function (assert) {
+    assert.expect(4)
     var titleHtml = function () {
-      var uid = 'fatTooltip'
+      var uid = $.fn.bootstrapTooltip.Constructor.prototype.getUID('tooltip')
       return '<p id="tt-content">' + uid + '</p><p>' + uid + '</p><p>' + uid + '</p>'
     }
 
@@ -1030,19 +1173,18 @@ $(function () {
     var currentUid = $('#tt-content').text()
 
     $('#tt-outer').trigger('mouseleave')
-    equal(currentUid, $('#tt-content').text())
-
-    debugger
+    assert.strictEqual(currentUid, $('#tt-content').text())
 
-    ok(obj.getHoverState() == 'out', 'the tooltip hoverState should be set to "out"')
+    assert.ok(obj.hoverState == 'out', 'the tooltip hoverState should be set to "out"')
 
     $('#tt-content').trigger('mouseenter')
-    ok(obj.getHoverState() == 'in', 'the tooltip hoverState should be set to "in"')
+    assert.ok(obj.hoverState == 'in', 'the tooltip hoverState should be set to "in"')
 
-    equal(currentUid, $('#tt-content').text())
+    assert.strictEqual(currentUid, $('#tt-content').text())
   })
 
-  test('should position arrow correctly when tooltip is moved to not appear offscreen', function (assert) {
+  QUnit.test('should position arrow correctly when tooltip is moved to not appear offscreen', function (assert) {
+    assert.expect(2)
     var done = assert.async()
 
     var styles = '<style>'
@@ -1056,14 +1198,14 @@ $(function () {
     $('<a href="#" title="tooltip title" style="position: absolute; bottom: 0; right: 0;">Foobar</a>')
       .appendTo('body')
       .on('shown.bs.tooltip', function () {
-        var arrowStyles = $('.tooltip').find('.tooltip-arrow').attr('style')
-        ok(/left/i.test(arrowStyles) && !/top/i.test(arrowStyles), 'arrow positioned correctly')
+        var arrowStyles = $(this).data('bs.tooltip').$tip.find('.tooltip-arrow').attr('style')
+        assert.ok(/left/i.test(arrowStyles) && !/top/i.test(arrowStyles), 'arrow positioned correctly')
         $(this).bootstrapTooltip('hide')
       })
       .on('hidden.bs.tooltip', function () {
         $styles.remove()
         $(this).remove()
-        equal($('.tooltip').length, 0, 'tooltip removed from dom')
+        assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
         done()
       })
       .bootstrapTooltip({
@@ -1074,12 +1216,13 @@ $(function () {
       .bootstrapTooltip('show')
   })
 
-  test('should correctly position tooltips on transformed elements', function (assert) {
+  QUnit.test('should correctly position tooltips on transformed elements', function (assert) {
     var styleProps = document.documentElement.style
     if (!('transform' in styleProps) && !('webkitTransform' in styleProps) && !('msTransform' in styleProps)) {
-      expect(0)
+      assert.expect(0)
       return
     }
+    assert.expect(2)
 
     var done = assert.async()
 
@@ -1092,14 +1235,14 @@ $(function () {
         + '</style>'
     var $styles = $(styles).appendTo('head')
 
-    var $element = $('<div id="target" title="1"></div>').appendTo('#qunit-fixture')
+    var $element = $('<div id="target" title="1"/>').appendTo('#qunit-fixture')
 
     $element
       .on('shown.bs.tooltip', function () {
         var offset = $('.tooltip').offset()
         $styles.remove()
-        ok(Math.abs(offset.left - 88) <= 1, 'tooltip has correct horizontal location')
-        ok(Math.abs(offset.top - 126) <= 1, 'tooltip has correct vertical location')
+        assert.ok(Math.abs(offset.left - 88) <= 1, 'tooltip has correct horizontal location')
+        assert.ok(Math.abs(offset.top - 126) <= 1, 'tooltip has correct vertical location')
         $element.bootstrapTooltip('hide')
         done()
       })
@@ -1112,15 +1255,71 @@ $(function () {
     $element.bootstrapTooltip('show')
   })
 
-  QUnit.test('should throw an error when trying to show a tooltip on a hidden element', function (assert) {
+  QUnit.test('should throw an error when initializing tooltip on the document object without specifying a delegation selector', function (assert) {
+    assert.expect(1)
+    assert.throws(function () {
+      $(document).bootstrapTooltip({ title: 'What am I on?' })
+    }, new Error('`selector` option must be specified when initializing tooltip on the window.document object!'))
+  })
+
+  QUnit.test('should do nothing when an attempt is made to hide an uninitialized tooltip', function (assert) {
     assert.expect(1)
-    var $target = $('<a href="#" rel="tooltip" title="Another tooltip" style="display: none;">I am hidden</a>').appendTo('#qunit-fixture')
 
+    var $tooltip = $('<span data-toggle="tooltip" title="some tip">some text</span>')
+      .appendTo('#qunit-fixture')
+      .on('hidden.bs.tooltip shown.bs.tooltip', function () {
+        assert.ok(false, 'should not fire any tooltip events')
+      })
+      .bootstrapTooltip('hide')
+    assert.strictEqual($tooltip.data('bs.tooltip'), undefined, 'should not initialize the tooltip')
+  })
+
+  QUnit.test('should throw an error when template contains multiple top-level elements', function (assert) {
+    assert.expect(1)
     assert.throws(function () {
-      $target.bootstrapTooltip('show')
-    }, new Error('Can\'t show a tooltip/popover on a hidden element'))
+      $('<a href="#" data-toggle="tooltip" title="Another tooltip"></a>')
+        .appendTo('#qunit-fixture')
+        .bootstrapTooltip({ template: '<div>Foo</div><div>Bar</div>' })
+        .bootstrapTooltip('show')
+    }, new Error('tooltip `template` option must consist of exactly 1 top-level element!'))
+  })
+
+  QUnit.test('should not remove tooltip if multiple triggers are set and one is still active', function (assert) {
+    assert.expect(41)
+    var $el = $('<button>Trigger</button>')
+      .appendTo('#qunit-fixture')
+      .bootstrapTooltip({ trigger: 'click hover focus', animation: false })
+    var tooltip = $el.data('bs.tooltip')
+    var $tooltip = tooltip.tip()
+
+    function showingTooltip() { return $tooltip.hasClass('in') || tooltip.hoverState == 'in' }
+
+    var tests = [
+        ['mouseenter', 'mouseleave'],
 
-    $target.remove()
+        ['focusin', 'focusout'],
+
+        ['click', 'click'],
+
+        ['mouseenter', 'focusin', 'focusout', 'mouseleave'],
+        ['mouseenter', 'focusin', 'mouseleave', 'focusout'],
+
+        ['focusin', 'mouseenter', 'mouseleave', 'focusout'],
+        ['focusin', 'mouseenter', 'focusout', 'mouseleave'],
+
+        ['click', 'focusin', 'mouseenter', 'focusout', 'mouseleave', 'click'],
+        ['mouseenter', 'click', 'focusin', 'focusout', 'mouseleave', 'click'],
+        ['mouseenter', 'focusin', 'click', 'click', 'mouseleave', 'focusout']
+    ]
+
+    assert.ok(!showingTooltip())
+
+    $.each(tests, function (idx, triggers) {
+      for (var i = 0, len = triggers.length; i < len; i++) {
+        $el.trigger(triggers[i]);
+        assert.equal(i < (len - 1), showingTooltip())
+      }
+    })
   })
 
 })
diff --git a/js/tests/visual/affix-with-sticky-footer.html b/js/tests/visual/affix-with-sticky-footer.html
new file mode 100644
index 000000000..5c413067a
--- /dev/null
+++ b/js/tests/visual/affix-with-sticky-footer.html
@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+<html>
+<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>Affix</title>
+  <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+
+  <style>
+    html {
+      position: relative;
+      min-height: 100%;
+    }
+    body {
+      /* Margin bottom by footer height */
+      margin-bottom: 200px;
+    }
+    .footer {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      /* Set the fixed height of the footer here */
+      height: 200px;
+      background-color: #f5f5f5;
+    }
+    /* Test Styles */
+    .affixed-element-top.affix {
+      top: 10px;
+    }
+    .affixed-element-top.affix-bottom {
+      position: absolute;
+    }
+    .affixed-element-bottom {
+      margin-bottom: 0;
+    }
+    .affixed-element-bottom.affix {
+      bottom: 10px;
+    }
+    .affixed-element-bottom.affix-bottom {
+      position: relative;
+    }
+    .grow-btn, .shrink-btn {
+      color: #FFF;
+    }
+    .grow-btn {
+      background-color: #2ECC40;
+    }
+    .grow-btn:hover {
+      background-color: #3D9970;
+    }
+    .shrink-btn {
+      background-color: #FF4136;
+    }
+    .shrink-btn:hover {
+      background-color: #85144B;
+    }
+  </style>
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[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]-->
+</head>
+<body>
+
+<div class="container">
+
+  <div class="page-header js-page-header">
+    <h1>Affix <small>Bootstrap Visual Test</small></h1>
+  </div>
+
+  <div class="col-md-3">
+    <ul class="list-group affixed-element-top js-affixed-element-top">
+      <li class="list-group-item">Cras justo odio</li>
+      <li class="list-group-item">Dapibus ac facilisis in</li>
+      <li class="list-group-item">Morbi leo risus</li>
+      <li class="list-group-item">Porta ac consectetur ac</li>
+      <li class="list-group-item">Vestibulum at eros</li>
+      <li class="list-group-item">Cras justo odio</li>
+      <li class="list-group-item">Dapibus ac facilisis in</li>
+      <li class="list-group-item">Morbi leo risus</li>
+      <li class="list-group-item">Porta ac consectetur ac</li>
+      <li class="list-group-item">Vestibulum at eros</li>
+      <li class="list-group-item">Cras justo odio</li>
+      <li class="list-group-item">Dapibus ac facilisis in</li>
+      <li class="list-group-item">Morbi leo risus</li>
+      <li class="list-group-item">Porta ac consectetur ac</li>
+      <li class="list-group-item">Vestibulum at eros</li>
+      <li class="list-group-item">Porta ac consectetur ac</li>
+    </ul>
+  </div>
+
+  <div class="col-md-6 js-content">
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+  </div>
+
+  <div class="col-md-3">
+    <ul class="list-group affixed-element-bottom js-affixed-element-bottom">
+      <li class="list-group-item">Sit necessitatibus aspernatur.</li>
+      <li class="list-group-item">Adipisicing alias dolor!</li>
+      <li class="list-group-item">Ipsum molestiae impedit.</li>
+      <li class="list-group-item">Amet quis iste?</li>
+      <li class="list-group-item">Ipsum quaerat porro.</li>
+      <li class="list-group-item">Elit lorem libero.</li>
+      <li class="list-group-item">Ipsum dolore facilis.</li>
+      <li class="list-group-item">Elit ad atque.</li>
+      <li class="list-group-item">Dolor amet sequi!</li>
+      <li class="list-group-item">Consectetur voluptatum facilis!</li>
+      <li class="list-group-item">Sit neque eligendi?</li>
+      <li class="list-group-item">Amet fuga consectetur!</li>
+      <li class="list-group-item">Amet molestias repellat!</li>
+      <li class="list-group-item">Consectetur minima repellendus.</li>
+      <li class="list-group-item grow-btn js-grow-btn">Grow content</li>
+      <li class="list-group-item shrink-btn js-shrink-btn">Shrink content</li>
+    </ul>
+  </div>
+
+
+</div>
+
+<footer class="footer js-footer">
+  <div class="container">
+    <p class="text-muted">Place sticky footer content here.</p>
+  </div>
+</footer>
+
+<!-- JavaScript Includes -->
+<script src="../vendor/jquery.min.js"></script>
+<script src="../../transition.js"></script>
+<script src="../../affix.js"></script>
+
+
+<!-- JavaScript Test -->
+<script>
+$(function () {
+  $('.js-affixed-element-top').affix({
+    offset: {
+      top: $('.js-page-header').outerHeight(true) - 10
+    , bottom: $('.js-footer').outerHeight(true) + 10
+    }
+  })
+  // todo(fat): sux you have to do this.
+  .on('affix.bs.affix', function (e) {
+    $(e.target).width(e.target.offsetWidth)
+  })
+
+  $('.js-affixed-element-bottom').affix({
+    offset: {
+      bottom: $('.js-footer').outerHeight(true) + 10
+    }
+  })
+
+  $('.js-grow-btn').on('click', function() {
+    $('.js-content').append('<p>Ipsum corrupti ipsam est temporibus.</p>')
+  })
+  $('.js-shrink-btn').on('click', function() {
+    $('.js-content p').last().remove()
+  })
+})
+</script>
+</body>
+</html>
diff --git a/js/tests/visual/affix.html b/js/tests/visual/affix.html
new file mode 100644
index 000000000..4d772dc73
--- /dev/null
+++ b/js/tests/visual/affix.html
@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html>
+<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>Affix</title>
+  <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+
+  <style>
+    /* Test Styles */
+    .affixed-element-top.affix {
+      top: 10px;
+    }
+    .affixed-element-top.affix-bottom {
+      position: absolute;
+    }
+    .affixed-element-bottom {
+      margin-bottom: 0;
+    }
+    .affixed-element-bottom.affix {
+      bottom: 10px;
+    }
+    .affixed-element-bottom.affix-bottom {
+      position: relative;
+    }
+    .grow-btn, .shrink-btn {
+      color: #FFF;
+    }
+    .grow-btn {
+      background-color: #2ECC40;
+    }
+    .grow-btn:hover {
+      background-color: #3D9970;
+    }
+    .shrink-btn {
+      background-color: #FF4136;
+    }
+    .shrink-btn:hover {
+      background-color: #85144B;
+    }
+  </style>
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[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]-->
+</head>
+<body>
+
+<div class="container">
+
+  <div class="page-header js-page-header">
+    <h1>Affix <small>Bootstrap Visual Test</small></h1>
+  </div>
+
+  <div class="col-md-3">
+    <ul class="list-group affixed-element-top js-affixed-element-top">
+      <li class="list-group-item">Cras justo odio</li>
+      <li class="list-group-item">Dapibus ac facilisis in</li>
+      <li class="list-group-item">Morbi leo risus</li>
+      <li class="list-group-item">Porta ac consectetur ac</li>
+      <li class="list-group-item">Vestibulum at eros</li>
+      <li class="list-group-item">Cras justo odio</li>
+      <li class="list-group-item">Dapibus ac facilisis in</li>
+      <li class="list-group-item">Morbi leo risus</li>
+      <li class="list-group-item">Porta ac consectetur ac</li>
+      <li class="list-group-item">Vestibulum at eros</li>
+      <li class="list-group-item">Cras justo odio</li>
+      <li class="list-group-item">Dapibus ac facilisis in</li>
+      <li class="list-group-item">Morbi leo risus</li>
+      <li class="list-group-item">Porta ac consectetur ac</li>
+      <li class="list-group-item">Vestibulum at eros</li>
+      <li class="list-group-item">Porta ac consectetur ac</li>
+    </ul>
+  </div>
+
+  <div class="col-md-6 js-content">
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+  </div>
+
+  <div class="col-md-3">
+    <ul class="list-group affixed-element-bottom js-affixed-element-bottom">
+      <li class="list-group-item">Sit necessitatibus aspernatur.</li>
+      <li class="list-group-item">Adipisicing alias dolor!</li>
+      <li class="list-group-item">Ipsum molestiae impedit.</li>
+      <li class="list-group-item">Amet quis iste?</li>
+      <li class="list-group-item">Ipsum quaerat porro.</li>
+      <li class="list-group-item">Elit lorem libero.</li>
+      <li class="list-group-item">Ipsum dolore facilis.</li>
+      <li class="list-group-item">Elit ad atque.</li>
+      <li class="list-group-item">Dolor amet sequi!</li>
+      <li class="list-group-item">Consectetur voluptatum facilis!</li>
+      <li class="list-group-item">Sit neque eligendi?</li>
+      <li class="list-group-item">Amet fuga consectetur!</li>
+      <li class="list-group-item">Amet molestias repellat!</li>
+      <li class="list-group-item">Consectetur minima repellendus.</li>
+      <li class="list-group-item grow-btn js-grow-btn">Grow content</li>
+      <li class="list-group-item shrink-btn js-shrink-btn">Shrink content</li>
+    </ul>
+  </div>
+
+  <div class="col-md-12 js-footer">
+    <hr>
+
+    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+
+    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
+
+    <p>Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.</p>
+
+    <p>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+  </div>
+
+</div>
+
+<!-- JavaScript Includes -->
+<script src="../vendor/jquery.min.js"></script>
+<script src="../../transition.js"></script>
+<script src="../../affix.js"></script>
+
+
+<!-- JavaScript Test -->
+<script>
+$(function () {
+  $('.js-affixed-element-top').affix({
+    offset: {
+      top: $('.js-page-header').outerHeight(true) - 10
+    , bottom: $('.js-footer').outerHeight(true) + 10
+    }
+  })
+  // todo(fat): sux you have to do this.
+  .on('affix.bs.affix', function (e) {
+    $(e.target).width(e.target.offsetWidth)
+  })
+
+  $('.js-affixed-element-bottom').affix({
+    offset: {
+      bottom: $('.js-footer').outerHeight(true) + 10
+    }
+  })
+
+  $('.js-grow-btn').on('click', function() {
+    $('.js-content').append('<p>Ipsum corrupti ipsam est temporibus.</p>')
+  })
+  $('.js-shrink-btn').on('click', function() {
+    $('.js-content p').last().remove()
+  })
+})
+</script>
+</body>
+</html>
diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
index 978f9ac20..0070315a2 100644
--- a/js/tests/visual/alert.html
+++ b/js/tests/visual/alert.html
@@ -6,6 +6,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Alert</title>
   <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[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]-->
 </head>
 <body>
 
@@ -34,7 +41,7 @@
 
 <!-- JavaScript Includes -->
 <script src="../vendor/jquery.min.js"></script>
-<script src="../../util.js"></script>
+<script src="../../transition.js"></script>
 <script src="../../alert.js"></script>
 
 </body>
diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html
index c3be92141..d92a08329 100644
--- a/js/tests/visual/button.html
+++ b/js/tests/visual/button.html
@@ -6,6 +6,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Button</title>
   <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[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]-->
 </head>
 <body>
 
@@ -15,6 +22,10 @@
     <h1>Button <small>Bootstrap Visual Test</small></h1>
   </div>
 
+  <button type="button" data-loading-text="Loading for 3 seconds..." class="btn btn-primary js-loading-button">
+    Loading state
+  </button>
+
   <button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
 
   <div class="btn-group" data-toggle="buttons">
@@ -45,7 +56,7 @@
 
 <!-- JavaScript Includes -->
 <script src="../vendor/jquery.min.js"></script>
-<script src="../../util.js"></script>
+<script src="../../transition.js"></script>
 <script src="../../button.js"></script>
 
 <!-- JavaScript Test -->
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index 45424a5d1..8dede0921 100644
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -6,6 +6,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Carousel</title>
   <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[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]-->
 </head>
 <body>
 
@@ -22,13 +29,13 @@
       <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
     </ol>
     <div class="carousel-inner">
-      <div class="carousel-item active">
+      <div class="item active">
         <img alt="First slide" src="http://37.media.tumblr.com/tumblr_m8tay0JcfG1qa42jro1_1280.jpg">
       </div>
-      <div class="carousel-item">
+      <div class="item">
         <img alt="Second slide" src="http://37.media.tumblr.com/tumblr_m8tazfiVYJ1qa42jro1_1280.jpg">
       </div>
-      <div class="carousel-item">
+      <div class="item">
         <img alt="Third slide" src="http://38.media.tumblr.com/tumblr_m8tb2rVsD31qa42jro1_1280.jpg">
       </div>
     </div>
@@ -44,7 +51,7 @@
 
 <!-- JavaScript Includes -->
 <script src="../vendor/jquery.min.js"></script>
-<script src="../../util.js"></script>
+<script src="../../transition.js"></script>
 <script src="../../carousel.js"></script>
 
 </body>
diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
index 42ac0aaa2..3b8a42e3d 100644
--- a/js/tests/visual/collapse.html
+++ b/js/tests/visual/collapse.html
@@ -6,6 +6,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Collapse</title>
   <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[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]-->
 </head>
 <body>
 
@@ -64,7 +71,7 @@
 
 <!-- JavaScript Includes -->
 <script src="../vendor/jquery.min.js"></script>
-<script src="../../util.js"></script>
+<script src="../../transition.js"></script>
 <script src="../../collapse.js"></script>
 
 </body>
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index 6cf18df8e..02090b6cc 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -6,6 +6,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Dropdown</title>
   <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[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]-->
 </head>
 <body>
 
@@ -93,7 +100,7 @@
 
 <!-- JavaScript Includes -->
 <script src="../vendor/jquery.min.js"></script>
-<script src="../../util.js"></script>
+<script src="../../transition.js"></script>
 <script src="../../dropdown.js"></script>
 <script src="../../collapse.js"></script>
 
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 0d6e50ea2..4342f0ce4 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -6,16 +6,55 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Modal</title>
   <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[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]-->
+
+  <style>
+    #tall {
+      height: 1500px;
+      width: 100px;
+      background-color: black;
+      color: white;
+    }
+  </style>
 </head>
 <body>
 
+<nav class="navbar navbar-default navbar-static-top">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="#">navbar-static-top</a>
+    </div>
+    <div id="navbar" class="navbar-collapse collapse">
+      <ul class="nav navbar-nav">
+        <li><a href="#about">About</a></li>
+        <li><a href="#contact">Contact</a></li>
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li><a href="#">This should not jump to the left when the modal is shown.</a></li>
+      </ul>
+    </div><!--/.nav-collapse -->
+  </div>
+</nav>
+
 <div class="container">
 
   <div class="page-header">
     <h1>Modal <small>Bootstrap Visual Test</small></h1>
   </div>
 
-  <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+  <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog">
       <div class="modal-content">
 
@@ -28,10 +67,43 @@
           <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
 
           <h4>Popover in a modal</h4>
-          <p>This <a href="#" role="button" class="btn btn-default js-popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p>
+          <p>This <a href="#" role="button" class="btn btn-default js-popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" data-placement="left">button</a> should trigger a popover on click.</p>
 
           <h4>Tooltips in a modal</h4>
-          <p><a href="#" class="js-tooltip" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="js-tooltip" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>
+          <p><a href="#" class="js-tooltip" title="Tooltip">This link</a> and <a href="#" class="js-tooltip" title="Tooltip">that link</a> should have tooltips on hover.</p>
+
+          <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+            <div class="panel panel-default">
+              <div class="panel-heading" role="tab" id="headingOne">
+                <h4 class="panel-title">
+                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                    Collapsible Group Item #1
+                  </a>
+                </h4>
+              </div>
+              <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+                <div class="panel-body">
+                  Lorem ipsum
+                </div>
+              </div>
+            </div>
+            <div class="panel panel-default">
+              <div class="panel-heading" role="tab" id="headingTwo">
+                <h4 class="panel-title">
+                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                    Collapsible Group Item #2
+                  </a>
+                </h4>
+              </div>
+              <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
+                <div class="panel-body">
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+                </div>
+              </div>
+            </div>
+          </div>
 
           <hr>
 
@@ -59,20 +131,30 @@
     Launch demo modal
   </button>
 
+  <button id="tall-toggle" class="btn btn-default">Toggle tall &lt;body&gt; content</button>
+  <br><br>
+  <div id="tall" style="display: none;">
+    Tall body content to force the page to have a scrollbar.
+  </div>
+
 </div>
 
 <!-- JavaScript Includes -->
 <script src="../vendor/jquery.min.js"></script>
-<script src="../../util.js"></script>
+<script src="../../transition.js"></script>
 <script src="../../modal.js"></script>
 <script src="../../tooltip.js"></script>
 <script src="../../popover.js"></script>
+<script src="../../collapse.js"></script>
 
 <!-- JavaScript Test -->
 <script>
 $(function () {
   $('.js-popover').popover()
   $('.js-tooltip').tooltip()
+  $('#tall-toggle').click(function () {
+    $('#tall').toggle()
+  })
 })
 </script>
 
diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html
index 7446a6741..0e84f5cee 100644
--- a/js/tests/visual/popover.html
+++ b/js/tests/visual/popover.html
@@ -6,6 +6,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Popover</title>
   <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[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]-->
 </head>
 <body>
 
@@ -32,7 +39,7 @@
 
 <!-- JavaScript Includes -->
 <script src="../vendor/jquery.min.js"></script>
-<script src="../../util.js"></script>
+<script src="../../transition.js"></script>
 <script src="../../tooltip.js"></script>
 <script src="../../popover.js"></script>
 
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index 13bc4383c..5952b7e59 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -10,6 +10,13 @@
   <style>
     body { padding-top: 70px; }
   </style>
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[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]-->
 </head>
 <body data-spy="scroll" data-target=".navbar" data-offset="70">
 
@@ -93,7 +100,7 @@
 
 <!-- JavaScript Includes -->
 <script src="../vendor/jquery.min.js"></script>
-<script src="../../util.js"></script>
+<script src="../../transition.js"></script>
 <script src="../../scrollspy.js"></script>
 <script src="../../dropdown.js"></script>
 <script src="../../collapse.js"></script>
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index 2480ce08c..a3fed1e9f 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -16,6 +16,13 @@
       margin-bottom: 15px;
     }
   </style>
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[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]-->
 </head>
 <body>
 
@@ -157,7 +164,7 @@
 
 <!-- JavaScript Includes -->
 <script src="../vendor/jquery.min.js"></script>
-<script src="../../util.js"></script>
+<script src="../../transition.js"></script>
 <script src="../../tab.js"></script>
 <script src="../../dropdown.js"></script>
 
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index c61b088d0..8d10871c9 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -6,6 +6,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Tooltip</title>
   <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+  <!--[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]-->
 </head>
 <body>
 
@@ -29,7 +36,7 @@
 
 <!-- JavaScript Includes -->
 <script src="../vendor/jquery.min.js"></script>
-<script src="../../util.js"></script>
+<script src="../../transition.js"></script>
 <script src="../../tooltip.js"></script>
 
 <!-- JavaScript Test -->
author	fat <[email protected]>	2015-05-06 13:34:14 -0700
committer	fat <[email protected]>	2015-05-06 13:34:14 -0700
commit	d1fbe200f46002431cdeebf965c4b789ef7ed267 (patch)
tree	43a7cc7667492e519b906f8a428935da2972ac14 /js/tests
parent	09fb80568a52af6c440db971cdc6fd88eab8f8b5 (diff)
download	bootstrap-d1fbe200f46002431cdeebf965c4b789ef7ed267.tar.xz bootstrap-d1fbe200f46002431cdeebf965c4b789ef7ed267.zip