Bootstrap/js/tests/visual/button.html

<!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>Button</title>
  </head>
  <body>
    <div class="container">
      <h1>Button <small>Bootstrap Visual Test</small></h1>

      <button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off">
        Single toggle
      </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><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">
          <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
        </label>
        <label class="btn btn-primary">
          <input type="checkbox" autocomplete="off"> Checkbox 2
        </label>
        <label class="btn btn-primary">
          <input type="checkbox" autocomplete="off"> Checkbox 3
        </label>
      </div>

      <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">
          <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
        </label>
        <label class="btn btn-primary">
          <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
        </label>
        <label class="btn btn-primary">
          <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
        </label>
      </div>
    </div>

    <script src="../../../dist/js/bootstrap.bundle.js"></script>
  </body>
</html>
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">`
Remove the now unneeded `shrink-to-fit` directive. (#28314) 2019-02-27 16:47:41 +01:00			`<meta name="viewport" content="width=device-width, initial-scale=1">`
Move `href` attribute first (#31835) 2020-10-22 08:38:15 +02:00			`<link href="../../../dist/css/bootstrap.min.css" rel="stylesheet">`
Update visual tests. 2016-11-12 16:12:58 +01:00			`<title>Button</title>`
			`</head>`
			`<body>`
			`<div class="container">`
			`<h1>Button <small>Bootstrap Visual Test</small></h1>`

Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests 2020-07-22 21:33:11 +02:00			`<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off">`
Update visual tests. 2016-11-12 16:12:58 +01:00			`Single toggle`
			`</button>`

			`<p>For checkboxes and radio buttons, ensure that keyboard behavior is functioning correctly.</p>`
Docs: standardize usage of `<kbd>` 2022-10-10 21:15:43 +02:00			`<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>`
Update visual tests. 2016-11-12 16:12:58 +01:00
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests 2020-07-22 21:33:11 +02:00			`<div class="btn-group" data-bs-toggle="buttons">`
Update visual tests. 2016-11-12 16:12:58 +01:00			`<label class="btn btn-primary active">`
			`<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)`
			`</label>`
			`<label class="btn btn-primary">`
			`<input type="checkbox" autocomplete="off"> Checkbox 2`
			`</label>`
			`<label class="btn btn-primary">`
			`<input type="checkbox" autocomplete="off"> Checkbox 3`
			`</label>`
			`</div>`

Docs: standardize usage of `<kbd>` 2022-10-10 21:15:43 +02:00			<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>
Update visual tests. 2016-11-12 16:12:58 +01:00
Add `bs` in data attributes - Add `bs` in data APIs everywhere - Update unit tests 2020-07-22 21:33:11 +02:00			`<div class="btn-group" data-bs-toggle="buttons">`
Update visual tests. 2016-11-12 16:12:58 +01:00			`<label class="btn btn-primary active">`
			`<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)`
			`</label>`
			`<label class="btn btn-primary">`
			`<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2`
			`</label>`
			`<label class="btn btn-primary">`
			`<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3`
			`</label>`
			`</div>`
			`</div>`

Fix visual tests (#35585) * Fix visual tests They broke in #34509 * load bundle.js in visual tests Co-authored-by: GeoSot <geo.sotis@gmail.com> 2022-01-30 15:12:24 +01:00			`<script src="../../../dist/js/bootstrap.bundle.js"></script>`
Update visual tests. 2016-11-12 16:12:58 +01:00			`</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>`