layout/inspector/tests/test_getMatchingCSSRules_slotted.html

   1 <!DOCTYPE html>
   2 <title>Test getMatchingCSSRules for pseudo elements</title>
   3 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   4 <link rel="stylesheet" href="/tests/SimpleTest/test.css">
   5
   6 <div id="host">
   7   <test-element id="test1" slot="slot1">test1</test-element>
   8   <test-element id="test2" slot="slot2">test2</test-element>
   9 </div>
  10
  11 <script>
  12   const host = document.getElementById("host");
  13   const shadow = host.attachShadow({ mode: "open" });
  14   shadow.innerHTML = `
  15     <style>
  16       #outer ::slotted(test-element) {
  17         color: red;
  18       }
  19     </style>
  20     <div id="outer">
  21       <slot name="slot1"></slot>
  22     </div>
  23     <div id="nested">
  24       <slot name="slot2"></slot>
  25     </div>
  26   `;
  27
  28   const nested = shadow.querySelector("#nested").attachShadow({ mode: "open" });
  29   nested.innerHTML = `
  30     <style>
  31       #inner ::slotted(test-element) {
  32         font-weight: bold;
  33       }
  34     </style>
  35     <div id="inner">
  36       <slot></slot>
  37     </div>
  38   `;
  39
  40   const InspectorUtils = SpecialPowers.InspectorUtils;
  41
  42   function checkElementRules(id, text, property) {
  43     const element = document.getElementById(id);
  44     let slottedRules = InspectorUtils.getMatchingCSSRules(element);
  45     is(slottedRules.length, 1, "Slotted element has expected number of rules.");
  46
  47     let slottedText = slottedRules[0].cssText;
  48     ok(slottedText.includes(text), "Slotted node has expected style content.");
  49     ok(slottedText.includes(property), "Has expected property.");
  50   }
  51
  52   info("Check that slotted rules are retrieved");
  53   checkElementRules("test1", "#outer ::slotted(test-element)", "color");
  54
  55   info("Check that slotted rules are also retrieved for nested slots");
  56   checkElementRules("test2", "#inner ::slotted(test-element)", "font-weight");
  57 </script>