--- js/tests/visual/.eslintrc.json | 19 +++ js/tests/visual/alert.html | 48 +++++++ js/tests/visual/button.html | 49 ++++++++ js/tests/visual/carousel.html | 65 ++++++++++ js/tests/visual/collapse.html | 76 ++++++++++++ js/tests/visual/dropdown.html | 205 ++++++++++++++++++++++++++++++ js/tests/visual/modal.html | 275 +++++++++++++++++++++++++++++++++++++++++ js/tests/visual/popover.html | 41 ++++++ js/tests/visual/scrollspy.html | 91 ++++++++++++++ js/tests/visual/tab.html | 223 +++++++++++++++++++++++++++++++++ js/tests/visual/toast.html | 70 +++++++++++ js/tests/visual/tooltip.html | 138 +++++++++++++++++++++ 12 files changed, 1300 insertions(+) create mode 100644 js/tests/visual/.eslintrc.json create mode 100644 js/tests/visual/alert.html create mode 100644 js/tests/visual/button.html create mode 100644 js/tests/visual/carousel.html create mode 100644 js/tests/visual/collapse.html create mode 100644 js/tests/visual/dropdown.html create mode 100644 js/tests/visual/modal.html create mode 100644 js/tests/visual/popover.html create mode 100644 js/tests/visual/scrollspy.html create mode 100644 js/tests/visual/tab.html create mode 100644 js/tests/visual/toast.html create mode 100644 js/tests/visual/tooltip.html (limited to 'js/tests/visual') diff --git a/js/tests/visual/.eslintrc.json b/js/tests/visual/.eslintrc.json new file mode 100644 index 0000000..8a33225 --- /dev/null +++ b/js/tests/visual/.eslintrc.json @@ -0,0 +1,19 @@ +{ + "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/alert.html b/js/tests/visual/alert.html new file mode 100644 index 0000000..2433b9e --- /dev/null +++ b/js/tests/visual/alert.html @@ -0,0 +1,48 @@ + + + + + + + Alert + + +

Alert Bootstrap Visual Test

+ +

+ + Holy guacamole! You should check in on some of those fields below. +

+ +

+ Oh snap! Change a few things up and try submitting again. +

+ + +

+ +

+ Oh snap! Change a few things up and try submitting again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. +

+ + +

+ +

+ + This alert will take 5 seconds to fade out. +

+ + + + diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html new file mode 100644 index 0000000..0c54934 --- /dev/null +++ b/js/tests/visual/button.html @@ -0,0 +1,49 @@ + + + + + + + Button + + +

Button Bootstrap Visual Test

+ + + +

For checkboxes and radio buttons, ensure that keyboard behavior is functioning correctly.

Navigate to the checkboxes with the keyboard (generally, using TAB / SHIFT + TAB), and ensure that SPACE 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 SPACE toggles the checkbox again.

+ +

+ + Checkbox 1 (pre-checked) + + + Checkbox 2 + + + Checkbox 3 + +

+ +

Navigate to the radio button group with the keyboard (generally, using TAB / SHIFT + TAB). 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 TAB or "backwards" using SHIFT + TAB). 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 ← and → 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 ← and → change the selected radio button again.

+ +

+ + Radio 1 (preselected) + + + Radio 2 + + + Radio 3 + +

+ + + + diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html new file mode 100644 index 0000000..153c866 --- /dev/null +++ b/js/tests/visual/carousel.html @@ -0,0 +1,65 @@ + + + + + + + Carousel + + + +

Carousel Bootstrap Visual Test

+ +

The transition duration should be around 2s. Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.

+ +

+ + + +

+ + +

+ + + + + diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html new file mode 100644 index 0000000..2782c56 --- /dev/null +++ b/js/tests/visual/collapse.html @@ -0,0 +1,76 @@ + + + + + + + Collapse + + +

Collapse Bootstrap Visual Test

+ +

+ + Collapsible Group Item #1 + +

+ +

+ 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. +

+ + Collapsible Group Item #2 + +

+ + Collapsible Group Item #3 + +

+ + Collapsible Group Item with XSS in data-bs-parent + +

+ + + + diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html new file mode 100644 index 0000000..04cf06d --- /dev/null +++ b/js/tests/visual/dropdown.html @@ -0,0 +1,205 @@ + + + + + + + Dropdown + + +

Dropdown Bootstrap Visual Test

+ + + +

+ Active +
+ Link +
+ Link +
+ Dropdown +
- Action
- Another action
- Something else here
+

+ +

+ + + +

+ +

+ + +

+ +

+ + +

+ +

+ Dropup split align end + + +

+ + +

+ +

+ Dropend split + + +

+ + +

+ +

+ Dropstart split + + +

+ + +

+ +

+ + + + diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html new file mode 100644 index 0000000..b738d9e --- /dev/null +++ b/js/tests/visual/modal.html @@ -0,0 +1,275 @@ + + + + + + + Modal + + + + + +

Modal Bootstrap Visual Test

+ +

Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

+ +

Popover in a modal

This should trigger a popover on click.

+ + +

Tooltips in a modal

This link and that link should have tooltips on hover.

+ +

+ + Collapsible Group Item #1 + +

+ +

+ + Collapsible Group Item #2 + +

+ + Collapsible Group Item #3 + +

+ +

Overflowing text to show scroll behavior

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.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

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.

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.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

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.

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.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

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.

+ +

+ + + + + + + + + +

+ + + (See Issue #18365) + +

+ + + +

+ + + + + +

+ + +

+ + + + + diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html new file mode 100644 index 0000000..73edf99 --- /dev/null +++ b/js/tests/visual/popover.html @@ -0,0 +1,41 @@ + + + + + + + Popover + + +

Popover Bootstrap Visual Test

+ + + + + + + + + + +

+ + + + + diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html new file mode 100644 index 0000000..2daa7ab --- /dev/null +++ b/js/tests/visual/scrollspy.html @@ -0,0 +1,91 @@ + + + + + + + Scrollspy + + + + +

@fat

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.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Final section

Ad leggings keytar, brunch id art party dolor labore.

+ + + + diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html new file mode 100644 index 0000000..4cbc86c --- /dev/null +++ b/js/tests/visual/tab.html @@ -0,0 +1,223 @@ + + + + + + + Tab + + + +

Tab Bootstrap Visual Test

+ +

Tabs without fade

+ +

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

+ +

Tabs with fade

+ +

Tabs without fade (no initially active pane)

+ +

Tabs with fade (no initially active pane)

+ +

Tabs with nav and using links (with fade)

+ + +

+ +

Tabs with list-group (with fade)

+ + + + +

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

+ + + + diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html new file mode 100644 index 0000000..f86926d --- /dev/null +++ b/js/tests/visual/toast.html @@ -0,0 +1,70 @@ + + + + + + + Toast + + + +

Toast Bootstrap Visual Test

+ +

+ + +

+ +

+ Hello, world! This is a toast message with autohide in 2 seconds +

+ +

+ Heads up, toasts will stack automatically +

+ + + + + diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html new file mode 100644 index 0000000..1a3b9f2 --- /dev/null +++ b/js/tests/visual/tooltip.html @@ -0,0 +1,138 @@ + + + + + + + Tooltip + + + +

Tooltip Bootstrap Visual Test

+ +

Tight pants next level keffiyeh you probably 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 have 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 whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

+ +

+ + + + + +

+ + + + +

+ +

Test Selector triggered tooltips

+ + +

+ +

+ + + + + + + + -- cgit v1.2.3