summaryrefslogtreecommitdiffstats
path: root/js/tests/visual
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2023-06-24 12:44:40 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2023-06-24 12:44:49 +0000
commitdb46bfc03f3a22752ef6bd91ae577d893872a216 (patch)
tree89d924513bc95e6bac4dc8e26f0da84caa477b7b /js/tests/visual
parentReleasing debian version 5.2.3+dfsg-8. (diff)
downloadbootstrap-html-db46bfc03f3a22752ef6bd91ae577d893872a216.tar.xz
bootstrap-html-db46bfc03f3a22752ef6bd91ae577d893872a216.zip
Merging upstream version 5.3.0+dfsg.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'js/tests/visual')
-rw-r--r--js/tests/visual/.eslintrc.json19
-rw-r--r--js/tests/visual/button.html4
-rw-r--r--js/tests/visual/carousel.html2
-rw-r--r--js/tests/visual/input.html78
-rw-r--r--js/tests/visual/modal.html2
-rw-r--r--js/tests/visual/scrollspy.html9
-rw-r--r--js/tests/visual/toast.html2
-rw-r--r--js/tests/visual/tooltip.html2
8 files changed, 93 insertions, 25 deletions
diff --git a/js/tests/visual/.eslintrc.json b/js/tests/visual/.eslintrc.json
deleted file mode 100644
index 8a33225..0000000
--- a/js/tests/visual/.eslintrc.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
- "plugins": [
- "html"
- ],
- "extends": "../../../.eslintrc.json",
- "parserOptions": {
- "sourceType": "module"
- },
- "settings": {
- "html/html-extensions": [
- ".html"
- ]
- },
- "rules": {
- "no-console": "off",
- "no-new": "off",
- "unicorn/no-array-for-each": "off"
- }
-}
diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html
index 0c54934..47c5088 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">
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index 153c866..1b2de52 100644
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -55,7 +55,7 @@
// Test to show that transition-duration can be changed with css
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', () => {
t0 = performance.now()
diff --git a/js/tests/visual/input.html b/js/tests/visual/input.html
new file mode 100644
index 0000000..1e5eec2
--- /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 b738d9e..09d4233 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -264,7 +264,7 @@
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', () => {
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index 2daa7ab..5410284 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -29,6 +29,7 @@
<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,6 +83,14 @@
<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>
diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
index f86926d..e64fd1d 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">
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index 1a3b9f2..09144b5 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>