<!DOCTYPE html>
<html>
  <head>
    <title>Test for WebKit bug 78595: CollectingRules and QueryingRules modes of SelectorChecker miss some complex selectors with pseudo elements</title>
    <style type="text/css">
      .parent.secondParent .firstChild:before {
          color: brown;
          content: "brown";
      }

      .topParent.topmost .parent.secondParent .secondChild:before {
          color: cyan;
          content: "cyan";
      }

      .parent.secondParent > .thirdChild:before {
          color: red;
          content: "red";
      }

      .topParent.topmost > .parent.secondParent > .fourthChild:before {
          color: magenta;
          content: "magenta";
      }

      .parent.predecessor + .parent.firstParent:before {
          color: green;
          content: "green";
      }

      .parent.firstParent ~ .secondParent:before {
          color: lime;
          content: "lime";
      }

      .parent.firstParent + .parent.secondParent + .thirdParent:before {
          color: blue;
          content: "blue";
      }

      .parent.predecessor ~ .parent.secondParent ~ .fourthParent:before {
          color: crimson;
          content: "crimson";
      }

      .pass {
          color: green;
      }

      .fail {
          color: red;
      }

    </style>
    <script type="text/javascript">
      if (window.testRunner)
          testRunner.dumpAsText();

      var tests = [
        { 'elementId' : 'firstChild', 'expectedValue' : 'brown' },
        { 'elementId' : 'secondChild', 'expectedValue' : 'cyan' },
        { 'elementId' : 'thirdChild', 'expectedValue' : 'red' },
        { 'elementId' : 'fourthChild', 'expectedValue' : 'magenta' },
        { 'elementId' : 'firstParent', 'expectedValue' : 'green' },
        { 'elementId' : 'secondParent', 'expectedValue' : 'lime' },
        { 'elementId' : 'thirdParent', 'expectedValue' : 'blue' },
        { 'elementId' : 'fourthParent', 'expectedValue' : 'crimson' },
      ];

      function runTests()
      {
        var resultsElement = document.getElementById('results');

        tests.forEach(function(curTest) {
          var msg = document.createElement('div');
          var element = document.querySelector("#" + curTest.elementId);

          var mainMessage;
          var matchedRules;
          if (!element)
              mainMessage = "Element with id #" + curTest.elementId + " not found";
          else {
              matchedRules = window.getMatchedCSSRules(element, "before");
              if (!matchedRules || matchedRules.length !== 1)
                  mainMessage = " Matching rules for #" + curTest.elementId + ":before do not contain a single rule";
          }
          if (mainMessage) {
              msg.innerHTML = "<span class='fail'>FAIL</span>" + mainMessage;
              resultsElement.appendChild(msg);
              return;
          }
          var value = matchedRules[0].style.color;
          mainMessage = " Expected '" + curTest.expectedValue + "' for color in the matched CSS rule for element with id " +
              curTest.elementId + " and pseudo-element :before";
          if (value == curTest.expectedValue)
              msg.innerHTML = "<span class='pass'>PASS</span>" + mainMessage + " and got '" + value + "'";
          else
              msg.innerHTML = "<span class='fail'>FAIL</span>" + mainMessage + " but instead got '" + value + "'";
          resultsElement.appendChild(msg);
        });

        if (window.testRunner)
            testRunner.notifyDone();
      }
    </script>
  </head>
  <body onload="runTests();">
    <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>
    <br />
    <div class="topParent topmost">
      <div class="parent predecessor"></div>
      <div class="parent firstParent" id="firstParent"></div>
      <div class="parent secondParent" id="secondParent">
        <div class="firstChild" id="firstChild"></div>
        <div class="secondChild" id="secondChild"></div>
        <div class="thirdChild" id="thirdChild"></div>
        <div class="fourthChild" id="fourthChild"></div>
      </div>
      <div class="parent thirdParent" id="thirdParent"></div>
      <div class="parent fourthParent" id="fourthParent"></div>
    </div>
    <br />
    <div id="results"></div>
  </body>
</html>