Merge branch 'v4' of https://github.com/twbs/derpstrap into v4

4 files changed, 73 insertions, 75 deletions

diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js
index 063dfabcf..574422ef1 100644
--- a/js/tests/unit/scrollspy.js
+++ b/js/tests/unit/scrollspy.js
@@ -129,9 +129,9 @@ $(function () {
     var sectionHTML = '<div id="header" style="height: 500px;"></div>'
         + '<nav id="navigation" class="navbar">'
         + '<ul class="nav navbar-nav">'
-        + '<li class="active"><a id="one-link" href="#one">One</a></li>'
-        + '<li><a id="two-link" href="#two">Two</a></li>'
-        + '<li><a id="three-link" href="#three">Three</a></li>'
+        + '<li class="active"><a class="nav-link" id="one-link" href="#one">One</a></li>'
+        + '<li><a class="nav-link" id="two-link" href="#two">Two</a></li>'
+        + '<li><a class="nav-link" id="three-link" href="#three">Three</a></li>'
         + '</ul>'
         + '</nav>'
         + '<div id="content" style="height: 200px; overflow-y: auto;">'
@@ -147,9 +147,9 @@ $(function () {
     $scrollspy.bootstrapScrollspy({ target: '#navigation', offset: $scrollspy.position().top })
 
     $scrollspy.on('scroll.bs.scrollspy', function () {
-      assert.ok(!$section.find('#one-link').parent().hasClass('active'), '"active" class removed from first section')
-      assert.ok($section.find('#two-link').parent().hasClass('active'), '"active" class on middle section')
-      assert.ok(!$section.find('#three-link').parent().hasClass('active'), '"active" class not on last section')
+      assert.ok(!$section.find('#one-link').hasClass('active'), '"active" class removed from first section')
+      assert.ok($section.find('#two-link').hasClass('active'), '"active" class on middle section')
+      assert.ok(!$section.find('#three-link').hasClass('active'), '"active" class not on last section')
       done()
     })
 
@@ -161,8 +161,8 @@ $(function () {
     var navbarHtml =
         '<nav class="navbar">'
       + '<ul class="nav">'
-      + '<li id="li-1"><a href="#div-1">div 1</a></li>'
-      + '<li id="li-2"><a href="#div-2">div 2</a></li>'
+      + '<li><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>'
+      + '<li><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>'
       + '</ul>'
       + '</nav>'
     var contentHtml =
@@ -189,8 +189,8 @@ $(function () {
       return deferred.promise()
     }
 
-    $.when(testElementIsActiveAfterScroll('#li-1', '#div-1'))
-      .then(function () { return testElementIsActiveAfterScroll('#li-2', '#div-2') })
+    $.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
+      .then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') })
   })
 
   QUnit.test('should add the active class correctly when there are nested elements at 0 scroll offset', function (assert) {
@@ -199,9 +199,9 @@ $(function () {
     var done = assert.async()
     var navbarHtml = '<nav id="navigation" class="navbar">'
       + '<ul class="nav">'
-      + '<li id="li-1"><a href="#div-1">div 1</a>'
+      + '<li><a id="a-1" class="nav-link" href="#div-1">div 1</a>'
       + '<ul>'
-      + '<li id="li-2"><a href="#div-2">div 2</a></li>'
+      + '<li><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>'
       + '</ul>'
       + '</li>'
       + '</ul>'
@@ -223,8 +223,8 @@ $(function () {
       if (++times > 3) return done()
 
       $content.one('scroll', function () {
-        assert.ok($('#li-1').hasClass('active'), 'nav item for outer element has "active" class')
-        assert.ok($('#li-2').hasClass('active'), 'nav item for inner element has "active" class')
+        assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
+        assert.ok($('#a-2').hasClass('active'), 'nav item for inner element has "active" class')
         testActiveElements()
       })
 
@@ -239,9 +239,9 @@ $(function () {
     var sectionHTML = '<div id="header" style="height: 500px;"></div>'
         + '<nav id="navigation" class="navbar">'
         + '<ul class="nav navbar-nav">'
-        + '<li class="active"><a id="one-link" href="#one">One</a></li>'
-        + '<li><a id="two-link" href="#two">Two</a></li>'
-        + '<li><a id="three-link" href="#three">Three</a></li>'
+        + '<li><a id="one-link"   class="nav-link active" href="#one">One</a></li>'
+        + '<li><a id="two-link"   class="nav-link" href="#two">Two</a></li>'
+        + '<li><a id="three-link" class="nav-link" href="#three">Three</a></li>'
         + '</ul>'
         + '</nav>'
     $(sectionHTML).appendTo('#qunit-fixture')
@@ -262,8 +262,7 @@ $(function () {
       })
       .one('scroll.bs.scrollspy', function () {
         assert.strictEqual($('.active').length, 1, '"active" class on only one element present')
-        assert.strictEqual($('.active').has('#two-link').length, 1, '"active" class on second section')
-
+        assert.strictEqual($('.active').is('#two-link'), true, '"active" class on second section')
         $scrollspy
           .one('scroll.bs.scrollspy', function () {
             assert.strictEqual($('.active').length, 0, 'selection cleared')
@@ -279,11 +278,11 @@ $(function () {
     var navbarHtml =
         '<nav class="navbar">'
       + '<ul class="nav">'
-      + '<li id="li-100-1"><a href="#div-100-1">div 1</a></li>'
-      + '<li id="li-100-2"><a href="#div-100-2">div 2</a></li>'
-      + '<li id="li-100-3"><a href="#div-100-3">div 3</a></li>'
-      + '<li id="li-100-4"><a href="#div-100-4">div 4</a></li>'
-      + '<li id="li-100-5"><a href="#div-100-5">div 5</a></li>'
+      + '<li><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>'
+      + '<li><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>'
+      + '<li><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>'
+      + '<li><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>'
+      + '<li><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>'
       + '</ul>'
       + '</nav>'
     var contentHtml =
@@ -328,9 +327,9 @@ $(function () {
       var navbarHtml =
           '<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>'
         + '<ul class="nav">'
-        + '<li id="li-' + type + 'm-1"><a href="#div-' + type + 'm-1">div 1</a></li>'
-        + '<li id="li-' + type + 'm-2"><a href="#div-' + type + 'm-2">div 2</a></li>'
-        + '<li id="li-' + type + 'm-3"><a href="#div-' + type + 'm-3">div 3</a></li>'
+        + '<li><a id="li-' + type + 'm-1" class="nav-link" href="#div-' + type + 'm-1">div 1</a></li>'
+        + '<li><a id="li-' + type + 'm-2" class="nav-link" href="#div-' + type + 'm-2">div 2</a></li>'
+        + '<li><a id="li-' + type + 'm-3" class="nav-link" href="#div-' + type + 'm-3">div 3</a></li>'
         + '</ul>'
         + '</nav>'
       var contentHtml =
@@ -371,9 +370,9 @@ $(function () {
       var navbarHtml =
           '<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>'
         + '<ul class="nav">'
-        + '<li id="li-' + type + 'm-1"><a href="#div-' + type + 'm-1">div 1</a></li>'
-        + '<li id="li-' + type + 'm-2"><a href="#div-' + type + 'm-2">div 2</a></li>'
-        + '<li id="li-' + type + 'm-3"><a href="#div-' + type + 'm-3">div 3</a></li>'
+        + '<li><a class="nav-link" id="li-' + type + 'm-1" href="#div-' + type + 'm-1">div 1</a></li>'
+        + '<li><a class="nav-link" id="li-' + type + 'm-2" href="#div-' + type + 'm-2">div 2</a></li>'
+        + '<li><a class="nav-link" id="li-' + type + 'm-3" href="#div-' + type + 'm-3">div 3</a></li>'
         + '</ul>'
         + '</nav>'
       var contentHtml =
diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 85d9f67a2..1eed75e90 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -191,26 +191,26 @@ $(function () {
   QUnit.test('selected tab should have aria-expanded', function (assert) {
     assert.expect(8)
     var tabsHTML = '<ul class="nav nav-tabs">'
-        + '<li class="active"><a href="#home" toggle="tab" aria-expanded="true">Home</a></li>'
-        + '<li><a href="#profile" toggle="tab" aria-expanded="false">Profile</a></li>'
+        + '<li><a class="nav-item active" href="#home" toggle="tab" aria-expanded="true">Home</a></li>'
+        + '<li><a class="nav-item" href="#profile" toggle="tab" aria-expanded="false">Profile</a></li>'
         + '</ul>'
     var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
 
     $tabs.find('li:first a').bootstrapTab('show')
-    assert.strictEqual($tabs.find('.active a').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true')
-    assert.strictEqual($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
+    assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true')
+    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
 
     $tabs.find('li:last a').trigger('click')
-    assert.strictEqual($tabs.find('.active a').attr('aria-expanded'), 'true', 'after click, shown tab has aria-expanded = true')
-    assert.strictEqual($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'after click, hidden tab has aria-expanded = false')
+    assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'after click, shown tab has aria-expanded = true')
+    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'after click, hidden tab has aria-expanded = false')
 
     $tabs.find('li:first a').bootstrapTab('show')
-    assert.strictEqual($tabs.find('.active a').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true')
-    assert.strictEqual($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
+    assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'shown tab has aria-expanded = true')
+    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'hidden tab has aria-expanded = false')
 
     $tabs.find('li:first a').trigger('click')
-    assert.strictEqual($tabs.find('.active a').attr('aria-expanded'), 'true', 'after second show event, shown tab still has aria-expanded = true')
-    assert.strictEqual($tabs.find('li:not(.active) a').attr('aria-expanded'), 'false', 'after second show event, hidden tab has aria-expanded = false')
+    assert.strictEqual($tabs.find('.active').attr('aria-expanded'), 'true', 'after second show event, shown tab still has aria-expanded = true')
+    assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'after second show event, hidden tab has aria-expanded = false')
   })
 
 })
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index 332d5b6b9..e8ae05108 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -22,26 +22,25 @@
 
 <div class="container">
 
-  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-    <div class="container-fluid">
-      <div class="js-navbar-scrollspy">
-        <ul class="nav navbar-nav">
-          <li class="nav-item active"><a class="nav-link" href="#fat">@fat</a></li>
-          <li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li>
-          <li class="dropdown nav-item">
-            <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-            <ul class="dropdown-menu" role="menu">
-              <li class=""><a href="#one" tabindex="-1">one</a></li>
-              <li><a href="#two" tabindex="-1">two</a></li>
-              <li role="separator" class="divider"></li>
-              <li><a href="#three" tabindex="-1">three</a></li>
-            </ul>
-          </li>
-        </ul>
-      </div>
+  <nav class="navbar navbar-dark navbar-fixed-top bg-inverse" role="navigation">
+    <div class="js-navbar-scrollspy">
+      <ul class="nav navbar-nav">
+        <li class="nav-item"><a class="nav-link active" href="#fat">@fat</a></li>
+        <li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li>
+        <li class="dropdown nav-item">
+          <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown</a>
+          <div class="dropdown-menu" role="menu">
+            <a class="dropdown-item" href="#one" tabindex="-1">one</a>
+            <a class="dropdown-item" href="#two" tabindex="-1">two</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="#three" tabindex="-1">three</a>
+          </div>
+        </li>
+      </ul>
     </div>
   </nav>
 
+
   <h2 id="fat">@fat</h2>
   <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
   <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index ff6685fed..22a918ed7 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -35,14 +35,14 @@
   <h4>Tabs without fade</h4>
 
   <ul id="myTab" class="nav nav-tabs">
-    <li class="active nav-item"><a href="#home" class="nav-link" data-toggle="tab">Home</a></li>
+    <li class="nav-item"><a href="#home" class="nav-link active" data-toggle="tab">Home</a></li>
     <li class="nav-item"><a href="#profile" data-toggle="tab" class="nav-link">Profile</a></li>
     <li class="dropdown nav-item">
       <a href="#" id="myTabDrop1" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
-        <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
-      </ul>
+      <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
+        <a class="dropdown-item" href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a>
+        <a class="dropdown-item" href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a>
+      </div>
     </li>
   </ul>
   <div id="myTabContent" class="tab-content">
@@ -67,14 +67,14 @@
   <h4>Tabs with fade</h4>
 
   <ul id="myTab1" class="nav nav-tabs">
-    <li class="active nav-item"><a class="nav-link" href="#home1" data-toggle="tab">Home</a></li>
+    <li class="nav-item"><a class="nav-link active" href="#home1" data-toggle="tab">Home</a></li>
     <li class="nav-item"><a class="nav-link" href="#profile1" data-toggle="tab">Profile</a></li>
     <li class="dropdown nav-item">
       <a href="#" id="myTabDrop2" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop2">
-        <li><a href="#dropdown1-1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown1-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
-      </ul>
+      <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop2">
+        <a class="dropdown-item" href="#dropdown1-1" tabindex="-1" data-toggle="tab">@fat</a>
+        <a class="dropdown-item" href="#dropdown1-2" tabindex="-1" data-toggle="tab">@mdo</a>
+      </div>
     </li>
   </ul>
   <div id="myTabContent1" class="tab-content">
@@ -103,10 +103,10 @@
     <li class="nav-item"><a class="nav-link" href="#profile2" data-toggle="tab">Profile</a></li>
     <li class="dropdown nav-item">
       <a href="#" id="myTabDrop3" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop3">
-        <li><a href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
-      </ul>
+      <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop3">
+        <a class="dropdown-item" href="#dropdown2-1" tabindex="-1" data-toggle="tab">@fat</a>
+        <a class="dropdown-item" href="#dropdown2-2" tabindex="-1" data-toggle="tab">@mdo</a>
+      </div>
     </li>
   </ul>
   <div id="myTabContent2" class="tab-content">
@@ -135,10 +135,10 @@
     <li class="nav-item"><a class="nav-link" href="#profile3" data-toggle="tab">Profile</a></li>
     <li class="dropdown nav-item">
       <a href="#" id="myTabDrop4" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop4">
-        <li><a href="#dropdown3-1" tabindex="-1" data-toggle="tab">@fat</a></li>
-        <li><a href="#dropdown3-2" tabindex="-1" data-toggle="tab">@mdo</a></li>
-      </ul>
+      <div class="dropdown-menu" role="menu" aria-labelledby="myTabDrop4">
+        <a class="dropdown-item" href="#dropdown3-1" tabindex="-1" data-toggle="tab">@fat</a>
+        <a class="dropdown-item" href="#dropdown3-2" tabindex="-1" data-toggle="tab">@mdo</a>
+      </div>
     </li>
   </ul>
   <div id="myTabContent3" class="tab-content">