tor-browser

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

has-css-nesting-shared.html (2631B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>:has() invalidation with nesting where the selector is shared</title>
      4 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <link rel="help" href="https://drafts.csswg.org/selectors/#relational">
      8 <style>
      9 div, main { color: grey }
     10 #outer1:has(.test) {
     11  & #subject1_1 {
     12    color: red;
     13  }
     14  & + #subject1_2 {
     15    color: orangered;
     16  }
     17 }
     18 
     19 #outer2:has(.test) {
     20  & .ancestor {
     21    & #subject2_1 {
     22      color: green;
     23    }
     24    & + #subject2_2 {
     25      color: lightgreen;
     26    }
     27  }
     28 }
     29 
     30 #outer3:is(:has(.test) .outer) {
     31  & #subject3_1 {
     32    color: blue;
     33  }
     34  & + #subject3_2 {
     35    color: skyblue;
     36  }
     37 }
     38 </style>
     39 <main id="main">
     40  <div>
     41    <div id="outer1">
     42      <div id="trigger1"></div>
     43      <div id="subject1_1"></div>
     44    </div>
     45    <div id="subject1_2"></div>
     46  </div>
     47  <div id="outer2">
     48    <div id="trigger2"></div>
     49    <div class="ancestor">
     50      <div id="subject2_1"></div>
     51    </div>
     52    <div id="subject2_2"></div>
     53  </div>
     54  <div id="trigger3">
     55    <div id="outer3" class="outer">
     56      <div id="subject3_1"></div>
     57    </div>
     58    <div id="subject3_2"></div>
     59  </div>
     60 </main>
     61 <script>
     62 const grey = 'rgb(128, 128, 128)';
     63 const red = 'rgb(255, 0, 0)';
     64 const orangered = 'rgb(255, 69, 0)';
     65 const green = 'rgb(0, 128, 0)';
     66 const lightgreen = 'rgb(144, 238, 144)';
     67 const blue = 'rgb(0, 0, 255)';
     68 const skyblue = 'rgb(135, 206, 235)';
     69 
     70 const colors = {
     71  red: {
     72    descendant: red,
     73    sibling: orangered,
     74  },
     75  green: {
     76    descendant: green,
     77    sibling: lightgreen,
     78  },
     79  blue: {
     80    descendant: blue,
     81    sibling: skyblue,
     82  },
     83 };
     84 
     85 function testColor(testName, element, color) {
     86  test(function() {
     87    assert_equals(getComputedStyle(element).color, color);
     88  }, testName);
     89 }
     90 
     91 function testClassChange(trigger, targetDescendant, targetSibling, expected)
     92 {
     93  trigger.classList.add('test');
     94  testColor(`add .test to ${trigger.id} - check ${targetDescendant.id}`, targetDescendant, colors[expected].descendant);
     95  testColor(`add .test to ${trigger.id} - check ${targetSibling.id}`, targetSibling, colors[expected].sibling);
     96  trigger.classList.remove('test');
     97  testColor(`remove .test from ${trigger.id} - check ${targetDescendant.id}`, targetDescendant, grey);
     98  testColor(`remove .test from ${trigger.id} - check ${targetSibling.id}`, targetSibling, grey);
     99 }
    100 
    101 testClassChange(trigger1, subject1_1, subject1_2, 'red');
    102 testClassChange(trigger2, subject2_1, subject2_2, 'green');
    103 testClassChange(trigger3, subject3_1, subject3_2, 'blue');
    104 
    105 </script>