<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<div style="display:none">
<!-- Fails on the <li> tag. -->
<ul>
  <li>
    <div>
      <div>
        <pre>
          <blockquote><span>Fail.</span></blockquote>
        </pre>
      </div>
    </div>
  </li>
</ul>

<!-- Fails on the <ul> tag. -->
<div>
  <li>
    <div>
      <pre>
        <blockquote><span>Fail.</span></blockquote>
      </pre>
    </div>
  </li>
</div>

<!-- Simple matches. -->
<ul>
  <li>
    <div>
      <pre>
        <blockquote><span id="target1">Target 1</span></blockquote>
      </pre>
    </div>
  </li>
</ul>
<ul>
  <li>
    <div>
      <pre>
        <pre>
          <blockquote><span id="target2">Target 2</span></blockquote>
        </pre>
      </pre>
    </div>
  </li>
</ul>

<!-- Multiple failures before a match. -->
<ul>
  <li>
    <div>
      <pre>

        <!-- This subtree lacks the ul. -->
        <li>
          <div>
            <div>

              <!-- This subtree lacks the li. -->
              <div>
                <div>
                  <div>
                    <blockquote><span id="target3">Target 3</span></blockquote>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </li>

      </pre>
    </div>
  </li>
</ul>

</div>
</body>
<script>
description('Test backtracking with multiple child selector relations.');

shouldBe('document.querySelectorAll("ul>li>div>pre span").length', '3');
shouldBeEqualToString('document.querySelectorAll("ul>li>div>pre span")[0].id', 'target1');
shouldBeEqualToString('document.querySelectorAll("ul>li>div>pre span")[1].id', 'target2');
shouldBeEqualToString('document.querySelectorAll("ul>li>div>pre span")[2].id', 'target3');
</script>
<script src="../../resources/js-test-post.js"></script>
</html>
