Update visual tests.

b9e7cef9 · Bardi Harborow · 93ba9ac6 · b9e7cef9 · b9e7cef9 · b9e7cef9
Commit b9e7cef9 authored 8 years ago by Bardi Harborow
Expand all Hide whitespace changes
Inline Side-by-side

Showing

with 760 additions and 790 deletions
+760 -790
--- a/js/tests/visual/alert.html
+++ b/js/tests/visual/alert.html
 <!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>Alert</title>
-  <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
-</head>
-<body>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+    <title>Alert</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Alert <small>Bootstrap Visual Test</small></h1>

-<div class="container">
+      <div class="alert alert-warning alert-dismissible fade active" role="alert">
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
+      </div>

-  <h1>Alert <small>Bootstrap Visual Test</small></h1>
+      <div class="alert alert-danger alert-dismissible fade active" role="alert">
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <p>
+          <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
+        </p>
+        <p>
+          <button type="button" class="btn btn-danger">Danger</button>
+          <button type="button" class="btn btn-secondary">Secondary</button>
+        </p>
+      </div>

-  <div class="alert alert-warning fade active">
-    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-    <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
-  </div>
+      <div class="alert alert-danger alert-dismissible fade active" role="alert">
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <p>
+          <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
+        </p>
+        <p>
+          <button type="button" class="btn btn-danger">Take this action</button>
+          <button type="button" class="btn btn-primary">Or do this</button>
+        </p>
+      </div>
+    </div>

-  <div class="alert alert-danger fade active">
-    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-    <h4>Oh snap! You got an error!</h4>
-    <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
-    <p>
-      <button type="button" class="btn btn-danger">Take this action</button>
-      <button type="button" class="btn btn-default">Or do this</button>
-    </p>
-  </div>
-
-</div>
-
-<!-- JavaScript Includes -->
-<script src="../vendor/jquery.min.js"></script>
-<script src="../../dist/util.js"></script>
-<script src="../../dist/alert.js"></script>
-
-</body>
+    <script src="../vendor/jquery.min.js"></script>
+    <script src="../../dist/util.js"></script>
+    <script src="../../dist/alert.js"></script>
+  </body>
 </html>
--- a/js/tests/visual/button.html
+++ b/js/tests/visual/button.html
 <!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>Button</title>
-  <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
-</head>
-<body>
-
-<div class="container">
-
-  <h1>Button <small>Bootstrap Visual Test</small></h1>
-
-  <button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
-
-  <p>For checkboxes and radio buttons, ensure that keyboard behavior is functioning correctly.</p>
-  <p>Navigate to the checkboxes with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>), and ensure that <kbd>SPACE</kbd> toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that <kbd>SPACE</kbd> toggles the checkbox again.</p>
-
-  <div class="btn-group" data-toggle="buttons">
-    <label class="btn btn-primary">
-      <input type="checkbox"> checkbox 1
-    </label>
-    <label class="btn btn-primary">
-      <input type="checkbox"> checkbox 2
-    </label>
-    <label class="btn btn-primary">
-      <input type="checkbox"> checkbox 3
-    </label>
-  </div>
-
-  <p>Navigate to the radio button group with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated "forward" to the group with <kbd>TAB</kbd> or "backwards" using <kbd>SHIFT + TAB</kbd>). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time.  Ensure that the selected radio button can be changed by using the <kbd>←</kbd> and <kbd>→</kbd> arrow keys. Click on one of the radio buttons with the mouse,  ensure that focus was correctly set on the actual radio button, and that <kbd>←</kbd> and <kbd>→</kbd> change the selected radio button again.</p>
-
-  <div class="btn-group" data-toggle="buttons">
-    <label class="btn btn-primary">
-      <input type="radio" name="options" id="option1"> Radio 1
-    </label>
-    <label class="btn btn-primary">
-      <input type="radio" name="options" id="option2"> Radio 2
-    </label>
-    <label class="btn btn-primary">
-      <input type="radio" name="options" id="option3"> Radio 3
-    </label>
-  </div>
-
-</div>
-
-<!-- JavaScript Includes -->
-<script src="../vendor/jquery.min.js"></script>
-<script src="../../dist/util.js"></script>
-<script src="../../dist/button.js"></script>
-
-<!-- JavaScript Test -->
-<script>
-$(function () {
-  $('.js-loading-button').on('click', function () {
-    var btn = $(this).button('loading')
-    setTimeout(function (){
-      btn.button('reset')
-    }, 3000)
-  })
-})
-</script>
-</body>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+    <title>Button</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Button <small>Bootstrap Visual Test</small></h1>
+
+      <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
+        Single toggle
+      </button>
+
+      <p>For checkboxes and radio buttons, ensure that keyboard behavior is functioning correctly.</p>
+      <p>Navigate to the checkboxes with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>), and ensure that <kbd>SPACE</kbd> toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that <kbd>SPACE</kbd> toggles the checkbox again.</p>
+
+      <div class="btn-group" data-toggle="buttons">
+        <label class="btn btn-primary active">
+          <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
+        </label>
+        <label class="btn btn-primary">
+          <input type="checkbox" autocomplete="off"> Checkbox 2
+        </label>
+        <label class="btn btn-primary">
+          <input type="checkbox" autocomplete="off"> Checkbox 3
+        </label>
+      </div>
+
+      <p>Navigate to the radio button group with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated "forward" to the group with <kbd>TAB</kbd> or "backwards" using <kbd>SHIFT + TAB</kbd>). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time.  Ensure that the selected radio button can be changed by using the <kbd>←</kbd> and <kbd>→</kbd> arrow keys. Click on one of the radio buttons with the mouse,  ensure that focus was correctly set on the actual radio button, and that <kbd>←</kbd> and <kbd>→</kbd> change the selected radio button again.</p>
+
+      <div class="btn-group" data-toggle="buttons">
+        <label class="btn btn-primary active">
+          <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
+        </label>
+        <label class="btn btn-primary">
+          <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
+        </label>
+        <label class="btn btn-primary">
+          <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
+        </label>
+      </div>
+    </div>
+
+    <script src="../vendor/jquery.min.js"></script>
+    <script src="../../dist/util.js"></script>
+    <script src="../../dist/button.js"></script>
+  </body>
 </html>
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
 <!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>Carousel</title>
