tor-browser

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

test_CSSStyleRule_getScopeRootFor.html (6028B)

      1 <!DOCTYPE html>
      2 <!--
      3 https://bugzilla.mozilla.org/show_bug.cgi?id=1894251
      4 -->
      5 <title>Test for CSSStyleRule::getScopeRootFor with @scope</title>
      6 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
      7 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
      8 
      9 <main id=main></main>
     10 
     11 <template id=test_unscoped>
     12  <style id=s>
     13    .a .b .c .d {
     14        color: green;
     15    }
     16  </style>
     17  <div class=a>
     18    <div class=b>
     19      <div id=notMatching class=c>
     20        <div id=matching class=d></div>
     21      </div>
     22    </div>
     23  </div>
     24 </template>
     25 <script>
     26 add_task(async () => {
     27  SimpleTest.registerCurrentTaskCleanupFunction(async () => main.replaceChildren());
     28  main.append(test_unscoped.content.cloneNode(true));
     29 
     30  const unscopedRule = s.sheet.cssRules[0];
     31 
     32  const scopeRootForNotMatching = unscopedRule.getScopeRootFor(0, notMatching);
     33  const scopeRootForMatching = unscopedRule.getScopeRootFor(0, matching);
     34  
     35  is(scopeRootForNotMatching, null, "Scope root for element not matching unscoped rule is null");
     36  is(scopeRootForMatching, null, "Scope root for element matching unscoped rule is null");
     37 });
     38 </script>
     39 
     40 <template id=test_scoped_explicit_simple>
     41  <style id=s>
     42    @scope(.a) {
     43      > #b {
     44        color: green;
     45      }
     46 
     47      #c {
     48        color: red;
     49      }
     50    }
     51  </style>
     52  <div id=root class=a>
     53    <div id=b></div>
     54    <div><div><div id=c></div></div></div>
     55  </div>
     56 </template>
     57 <script>
     58 add_task(async () => {
     59  SimpleTest.registerCurrentTaskCleanupFunction(async () => main.replaceChildren());
     60  main.append(test_scoped_explicit_simple.content.cloneNode(true));
     61 
     62  const scopeRule = s.sheet.cssRules[0];
     63  const bRule = scopeRule.cssRules[0];
     64  const cRule = scopeRule.cssRules[1];
     65 
     66  const cScopeRootWithBRule = bRule.getScopeRootFor(0, c);
     67  const bScopeRootWithCRule = cRule.getScopeRootFor(0, b);
     68  
     69  is(cScopeRootWithBRule, null, "Scope root for #b scoped rule with #c is null");
     70  is(bScopeRootWithCRule, null, "Scope root for #c scoped rule with #b is null");
     71 
     72  const bScopeRoot = bRule.getScopeRootFor(0, b);
     73  const cScopeRoot = cRule.getScopeRootFor(0, c);
     74 
     75  is(bScopeRoot, root, "Scope root for #b is #root");
     76  is(cScopeRoot, root, "Scope root for #c is #root");
     77 });
     78 </script>
     79 
     80 <template id=test_scoped_implicit>
     81  <div id=root>
     82    <style id=s>
     83      @scope {
     84        > #b {
     85          color: green;
     86        }
     87 
     88        #c {
     89          color: red;
     90        }
     91      }
     92    </style>
     93    <div id=b></div>
     94    <div><div><div id=c></div></div></div>
     95  </div>
     96 </template>
     97 <script>
     98 add_task(async () => {
     99  SimpleTest.registerCurrentTaskCleanupFunction(async () => main.replaceChildren());
    100  main.append(test_scoped_implicit.content.cloneNode(true));
    101 
    102  const scopeRule = s.sheet.cssRules[0];
    103  const bRule = scopeRule.cssRules[0];
    104  const cRule = scopeRule.cssRules[1];
    105 
    106  const cScopeRootWithBRule = bRule.getScopeRootFor(0, c);
    107  const bScopeRootWithCRule = cRule.getScopeRootFor(0, b);
    108  
    109  is(cScopeRootWithBRule, null, "Scope root for #b scoped rule with #c is null");
    110  is(bScopeRootWithCRule, null, "Scope root for #c scoped rule with #b is null");
    111 
    112  const bScopeRoot = bRule.getScopeRootFor(0, b);
    113  const cScopeRoot = cRule.getScopeRootFor(0, c);
    114 
    115  is(bScopeRoot, root, "Implicit scope root for #b is #root");
    116  is(cScopeRoot, root, "Implicit scope root for #c is #root");
    117 });
    118 </script>
    119 
    120 <template id=test_scoped_explicit_with_end>
    121  <style id=s>
    122    @scope(.a) to (.b) {
    123      .c {
    124        color: green;
    125      }
    126    }
    127  </style>
    128  <div id=root class=a>
    129    <div id=inScope class=c></div>
    130    <div class=b>
    131      <div id=outOfScope class=c></div>
    132    </div>
    133  </div>
    134 </template>
    135 <script>
    136 add_task(async () => {
    137  SimpleTest.registerCurrentTaskCleanupFunction(async () => main.replaceChildren());
    138  main.append(test_scoped_explicit_with_end.content.cloneNode(true));
    139 
    140  const scopeRule = s.sheet.cssRules[0];
    141  const cRule = scopeRule.cssRules[0];
    142 
    143  const inScopeRoot = cRule.getScopeRootFor(0, inScope);
    144  const outOfScopeRoot = cRule.getScopeRootFor(0, outOfScope);
    145 
    146  is(inScopeRoot, root, "#inScope finds the root");
    147  is(outOfScopeRoot, null, "#outOfScope is out of scope due to scope-end selector");
    148 });
    149 </script>
    150 
    151 <template id=test_scoped_different_roots>
    152  <style id=s>
    153    @scope(.a) {
    154      :scope:not(.b) > .c {
    155        color: green;
    156      }
    157      :scope.b .c {
    158        color: red;
    159      }
    160    }
    161  </style>
    162  <div id=root1 class=a>
    163    <div id=e1 class=c></div>
    164    <div id=root2 class="a b">
    165      <div id=e2 class=c></div>
    166    </div>
    167  </div>
    168 </template>
    169 <script>
    170 add_task(async () => {
    171  SimpleTest.registerCurrentTaskCleanupFunction(async () => main.replaceChildren());
    172  main.append(test_scoped_different_roots.content.cloneNode(true));
    173 
    174  const scopeRule = s.sheet.cssRules[0];
    175  const root1Rule = scopeRule.cssRules[0];
    176  const root2Rule = scopeRule.cssRules[1];
    177 
    178  const e1ScopeRoot = root1Rule.getScopeRootFor(0, e1);
    179  const e2ScopeRoot = root2Rule.getScopeRootFor(0, e2);
    180 
    181  is(e1ScopeRoot, root1, "Scope root of #e1 is #root1");
    182  is(e2ScopeRoot, root2, "Scope root of #e2 is #root2");
    183 });
    184 </script>
    185 
    186 <template id=test_scoped_different_roots_different_selectors>
    187  <style id=s>
    188    @scope(.a) {
    189      :scope > .c, :scope > .b > .c  {
    190        color: green;
    191      }
    192    }
    193  </style>
    194  <div id=root2 class=a>
    195    <div id=root1 class="a b">
    196      <div id=e class=c></div>
    197    </div>
    198  </div>
    199 </template>
    200 <script>
    201 add_task(async () => {
    202  SimpleTest.registerCurrentTaskCleanupFunction(async () => main.replaceChildren());
    203  main.append(test_scoped_different_roots_different_selectors.content.cloneNode(true));
    204 
    205  const scopeRule = s.sheet.cssRules[0];
    206  const styleRule = scopeRule.cssRules[0];
    207 
    208  const scopeRootForSelector0 = styleRule.getScopeRootFor(0, e);
    209  const scopeRootForSelector1 = styleRule.getScopeRootFor(1, e);
    210 
    211  is(scopeRootForSelector0, root1, "Scope root of #e given selector 0 is #root1");
    212  is(scopeRootForSelector1, root2, "Scope root of #e given selector 1 is #root1");
    213 
    214 });
    215 </script>