tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

focusVisible.html (2215B)

      1 <!doctype html>
      2 
      3 <title>focus(options) - focusVisible</title>
      4 <script src=/resources/testharness.js></script>
      5 <script src=/resources/testharnessreport.js></script>
      6 <script src="/resources/testdriver.js"></script>
      7 <script src="/resources/testdriver-actions.js"></script>
      8 <script src="/resources/testdriver-vendor.js"></script>
      9 
     10 <style>
     11  div {
     12    height: 10px;
     13    border: 1px solid black;
     14  }
     15 </style>
     16 
     17 <button>ABC</button>
     18 <input>
     19 <div id="contenteditable" contenteditable></div>
     20 <div id="tabindex" tabindex=0></div>
     21 <div id="not_focusable"></div>
     22 
     23 <div id="reset_focus" tabindex=0></div>
     24 
     25 <script>
     26 const reset_focus = document.getElementById("reset_focus");
     27 
     28 async function check_focus_visible(element, options, { shouldBeVisible, shouldBeFocused }) {
     29  // Reset focus by clicking on a div, which should not show focus rings.
     30  await test_driver.click(reset_focus);
     31 
     32  assert_equals(document.activeElement, reset_focus, "Reset should be focused");
     33  assert_true(reset_focus.matches(":focus"), "Clicking focusable div should match :focus");
     34  assert_false(reset_focus.matches(":focus-visible"), "Clicking focusable div shouldn't match :focus-visible");
     35 
     36  element.focus(options);
     37 
     38  assert_equals(document.activeElement, shouldBeFocused ? element : reset_focus, "activeElement");
     39  assert_equals(element.matches(":focus"), shouldBeFocused, ":focus");
     40  assert_equals(element.matches(":focus-visible"), shouldBeVisible, ":focus-visible");
     41 }
     42 
     43 for (let selector of ["button", "input", "#contenteditable", "#tabindex", "#not_focusable"]) {
     44  promise_test(async function() {
     45    const takesKeyboardInput = selector == "#contenteditable" || selector == "input";
     46    const shouldBeFocused = selector != "#not_focusable";
     47 
     48    const element = document.querySelector(selector);
     49 
     50    await check_focus_visible(element, {}, {
     51      shouldBeVisible: takesKeyboardInput,
     52      shouldBeFocused,
     53    });
     54 
     55    await check_focus_visible(element, { focusVisible: true }, {
     56      shouldBeVisible: shouldBeFocused,
     57      shouldBeFocused,
     58    });
     59    await check_focus_visible(element, { focusVisible: false }, {
     60      shouldBeVisible: false,
     61      shouldBeFocused,
     62    });
     63  }, "FocusOptions.focusVisible: " + selector);
     64 }
     65 </script>