diff options
Diffstat (limited to 'js/tests/visual')
| -rw-r--r-- | js/tests/visual/alert.html | 6 | ||||
| -rw-r--r-- | js/tests/visual/button.html | 10 | ||||
| -rw-r--r-- | js/tests/visual/carousel.html | 19 | ||||
| -rw-r--r-- | js/tests/visual/collapse.html | 7 | ||||
| -rw-r--r-- | js/tests/visual/dropdown.html | 37 | ||||
| -rw-r--r-- | js/tests/visual/floating-label.html | 337 | ||||
| -rw-r--r-- | js/tests/visual/input.html | 78 | ||||
| -rw-r--r-- | js/tests/visual/modal.html | 109 | ||||
| -rw-r--r-- | js/tests/visual/popover.html | 16 | ||||
| -rw-r--r-- | js/tests/visual/scrollspy.html | 22 | ||||
| -rw-r--r-- | js/tests/visual/tab.html | 11 | ||||
| -rw-r--r-- | js/tests/visual/toast.html | 33 | ||||
| -rw-r--r-- | js/tests/visual/tooltip.html | 75 |
13 files changed, 569 insertions, 191 deletions
diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html index c5e2efafa..2433b9e8e 100644 --- a/js/tests/visual/alert.html +++ b/js/tests/visual/alert.html @@ -43,10 +43,6 @@ </div> </div> - <script src="../../dist/dom/event-handler.js"></script> - <script src="../../dist/dom/selector-engine.js"></script> - <script src="../../dist/dom/data.js"></script> - <script src="../../dist/base-component.js"></script> - <script src="../../dist/alert.js"></script> + <script src="../../../dist/js/bootstrap.bundle.js"></script> </body> </html> diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html index 0bd2f1097..47c50889c 100644 --- a/js/tests/visual/button.html +++ b/js/tests/visual/button.html @@ -15,7 +15,7 @@ </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> + <p>Navigate to the checkboxes with the keyboard (generally, using <kbd>Tab</kbd> / <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></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-bs-toggle="buttons"> <label class="btn btn-primary active"> @@ -29,7 +29,7 @@ </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> + <p>Navigate to the radio button group with the keyboard (generally, using <kbd>Tab</kbd> / <kbd><kbd>Shift</kbd> + <kbd>Tab</kbd></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><kbd>Shift</kbd> + <kbd>Tab</kbd></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-bs-toggle="buttons"> <label class="btn btn-primary active"> @@ -44,10 +44,6 @@ </div> </div> - <script src="../../dist/dom/event-handler.js"></script> - <script src="../../dist/dom/selector-engine.js"></script> - <script src="../../dist/dom/data.js"></script> - <script src="../../dist/base-component.js"></script> - <script src="../../dist/button.js"></script> + <script src="../../../dist/js/bootstrap.bundle.js"></script> </body> </html> diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html index 561b6ce5a..1b2de5291 100644 --- a/js/tests/visual/carousel.html +++ b/js/tests/visual/carousel.html @@ -45,24 +45,19 @@ </div> </div> - <script src="../../dist/dom/event-handler.js"></script> - <script src="../../dist/dom/selector-engine.js"></script> - <script src="../../dist/dom/manipulator.js"></script> - <script src="../../dist/dom/data.js"></script> - <script src="../../dist/base-component.js"></script> - <script src="../../dist/carousel.js"></script> + <script src="../../../dist/js/bootstrap.bundle.js"></script> <script> - var t0 - var t1 - var carousel = document.getElementById('carousel-example-generic') + let t0 + let t1 + const carousel = document.getElementById('carousel-example-generic') // Test to show that the carousel doesn't slide when the current tab isn't visible // Test to show that transition-duration can be changed with css - carousel.addEventListener('slid.bs.carousel', function (event) { + carousel.addEventListener('slid.bs.carousel', event => { t1 = performance.now() - console.log('transition-duration took ' + (t1 - t0) + 'ms, slid at ' + event.timeStamp) + console.log(`transition-duration took ${t1 - t0}ms, slid at ${event.timeStamp}`) }) - carousel.addEventListener('slide.bs.carousel', function () { + carousel.addEventListener('slide.bs.carousel', () => { t0 = performance.now() }) </script> diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html index e4e534bcf..2782c56b6 100644 --- a/js/tests/visual/collapse.html +++ b/js/tests/visual/collapse.html @@ -71,11 +71,6 @@ </div> </div> - <script src="../../dist/dom/event-handler.js"></script> - <script src="../../dist/dom/selector-engine.js"></script> - <script src="../../dist/dom/manipulator.js"></script> - <script src="../../dist/dom/data.js"></script> - <script src="../../dist/base-component.js"></script> - <script src="../../dist/collapse.js"></script> + <script src="../../../dist/js/bootstrap.bundle.js"></script> </body> </html> diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html index f1dd705f3..04cf06d7b 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -10,7 +10,7 @@ <div class="container"> <h1>Dropdown <small>Bootstrap Visual Test</small></h1> - <nav class="navbar navbar-expand-md navbar-light bg-light"> + <nav class="navbar navbar-expand-md bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> @@ -28,8 +28,8 @@ <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> @@ -50,8 +50,8 @@ <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown2"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> @@ -103,7 +103,7 @@ </div> <div class="col-sm-12 mt-4"> - <div class="btn-group dropup" role="group"> + <div class="btn-group dropup"> <a href="#" class="btn btn-secondary">Dropup split align end</a> <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Product actions</span> @@ -125,7 +125,7 @@ </div> <div class="col-sm-12 mt-4"> - <div class="btn-group dropend" role="group"> + <div class="btn-group dropend"> <a href="#" class="btn btn-secondary">Dropend split</a> <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Product actions</span> @@ -137,17 +137,17 @@ </div> </div> <div class="btn-group dropend"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-bs-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropend </button> - <div class="dropdown-menu" aria-labelledby="dropdownMenuRight"> + <div class="dropdown-menu"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> </div> </div> <!-- dropstart --> - <div class="btn-group dropstart" role="group"> + <div class="btn-group dropstart"> <a href="#" class="btn btn-secondary">Dropstart split</a> <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Product actions</span> @@ -159,10 +159,10 @@ </div> </div> <div class="btn-group dropstart"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenu" data-bs-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropstart </button> - <div class="dropdown-menu" aria-labelledby="dropstartMenu"> + <div class="dropdown-menu"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> <button class="dropdown-item" type="button">Something else here</button> @@ -187,10 +187,10 @@ </div> <div class="col-sm-3 mt-4"> <div class="dropdown"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Dropdown menu without Popper </button> - <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> @@ -200,13 +200,6 @@ </div> </div> - <script src="../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script> - <script src="../../dist/dom/event-handler.js"></script> - <script src="../../dist/dom/selector-engine.js"></script> - <script src="../../dist/dom/data.js"></script> - <script src="../../dist/dom/manipulator.js"></script> - <script src="../../dist/base-component.js"></script> - <script src="../../dist/dropdown.js"></script> - <script src="../../dist/collapse.js"></script> + <script src="../../../dist/js/bootstrap.bundle.js"></script> </body> </html> diff --git a/js/tests/visual/floating-label.html b/js/tests/visual/floating-label.html new file mode 100644 index 000000000..f78442eff --- /dev/null +++ b/js/tests/visual/floating-label.html @@ -0,0 +1,337 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link href="../../../dist/css/bootstrap.min.css" rel="stylesheet"> + <title>Form</title> + <style></style> + </head> + <body> + <div class="container py-5 d-flex flex-column gap-3"> + <div class="form-floating"> + <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]"> + <label for="floatingInput">Email address</label> + </div> + <div class="form-floating"> + <input type="email" class="form-control" id="floatingInput1" placeholder="[email protected]"> + <label for="floatingInput1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <form class="form-floating"> + <input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]"> + <label for="floatingInputValue">Input with value</label> + </form> + <form class="form-floating"> + <input type="email" class="form-control" id="floatingInputValue1" placeholder="[email protected]" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend."> + <label for="floatingInputValue1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </form> + <form class="form-floating"> + <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]"> + <label for="floatingInputInvalid">Invalid input</label> + </form> + <form class="form-floating"> + <input type="email" class="form-control is-invalid" id="floatingInputInvalid1" placeholder="[email protected]" value="[email protected]"> + <label for="floatingInputInvalid1">Invalid input</label> + </form> + <form class="form-floating"> + <input type="email" class="form-control is-invalid" id="floatingInputInvalid2" placeholder="[email protected]"> + <label for="floatingInputInvalid2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </form> + <form class="form-floating"> + <input type="email" class="form-control is-invalid" id="floatingInputInvalid3" placeholder="[email protected]" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend."> + <label for="floatingInputInvalid3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </form> + <div class="form-floating"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea> + <label for="floatingTextarea">Comments</label> + </div> + <div class="form-floating"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea1"></textarea> + <label for="floatingTextarea1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 50px"></textarea> + <label for="floatingTextarea2">Comments</label> + </div> + <div class="form-floating"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea3" style="height: 50px"></textarea> + <label for="floatingTextarea3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea4" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea> + <label for="floatingTextarea4">Comments</label> + </div> + <div class="form-floating"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea5" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea> + <label for="floatingTextarea5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating"> + <textarea class="form-control is-invalid" placeholder="Leave a comment here" id="floatingTextarea6" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea> + <label for="floatingTextarea6">Comments</label> + </div> + <div class="form-floating"> + <textarea class="form-control is-invalid" placeholder="Leave a comment here" id="floatingTextarea7" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea> + <label for="floatingTextarea7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating"> + <select class="form-select" id="floatingSelect" aria-label="Floating label select example"> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> + </select> + <label for="floatingSelect">Works with selects</label> + </div> + <div class="form-floating"> + <select class="form-select is-invalid" id="floatingSelect1" aria-label="Floating label select example"> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> + </select> + <label for="floatingSelect1">Works with selects</label> + </div> + <div class="form-floating"> + <select class="form-select" id="floatingSelect2" aria-label="Floating label select example"> + <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + </select> + <label for="floatingSelect2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating"> + <select class="form-select is-invalid" id="floatingSelect3" aria-label="Floating label select example"> + <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + </select> + <label for="floatingSelect3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating mb-3"> + <input type="email" class="form-control" id="floatingInputDisabled" placeholder="[email protected]" disabled> + <label for="floatingInputDisabled">Email address</label> + </div> + <div class="form-floating mb-3"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled" disabled></textarea> + <label for="floatingTextareaDisabled">Comments</label> + </div> + <div class="form-floating mb-3"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled1" style="height: 50px" disabled>Disabled textarea with some text inside</textarea> + <label for="floatingTextareaDisabled1">Comments</label> + </div> + <div class="form-floating"> + <select class="form-select" id="floatingSelectDisabled" aria-label="Floating label disabled select example" disabled> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> + </select> + <label for="floatingSelectDisabled">Works with selects</label> + </div> + <div class="form-floating mb-3"> + <input type="email" class="form-control" id="floatingInputDisabled1" placeholder="[email protected]" disabled> + <label for="floatingInputDisabled1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating mb-3"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled2" disabled></textarea> + <label for="floatingTextareaDisabled2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating mb-3"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled3" style="height: 50px" disabled>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea> + <label for="floatingTextareaDisabled3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating"> + <select class="form-select" id="floatingSelectDisabled1" aria-label="Floating label disabled select example" disabled> + <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + </select> + <label for="floatingSelectDisabled1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating mb-3"> + <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]"> + <label for="floatingEmptyPlaintextInput">Empty input</label> + </div> + <div class="form-floating mb-3"> + <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]"> + <label for="floatingPlaintextInput">Input with value</label> + </div> + <div class="form-floating mb-3"> + <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput1" placeholder="[email protected]"> + <label for="floatingEmptyPlaintextInput1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating mb-3"> + <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput1" placeholder="[email protected]" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend."> + <label for="floatingPlaintextInput1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + </div> + + <div class="container-fluid bg-body" data-bs-theme="dark"> + <div class="container py-5 d-flex flex-column gap-3"> + <div class="form-floating"> + <input type="email" class="form-control" id="floatingInput2" placeholder="[email protected]"> + <label for="floatingInput2">Email address</label> + </div> + <div class="form-floating"> + <input type="email" class="form-control" id="floatingInput3" placeholder="[email protected]"> + <label for="floatingInput3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <form class="form-floating"> + <input type="email" class="form-control" id="floatingInputValue2" placeholder="[email protected]" value="[email protected]"> + <label for="floatingInputValue2">Input with value</label> + </form> + <form class="form-floating"> + <input type="email" class="form-control" id="floatingInputValue3" placeholder="[email protected]" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend."> + <label for="floatingInputValue3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </form> + <form class="form-floating"> + <input type="email" class="form-control is-invalid" id="floatingInputInvalid4" placeholder="[email protected]" value="[email protected]"> + <label for="floatingInputInvalid4">Invalid input</label> + </form> + <form class="form-floating"> + <input type="email" class="form-control is-invalid" id="floatingInputInvalid5" placeholder="[email protected]" value="[email protected]"> + <label for="floatingInputInvalid5">Invalid input</label> + </form> + <form class="form-floating"> + <input type="email" class="form-control is-invalid" id="floatingInputInvalid6" placeholder="[email protected]"> + <label for="floatingInputInvalid6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </form> + <form class="form-floating"> + <input type="email" class="form-control is-invalid" id="floatingInputInvalid7" placeholder="[email protected]" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend."> + <label for="floatingInputInvalid7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </form> + <div class="form-floating"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea8"></textarea> + <label for="floatingTextarea8">Comments</label> + </div> + <div class="form-floating"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea9"></textarea> + <label for="floatingTextarea9">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea10" style="height: 50px"></textarea> + <label for="floatingTextarea10">Comments</label> + </div> + <div class="form-floating"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea11" style="height: 50px"></textarea> + <label for="floatingTextarea11">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea12" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea> + <label for="floatingTextarea12">Comments</label> + </div> + <div class="form-floating"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea13" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea> + <label for="floatingTextarea13">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating"> + <textarea class="form-control is-invalid" placeholder="Leave a comment here" id="floatingTextarea14" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea> + <label for="floatingTextarea14">Comments</label> + </div> + <div class="form-floating"> + <textarea class="form-control is-invalid" placeholder="Leave a comment here" id="floatingTextarea15" style="height: 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea> + <label for="floatingTextarea15">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating"> + <select class="form-select" id="floatingSelect4" aria-label="Floating label select example"> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> + </select> + <label for="floatingSelect4">Works with selects</label> + </div> + <div class="form-floating"> + <select class="form-select is-invalid" id="floatingSelect5" aria-label="Floating label select example"> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> + </select> + <label for="floatingSelect5">Works with selects</label> + </div> + <div class="form-floating"> + <select class="form-select" id="floatingSelect6" aria-label="Floating label select example"> + <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + </select> + <label for="floatingSelect6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating"> + <select class="form-select is-invalid" id="floatingSelect7" aria-label="Floating label select example"> + <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + </select> + <label for="floatingSelect7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating mb-3"> + <input type="email" class="form-control" id="floatingInputDisabled2" placeholder="[email protected]" disabled> + <label for="floatingInputDisabled2">Email address</label> + </div> + <div class="form-floating mb-3"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled4" disabled></textarea> + <label for="floatingTextareaDisabled4">Comments</label> + </div> + <div class="form-floating mb-3"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled5" style="height: 50px" disabled>Disabled textarea with some text inside</textarea> + <label for="floatingTextareaDisabled5">Comments</label> + </div> + <div class="form-floating"> + <select class="form-select" id="floatingSelectDisabled2" aria-label="Floating label disabled select example" disabled> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> + </select> + <label for="floatingSelectDisabled2">Works with selects</label> + </div> + <div class="form-floating mb-3"> + <input type="email" class="form-control" id="floatingInputDisabled3" placeholder="[email protected]" disabled> + <label for="floatingInputDisabled3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating mb-3"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled6" disabled></textarea> + <label for="floatingTextareaDisabled6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating mb-3"> + <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextareaDisabled7" style="height: 50px" disabled>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</textarea> + <label for="floatingTextareaDisabled7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating"> + <select class="form-select" id="floatingSelectDisabled3" aria-label="Floating label disabled select example" disabled> + <option selected>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + <option value="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</option> + </select> + <label for="floatingSelectDisabled3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating mb-3"> + <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput2" placeholder="[email protected]"> + <label for="floatingEmptyPlaintextInput2">Empty input</label> + </div> + <div class="form-floating mb-3"> + <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput2" placeholder="[email protected]" value="[email protected]"> + <label for="floatingPlaintextInput2">Input with value</label> + </div> + <div class="form-floating mb-3"> + <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput3" placeholder="[email protected]"> + <label for="floatingEmptyPlaintextInput3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + <div class="form-floating mb-3"> + <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput3" placeholder="[email protected]" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend."> + <label for="floatingPlaintextInput3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label> + </div> + </div> + </div> + + <script src="../../../dist/js/bootstrap.bundle.js"></script> + </body> +</html> diff --git a/js/tests/visual/input.html b/js/tests/visual/input.html new file mode 100644 index 000000000..1e5eec2d1 --- /dev/null +++ b/js/tests/visual/input.html @@ -0,0 +1,78 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link href="../../../dist/css/bootstrap.min.css" rel="stylesheet"> + <title>Form</title> + <style></style> + </head> + <body> + <div class="container"> + <h1>Input <small>Bootstrap Visual Test</small></h1> + + <h2>No layout</h2> + + <div class="mb-3"> + Text + <input class="form-control"> + </div> + <div class="mb-3"> + Email + <input type="email" class="form-control"> + </div> + <div class="mb-3"> + Number + <input type="number" class="form-control"> + </div> + <div class="mb-3"> + Date + <input type="date" class="form-control"> + </div> + + <h2>Flex</h2> + + <div class="d-flex flex-wrap gap-3 mb-3"> + <div> + Text + <input class="form-control"> + </div> + <div> + Email + <input type="email" class="form-control"> + </div> + <div> + Number + <input type="number" class="form-control"> + </div> + <div> + Date + <input type="date" class="form-control"> + </div> + </div> + + <h2>Grid</h2> + + <div class="row mb-3"> + <div class="col"> + Text + <input class="form-control"> + </div> + <div class="col"> + Email + <input type="email" class="form-control"> + </div> + <div class="col"> + Number + <input type="number" class="form-control"> + </div> + <div class="col"> + Date + <input type="date" class="form-control"> + </div> + </div> + </div> + + <script src="../../../dist/js/bootstrap.bundle.js"></script> + </body> +</html> diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index 719e9cc10..efb5127b5 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -13,21 +13,25 @@ </style> </head> <body> - <nav class="navbar navbar-full navbar-dark bg-dark"> - <button class="navbar-toggler hidden-lg-up" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> - <div class="collapse navbar-expand-md" id="navbarResponsive"> - <a class="navbar-brand" href="#">This shouldn't jump!</a> - <ul class="navbar-nav"> - <li class="nav-item"> - <a class="nav-link active" href="#" aria-current="page">Home</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> - </ul> + <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> + <div class="container-fluid"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse" id="navbarResponsive"> + <a class="navbar-brand" href="#">This shouldn't jump!</a> + <ul class="navbar-nav"> + <li class="nav-item"> + <a class="nav-link active" href="#" aria-current="page">Home</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> + </ul> + </div> </div> </nav> @@ -38,7 +42,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h4 class="modal-title" id="myModalLabel">Modal title</h4> + <h1 class="modal-title fs-4" id="myModalLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -123,7 +127,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h4 class="modal-title" id="firefoxModalLabel">Firefox Bug Test</h4> + <h1 class="modal-title fs-4" id="firefoxModalLabel">Firefox Bug Test</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -147,7 +151,7 @@ <div class="modal-dialog" style="transition-duration: inherit;"> <div class="modal-content"> <div class="modal-header"> - <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4> + <h1 class="modal-title fs-4" id="slowModalLabel">Lorem slowly</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -184,11 +188,11 @@ <br><br> - <div class="bg-dark text-white p-2" id="tall" style="display: none;"> + <div class="text-bg-dark p-2" id="tall" style="display: none;"> Tall body content to force the page to have a scrollbar. </div> - <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-target="<div class="modal fade the-bad" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">The Bad Modal</h4></div><div class="modal-body">This modal's HTTML source code is declared inline, inside the data-bs-target attribute of it's show-button</div></div></div></div>"> + <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-target="<div class="modal fade the-bad" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h1 class="modal-title fs-4">The Bad Modal</h1></div><div class="modal-body">This modal's HTTML source code is declared inline, inside the data-bs-target attribute of it's show-button</div></div></div></div>"> Modal with an XSS inside the data-bs-target </button> @@ -199,19 +203,12 @@ </button> </div> - <script src="../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script> - <script src="../../dist/dom/event-handler.js"></script> - <script src="../../dist/dom/selector-engine.js"></script> - <script src="../../dist/dom/data.js"></script> - <script src="../../dist/dom/manipulator.js"></script> - <script src="../../dist/base-component.js"></script> - <script src="../../dist/modal.js"></script> - <script src="../../dist/collapse.js"></script> - <script src="../../dist/tooltip.js"></script> - <script src="../../dist/popover.js"></script> + <script src="../../../dist/js/bootstrap.bundle.js"></script> <script> - var ffBugTestResult = document.getElementById('ff-bug-test-result') - var firefoxTestDone = false + /* global bootstrap: false */ + + const ffBugTestResult = document.getElementById('ff-bug-test-result') + const firefoxTestDone = false function reportFirefoxTestResult(result) { if (!firefoxTestDone) { @@ -220,44 +217,34 @@ } } - var popoverElements = document.querySelectorAll('[data-bs-toggle="popover"]') - for (const popoverEl of popoverElements) { - new Popover(popoverEl) - } - var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]') - for (const tooltipEl of tooltipElements) { - new Tooltip(tooltipEl) - } + document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl)) - var tallToggle = document.getElementById('tall-toggle') - var tall = document.getElementById('tall') - tallToggle.addEventListener('click', function () { - if (tall.style.display === 'none') { - tall.style.display = 'block' - } else { - tall.style.display = 'none' - } + document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl)) + + const tall = document.getElementById('tall') + document.getElementById('tall-toggle').addEventListener('click', () => { + tall.style.display = tall.style.display === 'none' ? 'block' : 'none' }) - var ffBugInput = document.getElementById('ff-bug-input') - var firefoxModal = document.getElementById('firefoxModal') + const ffBugInput = document.getElementById('ff-bug-input') + const firefoxModal = document.getElementById('firefoxModal') function handlerClickFfBugInput() { firefoxModal.addEventListener('focus', reportFirefoxTestResult.bind(false)) ffBugInput.addEventListener('focus', reportFirefoxTestResult.bind(true)) ffBugInput.removeEventListener('focus', handlerClickFfBugInput) } + ffBugInput.addEventListener('focus', handlerClickFfBugInput) - var btnPreventModal = document.getElementById('btnPreventModal') - var modalFf = new Modal(firefoxModal) + const modalFf = new bootstrap.Modal(firefoxModal) - btnPreventModal.addEventListener('click', function () { - function shownFirefoxModal() { + document.getElementById('btnPreventModal').addEventListener('click', () => { + const shownFirefoxModal = () => { modalFf.hide() firefoxModal.removeEventListener('shown.bs.modal', hideFirefoxModal) } - function hideFirefoxModal(event) { + const hideFirefoxModal = event => { event.preventDefault() firefoxModal.removeEventListener('hide.bs.modal', hideFirefoxModal) @@ -275,16 +262,16 @@ }) // Test transition duration - var t0 - var t1 - var slowModal = document.getElementById('slowModal') + let t0 + let t1 + const slowModal = document.getElementById('slowModal') - slowModal.addEventListener('shown.bs.modal', function () { + slowModal.addEventListener('shown.bs.modal', () => { t1 = performance.now() - console.log('transition-duration took ' + (t1 - t0) + 'ms.') + console.log(`transition-duration took ${t1 - t0}ms.`) }) - slowModal.addEventListener('show.bs.modal', function () { + slowModal.addEventListener('show.bs.modal', () => { t0 = performance.now() }) </script> diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html index 3503271ae..73edf998d 100644 --- a/js/tests/visual/popover.html +++ b/js/tests/visual/popover.html @@ -31,19 +31,11 @@ </button> </div> - <script src="../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script> - <script src="../../dist/dom/event-handler.js"></script> - <script src="../../dist/dom/selector-engine.js"></script> - <script src="../../dist/dom/manipulator.js"></script> - <script src="../../dist/dom/data.js"></script> - <script src="../../dist/base-component.js"></script> - <script src="../../dist/tooltip.js"></script> - <script src="../../dist/popover.js"></script> + <script src="../../../dist/js/bootstrap.bundle.js"></script> <script> - var popoverElements = document.querySelectorAll('[data-bs-toggle="popover"]') - for (const popoverEl of popoverElements) { - new Popover(popoverEl) - } + /* global bootstrap: false */ + + document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverEl => new bootstrap.Popover(popoverEl)) </script> </body> </html> diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html index 1e3215b6f..541028478 100644 --- a/js/tests/visual/scrollspy.html +++ b/js/tests/visual/scrollspy.html @@ -24,11 +24,12 @@ <a class="nav-link" href="#mdo">@mdo</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> - <ul class="dropdown-menu" aria-labelledby="dropdown"> + <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> + <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#one">One</a></li> <li><a class="dropdown-item" href="#two">Two</a></li> <li><a class="dropdown-item" href="#three">Three</a></li> + <li><a class="dropdown-item" href="#présentation">Présentation</a></li> </ul> </li> <li class="nav-item"> @@ -82,17 +83,18 @@ <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> <hr> + <h2 id="présentation">Présentation</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> + <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> + <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> + <hr> <h2 id="final">Final section</h2> <p>Ad leggings keytar, brunch id art party dolor labore.</p> </div> - <script src="../../dist/dom/data.js"></script> - <script src="../../dist/dom/event-handler.js"></script> - <script src="../../dist/dom/selector-engine.js"></script> - <script src="../../dist/dom/manipulator.js"></script> - <script src="../../dist/base-component.js"></script> - <script src="../../dist/scrollspy.js"></script> - <script src="../../dist/dropdown.js"></script> - <script src="../../dist/collapse.js"></script> + <script src="../../../dist/js/bootstrap.bundle.js"></script> </body> </html> diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index 0ce8be03c..a424175b0 100644 --- a/js/tests/visual/tab.html +++ b/js/tests/visual/tab.html @@ -161,12 +161,12 @@ <h4>Tabs with nav and using links (with fade)</h4> <nav> - <div class="nav nav-pills" id="nav-tab" role="tablist"> + <div class="nav nav-pills" id="nav-tab" role="tablist"> <a class="nav-link nav-item active" role="tab" data-bs-toggle="tab" href="#home5">Home</a> <a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#profile5">Profile</a> <a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#fat5">@fat</a> <a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#mdo5">@mdo</a> - <a class="nav-link nav-item disabled" role="tab" href="#">Disabled</a> + <a class="nav-link nav-item disabled" role="tab" href="#" aria-disabled="true">Disabled</a> </div> </nav> @@ -218,11 +218,6 @@ </div> </div> - <script src="../../dist/dom/event-handler.js"></script> - <script src="../../dist/dom/selector-engine.js"></script> - <script src="../../dist/dom/data.js"></script> - <script src="../../dist/dom/manipulator.js"></script> - <script src="../../dist/base-component.js"></script> - <script src="../../dist/tab.js"></script> + <script src="../../../dist/js/bootstrap.bundle.js"></script> </body> </html> diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html index f9e1741cf..e64fd1d88 100644 --- a/js/tests/visual/toast.html +++ b/js/tests/visual/toast.html @@ -41,7 +41,7 @@ <div class="toast-header"> <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span> <strong class="me-auto">Bootstrap</strong> - <small class="text-muted">2 seconds ago</small> + <small class="text-body-secondary">2 seconds ago</small> <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> @@ -50,32 +50,19 @@ </div> </div> - <script src="../../dist/dom/event-handler.js"></script> - <script src="../../dist/dom/manipulator.js"></script> - <script src="../../dist/dom/data.js"></script> - <script src="../../dist/base-component.js"></script> - <script src="../../dist/toast.js"></script> + <script src="../../../dist/js/bootstrap.bundle.js"></script> <script> - window.addEventListener('load', function () { - var toastElements = document.querySelectorAll('.toast') - for (const toastEl of toastElements) { - new Toast(toastEl) - } + /* global bootstrap: false */ - document.getElementById('btnShowToast').addEventListener('click', function () { - var toastElements = document.querySelectorAll('.toast') - for (const toastEl of toastElements) { - var toast = Toast.getInstance(toastEl) - toast.show() - } + window.addEventListener('load', () => { + document.querySelectorAll('.toast').forEach(toastEl => new bootstrap.Toast(toastEl)) + + document.getElementById('btnShowToast').addEventListener('click', () => { + document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).show()) }) - document.getElementById('btnHideToast').addEventListener('click', function () { - var toastElements = document.querySelectorAll('.toast') - for (const toastEl of toastElements) { - var toast = Toast.getInstance(toastEl) - toast.hide() - } + document.getElementById('btnHideToast').addEventListener('click', () => { + document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).hide()) }) }) </script> diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index 448841e58..09144b572 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -20,7 +20,7 @@ <div class="container"> <h1>Tooltip <small>Bootstrap Visual Test</small></h1> - <p class="text-muted">Tight pants next level keffiyeh <a href="#" data-bs-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-bs-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-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p> + <p class="text-body-secondary">Tight pants next level keffiyeh <a href="#" data-bs-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-bs-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-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p> <hr> @@ -66,48 +66,73 @@ <div id="shadow" class="pt-5"></div> </div> <div id="customContainer"></div> + + <div class="row mt-4 border-top"> + <hr> + <div class="h4">Test Selector triggered tooltips</div> + <div id="wrapperTriggeredBySelector"> + <div class="py-2 selectorButtonsBlock"> + <button type="button" class="btn btn-secondary bs-dynamic-tooltip" title="random title">Using title</button> + <button type="button" class="btn btn-secondary bs-dynamic-tooltip" data-bs-title="random title">Using bs-title</button> + </div> + + </div> + <div class="mt-3"> + <button type="button" class="btn btn-primary" onclick="duplicateButtons()">Duplicate above two buttons</button> + </div> + </div> </div> - <script src="../../../node_modules/@popperjs/core/dist/umd/popper.min.js"></script> - <script src="../../dist/dom/selector-engine.js"></script> - <script src="../../dist/dom/event-handler.js"></script> - <script src="../../dist/dom/manipulator.js"></script> - <script src="../../dist/dom/data.js"></script> - <script src="../../dist/base-component.js"></script> - <script src="../../dist/tooltip.js"></script> + <script src="../../../dist/js/bootstrap.bundle.js"></script> <script> + /* global bootstrap: false */ + if (typeof document.body.attachShadow === 'function') { - var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' }) + const shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' }) shadowRoot.innerHTML = - '<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom">' + + '<button id="firstShadowTooltip" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom">' + ' Tooltip on top in a shadow dom' + '</button>' + - '<button id="secondTooltip" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom with container option">' + + '<button id="secondShadowTooltip" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom with container option">' + ' Tooltip on top in a shadow dom' + '</button>' - var firstChildTooltip = new Tooltip(shadowRoot.firstChild) - var secondChildTooltip = new Tooltip(shadowRoot.getElementById('secondTooltip'), { + new bootstrap.Tooltip(shadowRoot.firstChild) + new bootstrap.Tooltip(shadowRoot.getElementById('secondShadowTooltip'), { container: shadowRoot }) } - var tooltipElements = document.querySelectorAll('[data-bs-toggle="tooltip"]') - for (const tooltipEl of tooltipElements) { - new Tooltip(tooltipEl) - } - - var tooltipElement = document.getElementById('tooltipElement') - var tooltipElementInstance = new Tooltip(tooltipElement, { - container: document.getElementById('customContainer') + new bootstrap.Tooltip('#tooltipElement', { + container: '#customContainer' }) - var target = document.getElementById('target') - var targetTooltip = new Tooltip(target, { - placement : 'top', - trigger : 'manual' + const targetTooltip = new bootstrap.Tooltip('#target', { + placement: 'top', + trigger: 'manual' }) targetTooltip.show() + + document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipEl => new bootstrap.Tooltip(tooltipEl)) </script> + + <script> + /* global bootstrap: false */ + + new bootstrap.Tooltip('#wrapperTriggeredBySelector', { + animation: false, + selector: '.bs-dynamic-tooltip' + }) + + /* eslint-disable no-unused-vars */ + function duplicateButtons() { + const buttonsBlock = document.querySelector('.selectorButtonsBlock')// get first + const buttonsBlockClone = buttonsBlock.cloneNode(true) + buttonsBlockClone.innerHTML += new Date().toLocaleString() + document.querySelector('#wrapperTriggeredBySelector').append(buttonsBlockClone) + } + /* eslint-enable no-unused-vars */ + </script> + </body> </html> |