layout/inspector/tests/test_getMatchingCSSRules_pseudo.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 <style>
   7 #block:before {
   8   display: block;
   9   content: ":before";
  10 }
  11 #block:after {
  12   display: block;
  13   content: ":after";
  14 }
  15
  16 #table:before {
  17   display: table;
  18   content: ":before";
  19 }
  20 #table:after {
  21   display: table;
  22   content: ":after";
  23 }
  24
  25 #flex:before {
  26   display: flex;
  27   content: ":before";
  28 }
  29 #flex:after {
  30   display: flex;
  31   content: ":after";
  32 }
  33
  34 #grid:before {
  35   display: grid;
  36   content: ":before";
  37 }
  38 #grid:after {
  39   display: grid;
  40   content: ":after";
  41 }
  42 </style>
  43
  44 <div id="block">block pseudos</div>
  45 <div id="table">table pseudos</div>
  46 <div id="flex">flex pseudos</div>
  47 <div id="grid">grid pseudos</div>
  48
  49 <script>
  50 const InspectorUtils = SpecialPowers.InspectorUtils;
  51
  52 function checkPseudoStyleForId(id) {
  53   let element = document.getElementById(id);
  54
  55   let beforeRules = InspectorUtils.getMatchingCSSRules(element, ":before");
  56   is (beforeRules.length, 1, "Element " + id + ":before has expected number of rules.");
  57   let beforeDecl = beforeRules[0].style;
  58   is (beforeDecl.content, '":before"', "Element " + id + ":before has expected style content.");
  59
  60   let afterRules  = InspectorUtils.getMatchingCSSRules(element, ":after");
  61   is (afterRules.length, 1, "Element " + id + ":after has expected number of rules.");
  62   let afterDecl = afterRules[0].style;
  63   is (afterDecl.content, '":after"', "Element " + id + ":after has expected style content.");
  64 }
  65
  66 let idsToCheck = [
  67   "block",
  68   "table",
  69   "flex",
  70   "grid",
  71 ];
  72
  73 for (let id of idsToCheck) {
  74   checkPseudoStyleForId(id);
  75 }
  76 </script>