diff options
| author | Bobby <[email protected]> | 2024-08-16 20:47:33 -0400 |
|---|---|---|
| committer | GitHub <[email protected]> | 2024-08-16 20:47:33 -0400 |
| commit | 6b28433d9cfde435be8ec2bd6cf91e6324d08865 (patch) | |
| tree | 8343c27b8b95ff5639233e81cf157f92e5688466 /js/tests/visual/modal.html | |
| parent | d53094ec16ba385faae2973ddee648698b32ab24 (diff) | |
| parent | 048f56f51460df75e92a2f7b472e1c56baeb68f7 (diff) | |
| download | bootstrap-main.tar.xz bootstrap-main.zip | |
Diffstat (limited to 'js/tests/visual/modal.html')
| -rw-r--r-- | js/tests/visual/modal.html | 109 |
1 files changed, 48 insertions, 61 deletions
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> |