tor-browser

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

has-unstyled.html (2133B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Selector Invalidation: :has() affected by unstyled elements</title>
      4 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
      5 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <link rel="help" href="https://drafts.csswg.org/selectors/#relational">
      9 <style>
     10 div, main { color: grey }
     11 .none { display: none; }
     12 #subject:has(.test) { color: red; }
     13 #subject:has(~ #sibling .test) { color: green; }
     14 #subject:has(:is(.test_inner #subject_descendant)) { color: blue; }
     15 #subject:has(~ #sibling :is(.test_inner #sibling_descendant)) { color: yellow; }
     16 </style>
     17 
     18 <main id=main>
     19  <div id=subject>
     20    <div id=subject_child class="none">
     21      <div id=subject_descendant></div>
     22    </div>
     23  </div>
     24  <div id=sibling class="none">
     25    <div id=sibling_child>
     26      <div id=sibling_descendant></div>
     27    </div>
     28  </div>
     29 </main>
     30 
     31 <script>
     32 const grey = 'rgb(128, 128, 128)';
     33 const red = 'rgb(255, 0, 0)';
     34 const green = 'rgb(0, 128, 0)';
     35 const blue = 'rgb(0, 0, 255)';
     36 const yellow = "rgb(255, 255, 0)";
     37 const colors = {
     38  grey: {
     39    classTest: grey,
     40  },
     41  red: {
     42    classTest: red,
     43  },
     44  green: {
     45    classTest: green,
     46  },
     47  blue: {
     48    classTest: blue,
     49  },
     50  yellow: {
     51    classTest: yellow,
     52  },
     53 };
     54 
     55 function testColor(test_name, color) {
     56    test(function() {
     57        assert_equals(getComputedStyle(subject).color, color);
     58    }, test_name);
     59 }
     60 
     61 function testClassChange(element, cls, expectedColorName)
     62 {
     63    const expectedColorForClassTest = colors[expectedColorName].classTest;
     64    element.classList.add(cls);
     65    testColor(`add ${cls} to ${element.id}`, expectedColorForClassTest);
     66    element.classList.remove(cls);
     67    testColor(`remove ${cls} from ${element.id}`, grey);
     68 }
     69 
     70 testColor('Initial color', grey);
     71 
     72 testClassChange(subject_descendant, 'test', 'red');
     73 testClassChange(sibling_descendant, 'test', 'green');
     74 testClassChange(subject_child, 'test_inner', 'blue');
     75 testClassChange(sibling_child, 'test_inner', 'yellow');
     76 
     77 </script>