tor-browser

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

focus-visible-020.html (2320B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8" />
      3 <title>CSS Test (Selectors): :focus-visible doesn't match on ShadowRoot</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  #host:focus-visible {
     26    outline: 0;
     27    background-color: red;
     28  }
     29 </style>
     30 
     31 <p>This test checks that <code>:focus-visible</code> doesn't math on ShadowRoot.</p>
     32 <ol id="instructions">
     33  <li>The input should be focused on load, if it's not focused, focus it via mouse or keyboard.</li>
     34  <li>If you see no red the test result is SUCCESS.</li>
     35 </ol>
     36 <p id="warning">Your user-agent does not support <code>:focus-visible</code> pseudo-class, please SKIP this test.</p>
     37 
     38 <div id="host" style="height: 100px;"></div>
     39 
     40 <script>
     41  const shadowRoot = host.attachShadow({mode: 'open', delegatesFocus: true});
     42  shadowRoot.innerHTML = '<input id="target" autofocus value="Focus me">';
     43 
     44  // Check that :focus-visible is supported.
     45  test_valid_selector(':focus-visible');
     46 
     47  async_test((t) => {
     48    host.focus();
     49    window.requestAnimationFrame(t.step_func_done(() => {
     50      assert_not_equals(getComputedStyle(host).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${host.tagName}#${host.id} should NOT be red`);
     51 
     52      let focusVisiblePseudoAll = document.querySelectorAll(':focus-visible');
     53      assert_equals(focusVisiblePseudoAll.length, 0, "No element matches ':focus-visible'");
     54 
     55      let focusVisibleShadowDOMPseudoAll = shadowRoot.querySelectorAll(':focus-visible');
     56      assert_equals(focusVisibleShadowDOMPseudoAll.length, 1, "Only one element matches ':focus-visible' in the Shadow DOM");
     57 
     58      let target = shadowRoot.getElementById("target");
     59      assert_equals(target, focusVisibleShadowDOMPseudoAll[0], "${target.tagName}#${target.id} matches ':focus-visible'");
     60    }));
     61  }, ":focus-visible doesn't match on ShadowRoot");
     62 </script>