third_party/WebKit/LayoutTests/fast/dom/Window/getMatchedCSSRules-with-pseudo-elements-complex.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>Test for WebKit bug 78595: CollectingRules and QueryingRules modes of SelectorChecker miss some complex selectors with pseudo elements</title>
   5     <style type="text/css">
   6       .parent.secondParent .firstChild:before {
   7           color: brown;
   8           content: "brown";
   9       }
  10
  11       .topParent.topmost .parent.secondParent .secondChild:before {
  12           color: cyan;
  13           content: "cyan";
  14       }
  15
  16       .parent.secondParent > .thirdChild:before {
  17           color: red;
  18           content: "red";
  19       }
  20
  21       .topParent.topmost > .parent.secondParent > .fourthChild:before {
  22           color: magenta;
  23           content: "magenta";
  24       }
  25
  26       .parent.predecessor + .parent.firstParent:before {
  27           color: green;
  28           content: "green";
  29       }
  30
  31       .parent.firstParent ~ .secondParent:before {
  32           color: lime;
  33           content: "lime";
  34       }
  35
  36       .parent.firstParent + .parent.secondParent + .thirdParent:before {
  37           color: blue;
  38           content: "blue";
  39       }
  40
  41       .parent.predecessor ~ .parent.secondParent ~ .fourthParent:before {
  42           color: crimson;
  43           content: "crimson";
  44       }
  45
  46       .pass {
  47           color: green;
  48       }
  49
  50       .fail {
  51           color: red;
  52       }
  53
  54     </style>
  55     <script type="text/javascript">
  56       if (window.testRunner)
  57           testRunner.dumpAsText();
  58
  59       var tests = [
  60         { 'elementId' : 'firstChild', 'expectedValue' : 'brown' },
  61         { 'elementId' : 'secondChild', 'expectedValue' : 'cyan' },
  62         { 'elementId' : 'thirdChild', 'expectedValue' : 'red' },
  63         { 'elementId' : 'fourthChild', 'expectedValue' : 'magenta' },
  64         { 'elementId' : 'firstParent', 'expectedValue' : 'green' },
  65         { 'elementId' : 'secondParent', 'expectedValue' : 'lime' },
  66         { 'elementId' : 'thirdParent', 'expectedValue' : 'blue' },
  67         { 'elementId' : 'fourthParent', 'expectedValue' : 'crimson' },
  68       ];
  69
  70       function runTests()
  71       {
  72         var resultsElement = document.getElementById('results');
  73
  74         tests.forEach(function(curTest) {
  75           var msg = document.createElement('div');
  76           var element = document.querySelector("#" + curTest.elementId);
  77
  78           var mainMessage;
  79           var matchedRules;
  80           if (!element)
  81               mainMessage = "Element with id #" + curTest.elementId + " not found";
  82           else {
  83               matchedRules = window.getMatchedCSSRules(element, "before");
  84               if (!matchedRules || matchedRules.length !== 1)
  85                   mainMessage = " Matching rules for #" + curTest.elementId + ":before do not contain a single rule";
  86           }
  87           if (mainMessage) {
  88               msg.innerHTML = "<span class='fail'>FAIL</span>" + mainMessage;
  89               resultsElement.appendChild(msg);
  90               return;
  91           }
  92           var value = matchedRules[0].style.color;
  93           mainMessage = " Expected '" + curTest.expectedValue + "' for color in the matched CSS rule for element with id " +
  94               curTest.elementId + " and pseudo-element :before";
  95           if (value == curTest.expectedValue)
  96               msg.innerHTML = "<span class='pass'>PASS</span>" + mainMessage + " and got '" + value + "'";
  97           else
  98               msg.innerHTML = "<span class='fail'>FAIL</span>" + mainMessage + " but instead got '" + value + "'";
  99           resultsElement.appendChild(msg);
 100         });
 101
 102         if (window.testRunner)
 103             testRunner.notifyDone();
 104       }
 105     </script>
 106   </head>
 107   <body onload="runTests();">
 108     <h3>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=24021">WebKit bug 78595</a>: CollectingRules and QueryingRules modes of SelectorChecker miss some complex selectors with pseudo elements</h3>
 109     <br />
 110     <div class="topParent topmost">
 111       <div class="parent predecessor"></div>
 112       <div class="parent firstParent" id="firstParent"></div>
 113       <div class="parent secondParent" id="secondParent">
 114         <div class="firstChild" id="firstChild"></div>
 115         <div class="secondChild" id="secondChild"></div>
 116         <div class="thirdChild" id="thirdChild"></div>
 117         <div class="fourthChild" id="fourthChild"></div>
 118       </div>
 119       <div class="parent thirdParent" id="thirdParent"></div>
 120       <div class="parent fourthParent" id="fourthParent"></div>
 121     </div>
 122     <br />
 123     <div id="results"></div>
 124   </body>
 125 </html>