tor-browser

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

focus-visible-script-focus-001.html (1925B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8" />
      3 <title>CSS Test (Selectors): Script focus without any previous user interaction matches :focus-visible</title>
      4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
      5 <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="/css/support/parsing-testcommon.js"></script>
      9 <style>
     10  #warning {
     11    display: none;
     12    background: red;
     13  }
     14 
     15  @supports not selector(:focus-visible) {
     16    #instructions {
     17      display: none;
     18    }
     19 
     20    #warning {
     21      display: block;
     22    }
     23  }
     24 
     25  :focus-visible {
     26    outline: solid thick green;
     27  }
     28 
     29  :focus:not(:focus-visible) {
     30    background-color: red;
     31  }
     32 </style>
     33 
     34 <p>This test checks that a script focus when the user hasn't interacted with the page yet, always matches <code>:focus-visible</code>.</p>
     35 <ol id="instructions">
     36  <li>If the element that says "Focused" has a red background then the test result is FAILURE, if it has a green outline then the test result is SUCCESS.</li>
     37 </ol>
     38 <p id="warning">Your user-agent does not support <code>:focus-visible</code> pseudo-class, please SKIP this test.</p>
     39 
     40 <div id="target" tabindex="0">Focused</div>
     41 
     42 <script>
     43  // Check that :focus-visible is supported.
     44  test_valid_selector(':focus-visible');
     45 
     46  async_test(function(t) {
     47    target.addEventListener("focus", t.step_func_done(function() {
     48      assert_equals(getComputedStyle(target).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${target.tagName}#${target.id} should be green`);
     49      assert_not_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${target.tagName}#${target.id} should NOT be red`);
     50    }));
     51  }, "Script focus without any previous user interaction matches :focus-visible");
     52 
     53  target.focus();
     54 </script>