tor-browser

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

is-where-pseudo-containing-hard-pseudo-and-never-matching.html (2316B)

      1 <!DOCTYPE html>
      2 <title>CSS Selectors Invalidation: :is and :where selectors containing "hard" selectors and selectors that never match</title>
      3 <link rel="author" title="David Shin" href="dshin@mozilla.com">
      4 <link rel="help" href="https://drafts.csswg.org/selectors/#logical-combination">
      5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1942695">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <style>
      9 .container {
     10  color: grey;
     11 }
     12 
     13 #subject1:is(.container:has(.descendant):focus-within, .never-matches) {
     14  color: red;
     15 }
     16 
     17 #subject2:where(.container:has(.descendant):focus-within, .never-matches) {
     18  color: orangered;
     19 }
     20 
     21 #subject3:is(:nth-child(1 of .container):focus-within, .never-matches) {
     22  color: darkred;
     23 }
     24 
     25 #subject4:where(:nth-child(1 of .container):focus-within, .never-matches) {
     26  color: pink;
     27 }
     28 </style>
     29 <div id="subject1" class="container">
     30  <div class="descendant"></div>
     31  <a id="anchor1" href="#">X</a>
     32 </div>
     33 <div id="subject2" class="container">
     34  <div class="descendant"></div>
     35  <a id="anchor2" href="#">X</a>
     36 </div>
     37 <div>
     38  <div id="subject3" class="container">
     39    <div class="descendant"></div>
     40    <a id="anchor3" href="#">x</a>
     41  </div>
     42 </div>
     43 <div>
     44  <div id="subject4" class="container">
     45    <div class="descendant"></div>
     46    <a id="anchor4" href="#">x</a>
     47  </div>
     48 </div>
     49 <script>
     50 const colors = {
     51  grey: "rgb(128, 128, 128)",
     52  red: "rgb(255, 0, 0)",
     53  orangered: "rgb(255, 69, 0)",
     54  darkred: "rgb(139, 0, 0)",
     55  pink: "rgb(255, 192, 203)",
     56 };
     57 
     58 function run_test(subject, anchor, before, after) {
     59  const beforeColor = colors[before];
     60  test(() => {
     61    assert_equals(getComputedStyle(subject).color, beforeColor);
     62  }, subject.id + " initial color is " + before);
     63 
     64  anchor.focus();
     65  const afterColor = colors[after];
     66  test(() => {
     67    assert_equals(getComputedStyle(subject).color, afterColor);
     68  }, subject.id + " color after focus is " + after);
     69 
     70  anchor.blur();
     71  test(() => {
     72    assert_equals(getComputedStyle(subject).color, beforeColor);
     73  }, subject.id + " color after blur is " + before);
     74 }
     75 
     76 run_test(subject1, anchor1, "grey", "red");
     77 run_test(subject2, anchor2, "grey", "orangered");
     78 run_test(subject3, anchor3, "grey", "darkred");
     79 run_test(subject4, anchor4, "grey", "pink");
     80 </script>