rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-30 12:24:19 +01:00
Code Issues Actions Packages Releases Activity
f0c6b24bd7
Bootstrap/js/tests/visual/modal.html

304 lines
16 KiB
HTML
Raw Normal View History

Switch to lowercase `doctype`. (#24217) Having it uppercase doesn't offer anything and the lowercase version slightly improves gzip compression.
2017-10-03 18:34:59 +02:00
<!doctype html>
Tighten htmllint's rules. (#24471)
2017-10-22 14:02:24 +02:00
<html lang="en">
Update visual tests.
2016-11-12 16:12:58 +01:00
<head>
<meta charset="utf-8">
Revert "Remove now unnecessary shrink-to-fit viewport directive (#27818)" (#27855) This reverts commit af484dc12c2302c0e594a0e73a2ba06738a84410.
2018-12-16 15:39:48 +01:00
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Update visual tests.
2016-11-12 16:12:58 +01:00
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<title>Modal</title>
<style>
#tall {
height: 1500px;
width: 100px;
}
</style>
</head>
<body>
update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables
2017-06-26 03:29:43 +02:00
<nav class="navbar navbar-full navbar-dark bg-dark">
Update visual tests.
2016-11-12 16:12:58 +01:00
<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>
rename from .navbar-toggleable to .navbar-expand to reflect mobile first approach everywhere else
2017-03-22 06:00:46 +01:00
<div class="collapse navbar-expand-md" id="navbarResponsive">
Update visual tests.
2016-11-12 16:12:58 +01:00
<a class="navbar-brand" href="#">This shouldn't jump!</a>
Update nav and navbar HTML markup According to the docs, you just need to apply the `navbar-nav` to an `<ul>` tag in a list-based navbar. In fact, `navbar-nav` seems to override all the css properties set by `nav`. Also, `nav-item` class should be used only for `<li>` tags, or in conjunction with `<a>` tags to entirely avoid the list-based approach. This commit removes the redundant `nav` class from `navbar-nav` `<ul>` tags, moves `nav-item` from `<a>` tags to `<li>` tags and properly adds `nav-item` class to `<li>` tags where missing. Refs: * https://v4-alpha.getbootstrap.com/components/navs/ * https://v4-alpha.getbootstrap.com/components/navbar/#nav
2017-04-12 16:06:52 +02:00
<ul class="navbar-nav">
Update visual tests.
2016-11-12 16:12:58 +01:00
<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>
</ul>
</div>
</nav>
<div class="container mt-3">
<h1>Modal <small>Bootstrap Visual Test</small></h1>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
remove closureness from plugins
2015-05-06 22:34:14 +02:00
</div>
Update visual tests.
2016-11-12 16:12:58 +01:00
<div class="modal-body">
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<h4>Popover in a modal</h4>
<p>This <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="left" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">button</button> should trigger a popover on click.</p>
<h4>Tooltips in a modal</h4>
<p><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">This link</a> and <a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">that link</a> should have tooltips on hover.</p>
Remove incorrect aria-multiselectable Closes https://github.com/twbs/bootstrap/issues/21635
2017-01-12 00:57:59 +01:00
<div id="accordion" role="tablist">
Update visual tests.
2016-11-12 16:12:58 +01:00
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
fix(tests): visual plugins tests
2018-07-23 20:49:21 +02:00
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Update visual tests.
2016-11-12 16:12:58 +01:00
Collapsible Group Item #1
</a>
</h5>
</div>
fix(tests): visual plugins tests
2018-07-23 20:49:21 +02:00
<div id="collapseOne" class="collapse show" data-parent="#accordion" role="tabpanel" aria-labelledby="headingOne">
Rename .card-block to .card-body to match nomenclature of modals
2017-06-15 07:01:16 +02:00
<div class="card-body">
Update visual tests.
2016-11-12 16:12:58 +01:00
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="headingTwo">
<h5 class="mb-0">
fix(tests): visual plugins tests
2018-07-23 20:49:21 +02:00
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Update visual tests.
2016-11-12 16:12:58 +01:00
Collapsible Group Item #2
</a>
</h5>
</div>
fix(tests): visual plugins tests
2018-07-23 20:49:21 +02:00
<div id="collapseTwo" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingTwo">
Rename .card-block to .card-body to match nomenclature of modals
2017-06-15 07:01:16 +02:00
<div class="card-body">
Update visual tests.
2016-11-12 16:12:58 +01:00
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">
fix(tests): visual plugins tests
2018-07-23 20:49:21 +02:00
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Update visual tests.
2016-11-12 16:12:58 +01:00
Collapsible Group Item #3
</a>
</h5>
</div>
fix(tests): visual plugins tests
2018-07-23 20:49:21 +02:00
<div id="collapseThree" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingThree">
Rename .card-block to .card-body to match nomenclature of modals
2017-06-15 07:01:16 +02:00
<div class="card-body">
Update visual tests.
2016-11-12 16:12:58 +01:00
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>
remove closureness from plugins
2015-05-06 22:34:14 +02:00
</div>
</div>
Update visual tests.
2016-11-12 16:12:58 +01:00
<hr>
<h4>Overflowing text to show scroll behavior</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
remove closureness from plugins
2015-05-06 22:34:14 +02:00
</div>
</div>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
</div>
</div>
Update visual tests.
2016-11-12 16:12:58 +01:00
<div class="modal fade" id="firefoxModal" tabindex="-1" role="dialog" aria-labelledby="firefoxModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="firefoxModalLabel">Firefox Bug Test</h4>
</div>
<div class="modal-body">
<ol>
<li>Ensure you're using Firefox.</li>
<li>Open a new tab and then switch back to this tab.</li>
<li>Click into this input: <input type="text" id="ff-bug-input"></li>
<li>Switch to the other tab and then back to this tab.</li>
</ol>
<p>Test result: <strong id="ff-bug-test-result"></strong></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
Add visual test for #18365 See also https://bugzilla.mozilla.org/show_bug.cgi?id=1228802
2015-12-23 07:02:33 +01:00
</div>
</div>
Update visual tests.
2016-11-12 16:12:58 +01:00
Variable transition durations (#25662)
2018-03-13 09:59:20 +01:00
<div class="modal fade" id="slowModal" tabindex="-1" role="dialog" aria-labelledby="slowModalLabel" aria-hidden="true" style="transition-duration: 5s;">
<div class="modal-dialog" role="document" style="transition-duration: inherit;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
</div>
<div class="modal-body">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Update visual tests.
2016-11-12 16:12:58 +01:00
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<button type="button" class="btn btn-primary btn-lg" id="tall-toggle">
Toggle tall &lt;body&gt; content
</button>
<br><br>
<button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#firefoxModal">
Launch Firefox bug test modal
</button>
(<a href="https://github.com/twbs/bootstrap/issues/18365">See Issue #18365</a>)
<br><br>
Variable transition durations (#25662)
2018-03-13 09:59:20 +01:00
<button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#slowModal">
Launch modal with slow transition
</button>
<br><br>
update instances of .bg-inverse and .bg-faded to .bg-dark and .bg-light
2017-06-26 03:31:23 +02:00
<div class="bg-dark text-white p-2" id="tall" style="display: none;">
Update visual tests.
2016-11-12 16:12:58 +01:00
Tall body content to force the page to have a scrollbar.
</div>
Fix XSS in data-target
2017-08-25 21:54:49 +02:00
<button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="&#x3C;div class=&#x22;modal fade the-bad&#x22; tabindex=&#x22;-1&#x22; role=&#x22;dialog&#x22;&#x3E;&#x3C;div class=&#x22;modal-dialog&#x22; role=&#x22;document&#x22;&#x3E;&#x3C;div class=&#x22;modal-content&#x22;&#x3E;&#x3C;div class=&#x22;modal-header&#x22;&#x3E;&#x3C;button type=&#x22;button&#x22; class=&#x22;close&#x22; data-dismiss=&#x22;modal&#x22; aria-label=&#x22;Close&#x22;&#x3E;&#x3C;span aria-hidden=&#x22;true&#x22;&#x3E;&#x26;times;&#x3C;/span&#x3E;&#x3C;/button&#x3E;&#x3C;h4 class=&#x22;modal-title&#x22;&#x3E;The Bad Modal&#x3C;/h4&#x3E;&#x3C;/div&#x3E;&#x3C;div class=&#x22;modal-body&#x22;&#x3E;This modal&#x27;s HTTML source code is declared inline, inside the data-target attribute of it&#x27;s show-button&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;&#x3C;/div&#x3E;">
Modal with an XSS inside the data-target
</button>
Modal plugin set _isTransitioning after the trigger of hide event
2017-10-10 13:19:39 +02:00
<br><br>
<button type="button" class="btn btn-secondary btn-lg" id="btnPreventModal">
Launch prevented modal on hide (to see the result open your console)
</button>
Add visual test for #18365 See also https://bugzilla.mozilla.org/show_bug.cgi?id=1228802
2015-12-23 07:02:33 +01:00
</div>
Update visual tests.
2016-11-12 16:12:58 +01:00
js/tests/visual: fix popper script. Broken after 787441d.
2018-10-13 15:05:43 +02:00
<script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
chore(update): bump to 4.1.3
2018-07-25 11:29:16 +02:00
<script src="../../dist/util.js"></script>
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
<script src="../../dist/dom/polyfill.js"></script>
Rewritten modal without jquery (#23955) * Trigger jquery events if available in event handler * Rewritten modal without jquery
2017-09-15 16:07:24 +02:00
<script src="../../dist/dom/data.js"></script>
alert without jquery
2017-08-21 09:11:37 +02:00
<script src="../../dist/dom/eventHandler.js"></script>
Rewritten modal without jquery (#23955) * Trigger jquery events if available in event handler * Rewritten modal without jquery
2017-09-15 16:07:24 +02:00
<script src="../../dist/dom/manipulator.js"></script>
<script src="../../dist/dom/selectorEngine.js"></script>
Update visual tests.
2016-11-12 16:12:58 +01:00
<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>
var firefoxTestDone = false
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
document.addEventListener('DOMContentLoaded', function () {
var ffBugTestResult = document.getElementById('ff-bug-test-result')
function reportFirefoxTestResult(result) {
if (!firefoxTestDone) {
ffBugTestResult.classList
.add(result ? 'text-success' : 'text-danger')
ffBugTestResult.innerHTML = result ? 'PASS' : 'FAIL'
}
Update visual tests.
2016-11-12 16:12:58 +01:00
}
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
document.querySelectorAll('[data-toggle="popover"]')
.forEach(function (popover) {
new Popover(popover)
})
Update visual tests.
2016-11-12 16:12:58 +01:00
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
document.querySelectorAll('[data-toggle="tooltip"]')
.forEach(function (tooltip) {
new Tooltip(tooltip)
})
Update visual tests.
2016-11-12 16:12:58 +01:00
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
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'
}
Update visual tests.
2016-11-12 16:12:58 +01:00
})
Modal plugin set _isTransitioning after the trigger of hide event
2017-10-10 13:19:39 +02:00
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
var ffBugInput = document.getElementById('ff-bug-input')
var 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)
btnPreventModal.addEventListener('click', function () {
function shownFirefoxModal() {
modalFf.hide()
firefoxModal.removeEventListener('shown.bs.modal', hideFirefoxModal)
}
function hideFirefoxModal(event) {
Modal plugin set _isTransitioning after the trigger of hide event
2017-10-10 13:19:39 +02:00
event.preventDefault()
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
firefoxModal.removeEventListener('hide.bs.modal', hideFirefoxModal)
if (modalFf._isTransitioning) {
Modal plugin set _isTransitioning after the trigger of hide event
2017-10-10 13:19:39 +02:00
console.error('Modal plugin should not set _isTransitioning when hide event is prevented')
} else {
console.log('Test passed')
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
modalFf.hide() // work as expected
Modal plugin set _isTransitioning after the trigger of hide event
2017-10-10 13:19:39 +02:00
}
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
}
firefoxModal.addEventListener('shown.bs.modal', shownFirefoxModal)
firefoxModal.addEventListener('hide.bs.modal', hideFirefoxModal)
modalFf.show()
Modal plugin set _isTransitioning after the trigger of hide event
2017-10-10 13:19:39 +02:00
})
Variable transition durations (#25662)
2018-03-13 09:59:20 +01:00
// Test transition duration
var t0, t1;
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
var slowModal = document.getElementById('slowModal')
Variable transition durations (#25662)
2018-03-13 09:59:20 +01:00
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
slowModal.addEventListener('shown.bs.modal', function () {
Variable transition durations (#25662)
2018-03-13 09:59:20 +01:00
t1 = performance.now()
console.log('transition-duration took ' + (t1 - t0) + 'ms.')
})
fix(visual-test): remove jquery in them
2018-06-17 23:09:04 +02:00
slowModal.addEventListener('show.bs.modal', function () {
t0 = performance.now()
})
Update visual tests.
2016-11-12 16:12:58 +01:00
})
</script>
</body>
Adds isolated visual tests for javascript plugins (decoupled from docs). This makes it faster and easier to test/develop js functionality not represented in unit tests, and gives us a playground for interactions, etc. It also makes it so developing javascript is now decoupled form jekyll, which should make everything faster and less painful. This commit also reverts my filter commit https://github.com/twbs/bootstrap/commit/9900771aa7f1b3ddcee49aec84082104776ace70 which broke scrollspy for dropdowns.
2014-06-08 04:11:44 +02:00
</html>
Reference in New Issue Copy Permalink