-  <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
-</head>
-<body>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+    <title>Carousel</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Carousel <small>Bootstrap Visual Test</small></h1>

-<div class="container">
+      <p>Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p>

-  <h1>Carousel <small>Bootstrap Visual Test</small></h1>
-  <p>Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p>
-  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
-    <ol class="carousel-indicators">
-      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
-      <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
-      <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
-    </ol>
-    <div class="carousel-inner">
-      <div class="carousel-item active">
-        <img alt="First slide" src="https://37.media.tumblr.com/tumblr_m8tay0JcfG1qa42jro1_1280.jpg">
-      </div>
-      <div class="carousel-item">
-        <img alt="Second slide" src="https://37.media.tumblr.com/tumblr_m8tazfiVYJ1qa42jro1_1280.jpg">
-      </div>
-      <div class="carousel-item">
-        <img alt="Third slide" src="https://38.media.tumblr.com/tumblr_m8tb2rVsD31qa42jro1_1280.jpg">
+      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
+        <ol class="carousel-indicators">
+          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
+          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
+          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
+        </ol>
+        <div class="carousel-inner" role="listbox">
+          <div class="carousel-item active">
+            <img src="https://37.media.tumblr.com/tumblr_m8tay0JcfG1qa42jro1_1280.jpg" alt="First slide">
+          </div>
+          <div class="carousel-item">
+            <img src="https://37.media.tumblr.com/tumblr_m8tazfiVYJ1qa42jro1_1280.jpg" alt="Second slide">
+          </div>
+          <div class="carousel-item">
+            <img src="https://38.media.tumblr.com/tumblr_m8tb2rVsD31qa42jro1_1280.jpg" alt="Third slide">
+          </div>
+        </div>
+        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
+          <span class="icon-prev" aria-hidden="true"></span>
+          <span class="sr-only">Previous</span>
+        </a>
+        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
+          <span class="icon-next" aria-hidden="true"></span>
+          <span class="sr-only">Next</span>
+        </a>
      </div>
    </div>
-    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
-      <span class="glyphicon glyphicon-chevron-left"></span>
-    </a>
-    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
-      <span class="glyphicon glyphicon-chevron-right"></span>
-    </a>
-  </div>
-
-</div>

-<!-- JavaScript Includes -->
-<script src="../vendor/jquery.min.js"></script>
-<script src="../../dist/util.js"></script>
-<script src="../../dist/carousel.js"></script>
-<script>
-  $(function () {
-    // Test to show that the carousel doesn't slide when the current tab isn't visible
-    $('#carousel-example-generic').on('slid.bs.carousel', function (event) {
-      console.log('slid at ', event.timeStamp);
-    })
-  });
-</script>
+    <script src="../vendor/jquery.min.js"></script>
+    <script src="../../dist/util.js"></script>
+    <script src="../../dist/carousel.js"></script>

-</body>
+    <script>
+      $(function() {
+        // Test to show that the carousel doesn't slide when the current tab isn't visible
+        $('#carousel-example-generic').on('slid.bs.carousel', function(event) {
+          console.log('slid at ', event.timeStamp)
+        })
+      })
+    </script>
+  </body>
 </html>
--- a/js/tests/visual/collapse.html
+++ b/js/tests/visual/collapse.html
 <!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>Collapse</title>
