tor-browser

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

browser_rules_keyframes-rule-shadowdom.js (2233B)

      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 keyframes are displayed for elements nested under a shadow-root.
      7 
      8 const TEST_URI = `data:text/html;charset=utf-8,
      9  <div></div>
     10  <script>
     11    document.querySelector('div').attachShadow({mode: 'open'}).innerHTML = \`
     12      <span>text</span>
     13      <style>
     14        @keyframes blink {
     15          0% {
     16            border: rgba(255,0,0,1) 2px dashed;
     17          }
     18          100% {
     19            border: rgba(255,0,0,0) 2px dashed;
     20          }
     21        }
     22        span {
     23          animation: blink .5s 0s infinite;
     24        }
     25      </style>\`;
     26  </script>`;
     27 
     28 add_task(async function () {
     29  await addTab(TEST_URI);
     30 
     31  const { inspector, view } = await openRuleView();
     32 
     33  info("Expand the shadow-root parent");
     34  const divFront = await getNodeFront("div", inspector);
     35  await inspector.markup.expandNode(divFront);
     36  await waitForMultipleChildrenUpdates(inspector);
     37 
     38  const { markup } = inspector;
     39  const divContainer = markup.getContainer(divFront);
     40 
     41  info("Expand the shadow-root");
     42  const shadowRootContainer = divContainer.getChildContainers()[0];
     43  await expandContainer(inspector, shadowRootContainer);
     44 
     45  info("Retrieve the rules displayed for the span under the shadow root");
     46  const spanContainer = shadowRootContainer.getChildContainers()[0];
     47  const rules = await getKeyframeRules(spanContainer.node, inspector, view);
     48 
     49  is(
     50    convertTextPropsToString(rules.keyframeRules[0].textProps),
     51    "border: rgba(255,0,0,1) 2px dashed",
     52    "Keyframe blink (0%) property is correct"
     53  );
     54 
     55  is(
     56    convertTextPropsToString(rules.keyframeRules[1].textProps),
     57    "border: rgba(255,0,0,0) 2px dashed",
     58    "Keyframe blink (100%) property is correct"
     59  );
     60 });
     61 
     62 function convertTextPropsToString(textProps) {
     63  return textProps.map(t => t.name + ": " + t.value).join("; ");
     64 }
     65 
     66 async function getKeyframeRules(selector, inspector, view) {
     67  await selectNode(selector, inspector);
     68  const elementStyle = view._elementStyle;
     69 
     70  const rules = {
     71    elementRules: elementStyle.rules.filter(rule => !rule.keyframes),
     72    keyframeRules: elementStyle.rules.filter(rule => rule.keyframes),
     73  };
     74 
     75  return rules;
     76 }