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, shrink-to-fit=no">
    <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
    <title>Button</title>
  </head>
  <body>
    <div class="container">
      <h1>Button <small>Bootstrap Visual Test</small></h1>

      <button type="button" class="btn btn-primary" data-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>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>

      <div class="btn-group" data-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>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>

      <div class="btn-group" data-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="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="../../dist/dom/eventHandler.js"></script>
    <script src="../../dist/dom/manipulator.js"></script>
    <script src="../../dist/dom/selectorEngine.js"></script>
    <script src="../../dist/dom/data.js"></script>
    <script src="../../dist/util.js"></script>
    <script src="../../dist/button.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">`
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>Button</title>`
			`</head>`
			`<body>`
			`<div class="container">`
			`<h1>Button <small>Bootstrap Visual Test</small></h1>`

			`<button type="button" class="btn btn-primary" data-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>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>`

			`<div class="btn-group" data-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>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>

			`<div class="btn-group" data-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>`

tests: use jQuery from node_modules. (#28059) 2019-01-15 17:01:40 +01:00			`<script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>`
alert without jquery 2017-08-21 09:11:37 +02:00			`<script src="../../dist/dom/eventHandler.js"></script>`
Add Manipulator object to add shortcuts for dom manipulations 2017-09-05 14:35:52 +02:00			`<script src="../../dist/dom/manipulator.js"></script>`
button without jquery 2017-08-21 13:49:41 +02:00			`<script src="../../dist/dom/selectorEngine.js"></script>`
			`<script src="../../dist/dom/data.js"></script>`
Update visual tests. 2016-11-12 16:12:58 +01:00			`<script src="../../dist/util.js"></script>`
			`<script src="../../dist/button.js"></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>`