tor-browser

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

browser_rules_keyframes-rule-nested.js (2430B)

      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 nested @keyframes rules are displayed correctly in the rule view
      7 
      8 const TEST_URI = `data:text/html,${encodeURIComponent(`
      9  <style>
     10    body {
     11      animation-name: in-layer,
     12                      in-starting-style,
     13                      in-media,
     14                      in-container;
     15      animation-duration: 1s, 2s, 3s, 4s;
     16      border: 4px solid;
     17      outline: 4px solid;
     18    }
     19 
     20    @layer {
     21      @keyframes in-layer {
     22        from { color: red; }
     23        to   { color: blue; }
     24      }
     25    }
     26 
     27    @starting-style {
     28      /* keyframes is considered as being outside of @starting-style */
     29      @keyframes in-starting-style {
     30        from { border-color: tomato; }
     31        to   { border-color: gold; }
     32      }
     33    }
     34 
     35    @media screen {
     36      @keyframes in-media {
     37        from { outline-color: purple; }
     38        to   { outline-color: pink; }
     39      }
     40    }
     41 
     42    @container (width > 0px) {
     43      /* keyframes is considered as being outside of @container */
     44      @keyframes in-container {
     45        from { background-color: green; }
     46        to   { background-color: lime; }
     47      }
     48    }
     49  </style>
     50  <h1>Nested <code>@keyframes</code></h1>
     51 `)}`;
     52 
     53 add_task(async function () {
     54  await pushPref("layout.css.starting-style-at-rules.enabled", true);
     55  await addTab(TEST_URI);
     56  const { inspector, view } = await openRuleView();
     57 
     58  await selectNode("body", inspector);
     59  const headers = Array.from(view.element.querySelectorAll(".ruleview-header"));
     60  Assert.deepEqual(
     61    headers.map(el => el.textContent),
     62    [
     63      "Keyframes in-layer",
     64      "Keyframes in-starting-style",
     65      "Keyframes in-media",
     66      "Keyframes in-container",
     67    ],
     68    "Got expected keyframes sections"
     69  );
     70 
     71  info("Check that keyframes' keyframe ancestor rules are not displayed");
     72  for (const headerEl of headers) {
     73    const keyframeContainerId = headerEl
     74      .querySelector("button")
     75      .getAttribute("aria-controls");
     76    const keyframeContainer = view.element.querySelector(
     77      `#${keyframeContainerId}`
     78    );
     79    ok(
     80      !!keyframeContainer,
     81      `Got keyframe container for "${headerEl.textContent}"`
     82    );
     83    is(
     84      keyframeContainer.querySelector(".ruleview-rule-ancestor"),
     85      null,
     86      `ancestor data are not displayed for "${headerEl.textContent}" keyframe rules`
     87    );
     88  }
     89 });