-  <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
-</head>
-<body>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+    <title>Collapse</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Collapse <small>Bootstrap Visual Test</small></h1>

-<div class="container">
-
-  <h1>Collapse <small>Bootstrap Visual Test</small></h1>
+      <div id="accordion" role="tablist" aria-multiselectable="true">
+        <div class="card">
+          <div class="card-header" role="tab" id="headingOne">
+            <h5 class="mb-0">
+              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                Collapsible Group Item #1
+              </a>
+            </h5>
+          </div>

-  <div id="accordion">
-    <div class="card">
-      <div class="card-header">
-        <h5 class="mb-0">
-          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
-            Collapsible Group Item #1
-          </a>
-        </h5>
-      </div>
-      <div id="collapseOne" class="collapse active">
-          <div class="card-block">
-            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 id="collapseOne" class="collapse active" role="tabpanel" aria-labelledby="headingOne">
+            <div class="card-block">
+              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>
-    <div class="card">
-      <div class="card-header">
-        <h5 class="mb-0">
-          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
-            Collapsible Group Item #2
-          </a>
-        </h5>
-      </div>
-      <div id="collapseTwo" class="collapse">
-          <div class="card-block">
-            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 class="card">
+          <div class="card-header" role="tab" id="headingTwo">
+            <h5 class="mb-0">
+              <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                Collapsible Group Item #2
+              </a>
+            </h5>
          </div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-header">
-        <h5 class="mb-0">
-          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
-            Collapsible Group Item #3
-          </a>
-        </h5>
-      </div>
-      <div id="collapseThree" class="collapse">
-          <div class="card-block">
-            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 id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
+            <div class="card-block">
+              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 class="card">
+          <div class="card-header" role="tab" id="headingThree">
+            <h5 class="mb-0">
+              <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                Collapsible Group Item #3
+              </a>
+            </h5>
          </div>
+          <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
+            <div class="card-block">
+              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>
    </div>
-  </div>
-
-</div>
-
-<!-- JavaScript Includes -->
-<script src="../vendor/jquery.min.js"></script>
-<script src="../../dist/util.js"></script>
-<script src="../../dist/collapse.js"></script>

-</body>
+    <script src="../vendor/jquery.min.js"></script>
+    <script src="../../dist/util.js"></script>
+    <script src="../../dist/collapse.js"></script>
+  </body>
 </html>
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
 <!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>Dropdown</title>
-  <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
-</head>
-<body>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+    <title>Dropdown</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Dropdown <small>Bootstrap Visual Test</small></h1>

-<div class="container">
+      <nav class="navbar navbar-light bg-faded">
+        <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
+        <div class="collapse navbar-toggleable-md" id="navbarResponsive">
+          <a class="navbar-brand" href="#">Navbar</a>
+          <ul class="nav navbar-nav">
+            <li class="nav-item active">
+              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+              <div class="dropdown-menu" aria-labelledby="dropdown">
+                <a class="dropdown-item" href="#">Action</a>
+                <a class="dropdown-item" href="#">Another action</a>
+                <a class="dropdown-item" href="#">Something else here</a>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </nav>

-  <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
-
-  <nav id="navbar-example" class="navbar navbar-light bg-faded">
-    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
-      &#9776;
-    </button>
-
-    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
-
-      <ul class="nav navbar-nav float-xs-left">
-
-        <li class="dropdown nav-item">
-          <a id="drop1" href="#" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Dropdown
-          </a>
-          <div class="dropdown-menu" aria-labelledby="drop1">
-            <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
-            <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
-            <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
-            <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
-          </div>
+      <ul class="nav nav-pills mt-3">
+        <li class="nav-item">
+          <a class="nav-link active" href="#">Active</a>
        </li>
-
-        <li class="dropdown nav-item">
-          <a href="#" id="drop2" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Dropdown 2
-          </a>
-          <div class="dropdown-menu" aria-labelledby="drop2">
-            <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
-            <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
-            <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
-            <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
-          </div>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Link</a>
        </li>
