tor-browser

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

browser_rules_nested_at_rules.js (2502B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test that the rule-view content is correct when the page defines nested at-rules (@media, @layer, @supports, …)
      7 const TEST_URI = `
      8  <body>
      9  <style type="text/css">
     10    body {
     11      container: mycontainer / inline-size;
     12    }
     13 
     14    @layer mylayer {
     15      @supports (container-name: mycontainer) {
     16        @container mycontainer (min-width: 1px) {
     17          @media screen {
     18            @container mycontainer (min-width: 2rem) {
     19              @scope (:scope) to (:scope > h1) {
     20                h1, [test-hint="nested"] {
     21                  background: gold;
     22                }
     23              }
     24            }
     25          }
     26        }
     27      }
     28    }
     29  </style>
     30  <h1>Hello nested at-rules!</h1>
     31  </body>
     32 `;
     33 
     34 add_task(async function () {
     35  await pushPref("layout.css.at-scope.enabled", true);
     36  await addTab(
     37    "https://example.com/document-builder.sjs?html=" +
     38      encodeURIComponent(TEST_URI)
     39  );
     40  const { inspector, view } = await openRuleView();
     41 
     42  await selectNode("h1", inspector);
     43 
     44  const expectedRules = [
     45    { selector: "element", ancestorRulesData: null },
     46    {
     47      selector: `h1, [test-hint="nested"]`,
     48      ancestorRulesData: [
     49        `@layer mylayer {`,
     50        `  @supports (container-name: mycontainer) {`,
     51        `    @container mycontainer (min-width: 1px) {`,
     52        `      @media screen {`,
     53        `        @container mycontainer (min-width: 2rem) {`,
     54        `          @scope (:scope) to (:scope > h1) {`,
     55      ],
     56    },
     57  ];
     58 
     59  const rulesInView = Array.from(view.element.children);
     60  is(
     61    rulesInView.length,
     62    expectedRules.length,
     63    "All expected rules are displayed"
     64  );
     65 
     66  for (let i = 0; i < expectedRules.length; i++) {
     67    const expectedRule = expectedRules[i];
     68    info(`Checking rule #${i}: ${expectedRule.selector}`);
     69 
     70    const selector = rulesInView[i].querySelector(
     71      ".ruleview-selectors-container"
     72    ).innerText;
     73    is(selector, expectedRule.selector, `Expected selector for ${selector}`);
     74 
     75    if (expectedRule.ancestorRulesData == null) {
     76      is(
     77        getRuleViewAncestorRulesDataElementByIndex(view, i),
     78        null,
     79        `No ancestor rules data displayed for ${selector}`
     80      );
     81    } else {
     82      is(
     83        getRuleViewAncestorRulesDataTextByIndex(view, i),
     84        expectedRule.ancestorRulesData.join("\n"),
     85        `Expected ancestor rules data displayed for ${selector}`
     86      );
     87    }
     88  }
     89 });