tor-browser

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

test_selectormatcheselement_scope.html (5033B)

      1 <!DOCTYPE HTML>
      2 <!--
      3 https://bugzilla.mozilla.org/show_bug.cgi?id=1934914a
      4 -->
      5 <title>Test for CSSStyleRule::selectorMatchesElement with @scope</title>
      6 <script src="/tests/SimpleTest/SimpleTest.js"></script>
      7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
      8 <script>
      9 const InspectorUtils = SpecialPowers.InspectorUtils;
     10 </script>
     11 
     12 <main id=main></main>
     13 <template id=test_scope_explicit_nesting_outside>
     14  <style>
     15    .a {
     16      .b {
     17        @scope (.c) to (& .foo) {
     18          .d {
     19            .e {
     20              @scope (.f) to (:scope .bar) {
     21                .g {
     22                  .h {
     23                    color: red;
     24                  }
     25                }
     26              }
     27            }
     28          }
     29        }
     30      }
     31    }
     32  </style>
     33  <div class=a>
     34    <div class=b>
     35      <div class=c>
     36        <div class=d>
     37          <div class=e>
     38            <div class=f>
     39              <div class=g>
     40                <div id=scoped class=h></div>
     41              </div>
     42            </div>
     43          </div>
     44        </div>
     45      </div>
     46    </div>
     47  </div>
     48 </template>
     49 <script>
     50 add_task(async () => {
     51  SimpleTest.registerCurrentTaskCleanupFunction(async () => main.replaceChildren());
     52  main.append(test_scope_explicit_nesting_outside.content.cloneNode(true));
     53 
     54  const scopedElementRules = InspectorUtils.getMatchingCSSRules(scoped);
     55  const scopedRule = scopedElementRules[2];
     56  is(scopedRule.selectorText, `& .h`, "Got expected nested rule");
     57  is(
     58    scopedRule.selectorMatchesElement(0, scoped),
     59    true,
     60    ":scope selector matches the root scoped element"
     61  );
     62 });
     63 </script>
     64 
     65 <template id=test_scope_explicit_scope_outside>
     66  <style>
     67    @scope(.a) {
     68      .b {
     69        .c {
     70          @scope(.d) {
     71            .e {
     72              .f {
     73                @scope(.g) {
     74                  .h {
     75                    .i {
     76                      color: red;
     77                    }
     78                  }
     79                }
     80              }
     81            }
     82          }
     83        }
     84      }
     85    }
     86  </style>
     87  <div class=a>
     88    <div class=b>
     89      <div class=c>
     90        <div class=d>
     91          <div class=e>
     92            <div class=f>
     93              <div class=g>
     94                <div class=h>
     95                  <div id=scoped class=i></div>
     96                </div>
     97              </div>
     98            </div>
     99          </div>
    100        </div>
    101      </div>
    102    </div>
    103  </div>
    104 </template>
    105 <script>
    106 add_task(async () => {
    107  SimpleTest.registerCurrentTaskCleanupFunction(async () => main.replaceChildren());
    108  main.append(test_scope_explicit_scope_outside.content.cloneNode(true));
    109 
    110  const scopedElementRules = InspectorUtils.getMatchingCSSRules(scoped);
    111  const scopedRule = scopedElementRules[2];
    112  is(scopedRule.selectorText, `& .i`, "Got expected nested rule");
    113  is(
    114    scopedRule.selectorMatchesElement(0, scoped),
    115    true,
    116    ":scope selector matches the root scoped element"
    117  );
    118 });
    119 </script>
    120 
    121 <template id=test_scope_implicit>
    122  <div id=scoped>
    123    <style>
    124      @scope {
    125        :scope {
    126          color: red;
    127        }
    128      }
    129    </style>
    130  </div>
    131 </template>
    132 <script>
    133 add_task(async () => {
    134  SimpleTest.registerCurrentTaskCleanupFunction(async () => main.replaceChildren());
    135  main.append(test_scope_implicit.content.cloneNode(true));
    136 
    137  const scopedElementRules = InspectorUtils.getMatchingCSSRules(scoped);
    138  const scopedRule = scopedElementRules[2];
    139  is(scopedRule.selectorText, `:scope`, "Got expected nested rule");
    140  is(
    141    scopedRule.selectorMatchesElement(0, scoped),
    142    true,
    143    ":scope selector matches the root scoped element"
    144  );
    145 });
    146 </script>
    147 
    148 <template id=test_scope_implicit_shadow>
    149  <div id=host1></div>
    150  <div id=host2></div>
    151  <template id=shadow_template>
    152    <style>
    153      @scope {
    154        :scope {
    155          background: red;
    156        }
    157        div {
    158          background: blue;
    159        }
    160      }
    161    </style>
    162    <div id=scoped></div>
    163  </template>
    164 </template>
    165 <script>
    166 add_task(async () => {
    167  SimpleTest.registerCurrentTaskCleanupFunction(async () => main.replaceChildren());
    168  main.append(test_scope_implicit_shadow.content.cloneNode(true));
    169 
    170  const hosts = [host1, host2];
    171  for (const host of hosts) {
    172    const shadowRoot = host.attachShadow({ mode: "open" });
    173    shadowRoot.append(shadow_template.content.cloneNode(true));
    174  }
    175 
    176  for (const host of hosts) {
    177    const hostElementRules = InspectorUtils.getMatchingCSSRules(host);
    178    const hostScopedRule = hostElementRules[2];
    179    is(hostScopedRule.selectorText, `:scope`, "Got expected nested rule");
    180    is(
    181      hostScopedRule.selectorMatchesElement(0, host),
    182      true,
    183      ":scope selector matches the root scoped host element"
    184    );
    185    const scoped = host.shadowRoot.getElementById("scoped");
    186    const scopedElementRules = InspectorUtils.getMatchingCSSRules(scoped);
    187    const scopedRule = scopedElementRules[2];
    188    is(scopedRule.selectorText, `div`, "Got expected nested rule");
    189    is(
    190      scopedRule.selectorMatchesElement(0, scoped),
    191      true,
    192      ":scope selector matches the root scoped element"
    193    );
    194  }
    195 });
    196 </script>