-
-      </ul>
-
-      <ul class="nav navbar-nav float-xs-right">
-        <li id="fat-menu" class="dropdown nav-item">
-          <a href="#" id="drop3" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Dropdown 3
-          </a>
-          <div class="dropdown-menu" aria-labelledby="drop3">
-            <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
-            <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
-            <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
-            <div class="dropdown-divider"></div>
-            <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
+        <li class="nav-item">
+          <a class="nav-link" href="#">Link</a>
+        </li>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+          <div class="dropdown-menu" aria-labelledby="dropdown2">
+            <a class="dropdown-item" href="#">Action</a>
+            <a class="dropdown-item" href="#">Another action</a>
+            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </div>
-  </nav>
-
-  <ul class="nav nav-pills mt-3">
-    <li class="active nav-item"><a href="#" class="nav-link">Regular link</a></li>
-    <li class="dropdown nav-item">
-      <a id="drop4" class="nav-link" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
-        Dropdown
-      </a>
-      <div id="menu1" class="dropdown-menu" aria-labelledby="drop4">
-        <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
-        <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
-        <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
-        <div class="dropdown-divider"></div>
-        <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
-      </div>
-    </li>
-    <li class="dropdown nav-item">
-      <a id="drop5" class="nav-link" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
-        Dropdown 2
-      </a>
-      <div id="menu2" class="dropdown-menu" aria-labelledby="drop5">
-        <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
-        <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
-        <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
-        <div class="dropdown-divider"></div>
-        <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
-      </div>
-    </li>
-  </ul>
-
-</div>
-
-<!-- JavaScript Includes -->
-<script src="../vendor/jquery.min.js"></script>
-<script src="../../dist/util.js"></script>
-<script src="../../dist/dropdown.js"></script>
-<script src="../../dist/collapse.js"></script>

-</body>
+    <script src="../vendor/jquery.min.js"></script>
+    <script src="../../dist/util.js"></script>
+    <script src="../../dist/dropdown.js"></script>
+    <script src="../../dist/collapse.js"></script>
+  </body>
 </html>
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
--- a/js/tests/visual/popover.html
+++ b/js/tests/visual/popover.html
 <!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>Popover</title>
-  <link rel="stylesheet" href="../../../dist/css/bootstrap.css">
-</head>
-<body>
-
-<div class="container">
-
-  <h1>Popover <small>Bootstrap Visual Test</small></h1>
-
-  <button type="button" class="btn btn-default js-popover" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
-    Popover on left
-  </button>
-  <button type="button" class="btn btn-default js-popover" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
-    Popover on top
-  </button>
-  <button type="button" class="btn btn-default js-popover" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
-    Popover on bottom
-  </button>
-  <button type="button" class="btn btn-default js-popover" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">
-    Popover on right
-  </button>
-
-</div>
-
-<!-- JavaScript Includes -->
-<script src="../vendor/jquery.min.js"></script>
-<script src="../vendor/tether.min.js"></script>
-<script src="../../dist/util.js"></script>
-<script src="../../dist/tooltip.js"></script>
-<script src="../../dist/popover.js"></script>
-
-
-<!-- JavaScript Test -->
-<script>
-$(function () {
-  $('.js-popover').popover()
-})
-</script>
-
-</body>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+    <title>Popover</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Popover <small>Bootstrap Visual Test</small></h1>
+
+      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        Popover on top
+      </button>
+
+      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        Popover on right
+      </button>
+
+      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
+      sagittis lacus vel augue laoreet rutrum faucibus.">
+        Popover on bottom
+      </button>
+
+      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        Popover on left
+      </button>
+    </div>
+
+    <script src="../vendor/jquery.min.js"></script>
+    <script src="../vendor/tether.min.js"></script>
+    <script src="../../dist/util.js"></script>
+    <script src="../../dist/tooltip.js"></script>
+    <script src="../../dist/popover.js"></script>
+
+    <script>
+      $(function () {
+        $('[data-toggle="popover"]').popover()
+      })
+    </script>
+  </body>
 </html>
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
 <!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>Tooltip</title>
-  <link rel="stylesheet" href="../../../dist/css/bootstrap.css">
-</head>
-<body>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
+    <title>Tooltip</title>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Tooltip <small>Bootstrap Visual Test</small></h1>

-<div class="container">
+      <p class="text-muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>

-  <h1>Tooltip <small>Bootstrap Visual Test</small></h1>
+      <hr>

-  <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
-  </p>
-  <hr>
-  <p>
-    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left">Tooltip on left</button>
-    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
-    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
-    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
-  </p>
+      <p>
+        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
+          Tooltip on top
+        </button>
+        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
+          Tooltip on right
+        </button>
+        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
+          Tooltip on bottom
+        </button>
+        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
+          Tooltip on left
+        </button>
+        <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
+          Tooltip with HTML
+        </button>
+      </p>
+    </div>

-</div>
+    <script src="../vendor/jquery.min.js"></script>
+    <script src="../vendor/tether.min.js"></script>
+    <script src="../../dist/util.js"></script>
+    <script src="../../dist/tooltip.js"></script>

-<!-- JavaScript Includes -->
-<script src="../vendor/jquery.min.js"></script>
-<script src="../vendor/tether.min.js"></script>
-<script src="../../dist/util.js"></script>
-<script src="../../dist/tooltip.js"></script>
-
-<!-- JavaScript Test -->
-<script>
-$(function () {
-  $('[data-toggle="tooltip"]').tooltip()
-})
-</script>
-
-</body>
+    <script>
+      $(function () {
+        $('[data-toggle="tooltip"]').tooltip()
+      })
+    </script>
+  </body>
 </html>