tor-browser

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

state-css-selector-nth-of.html (4989B)

      1 <!DOCTYPE html>
      2 <html>
      3  <head>
      4    <meta charset="utf-8">
      5    <meta name="author" title="Keith Cirkel" href="mailto:wpt@keithcirkel.co.uk" />
      6    <link rel="help" href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-state-pseudo-class" />
      7    <title>:state() css selector applies to nth-of selectors</title>
      8 
      9    <script src="/resources/testharness.js"></script>
     10    <script src="/resources/testharnessreport.js"></script>
     11  </head>
     12  <body>
     13    <custom-state id="myCE">First Element</custom-state>
     14    <p id="mySibling">First Sibling</p>
     15    <custom-state id="myCE2">Second Element</custom-state>
     16    <p id="mySibling2">Second Sibling</p>
     17    <style>
     18      :nth-child(1), :nth-child(2) {
     19        color: #f00;
     20      }
     21      :nth-child(2 of :state(--green)) {
     22        color: #0f0;
     23      }
     24      :nth-child(2 of :state(--green)) + p {
     25        color: #00f;
     26      }
     27    </style>
     28    <script>
     29    customElements.define('custom-state', class extends HTMLElement {
     30      connectedCallback() {
     31        this.elementInternals = this.attachInternals();
     32      }
     33    });
     34 
     35    test(function(t) {
     36        t.add_cleanup(() => { myCE.elementInternals.states.delete('--green') });
     37        t.add_cleanup(() => { myCE2.elementInternals.states.delete('--green') });
     38        assert_false(myCE.elementInternals.states.has('--green'));
     39        assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
     40        assert_equals(getComputedStyle(myCE2).getPropertyValue('color'), 'rgb(255, 0, 0)');
     41        assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
     42        assert_equals(getComputedStyle(mySibling2).getPropertyValue('color'), 'rgb(255, 0, 0)');
     43        myCE.elementInternals.states.add('--green');
     44        assert_true(myCE.elementInternals.states.has('--green'));
     45        assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
     46        assert_equals(getComputedStyle(myCE2).getPropertyValue('color'), 'rgb(255, 0, 0)');
     47        assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
     48        assert_equals(getComputedStyle(mySibling2).getPropertyValue('color'), 'rgb(255, 0, 0)');
     49        myCE2.elementInternals.states.add('--green');
     50        assert_true(myCE2.elementInternals.states.has('--green'));
     51        assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
     52        assert_equals(getComputedStyle(myCE2).getPropertyValue('color'), 'rgb(0, 255, 0)');
     53        assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
     54        assert_equals(getComputedStyle(mySibling2).getPropertyValue('color'), 'rgb(0, 0, 255)');
     55    }, "state selector has influence on nth-of when state is applied");
     56 
     57    test(function(t) {
     58        t.add_cleanup(() => { myCE.elementInternals.states.delete('--foo') });
     59        t.add_cleanup(() => { myCE2.elementInternals.states.delete('--foo') });
     60        myCE.elementInternals.states.add('--foo');
     61        myCE2.elementInternals.states.add('--foo');
     62        assert_false(myCE.elementInternals.states.has('--green'));
     63        assert_true(myCE.elementInternals.states.has('--foo'));
     64        assert_false(myCE2.elementInternals.states.has('--green'));
     65        assert_true(myCE2.elementInternals.states.has('--foo'));
     66        assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
     67        assert_equals(getComputedStyle(myCE2).getPropertyValue('color'), 'rgb(255, 0, 0)');
     68        assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
     69        assert_equals(getComputedStyle(mySibling2).getPropertyValue('color'), 'rgb(255, 0, 0)');
     70    }, "state selector only applies on given ident");
     71 
     72    test(function(t) {
     73        myCE.elementInternals.states.add('--green');
     74        myCE.elementInternals.states.add('--foo');
     75        myCE2.elementInternals.states.add('--green');
     76        myCE2.elementInternals.states.add('--foo');
     77        assert_true(myCE.elementInternals.states.has('--green'));
     78        assert_true(myCE.elementInternals.states.has('--foo'));
     79        assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
     80        assert_equals(getComputedStyle(myCE2).getPropertyValue('color'), 'rgb(0, 255, 0)');
     81        assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
     82        assert_equals(getComputedStyle(mySibling2).getPropertyValue('color'), 'rgb(0, 0, 255)');
     83        myCE.elementInternals.states.clear();
     84        assert_equals(getComputedStyle(myCE).getPropertyValue('color'), 'rgb(255, 0, 0)');
     85        assert_equals(getComputedStyle(myCE2).getPropertyValue('color'), 'rgb(255, 0, 0)');
     86        assert_equals(getComputedStyle(mySibling).getPropertyValue('color'), 'rgb(255, 0, 0)');
     87        assert_equals(getComputedStyle(mySibling2).getPropertyValue('color'), 'rgb(255, 0, 0)');
     88    }, "style is invalided on clear()");
     89 
     90    </script>
     91  </body>
     92 </html>