tor-browser

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

required-optional-hidden.html (1305B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>Selector: pseudo-classes (:required, :optional) for hidden input</title>
      4 <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
      5 <link rel="help" href="https://html.spec.whatwg.org/multipage/#pseudo-classes">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <style>
      9  span {
     10    color: red;
     11    background-color: pink;
     12  }
     13  :required + span {
     14    color: green;
     15  }
     16  :not(:optional) + span {
     17    background-color: lime;
     18  }
     19 </style>
     20 <input id="hiddenInput" type="hidden" required>
     21 <span id="sibling">This text should be green on lime background.</span>
     22 <script>
     23  test(() => {
     24    assert_equals(getComputedStyle(sibling).color, "rgb(255, 0, 0)",
     25      "Not matching :required for type=hidden");
     26    assert_equals(getComputedStyle(sibling).backgroundColor, "rgb(255, 192, 203)",
     27      "Matching :optional for type=hidden");
     28 
     29    hiddenInput.type = "text";
     30 
     31    assert_equals(getComputedStyle(sibling).color, "rgb(0, 128, 0)",
     32      "Matching :required for type=text");
     33    assert_equals(getComputedStyle(sibling).backgroundColor, "rgb(0, 255, 0)",
     34      "Matching :not(:optional) for type=text");
     35  }, "Evaluation of :required and :optional changes for input type change.");
     36 </script>