test/integration/ender_sel.html

<!doctype html>
<html>
<head>
  <title>Traversty Ender (with Sel) Integration Test</title>
  <script src="ender_sel.js"></script>
  <script>
    $.domReady(function() {
      $('#fixtures > ul')
        .down(0).css('color', 'red')
        .next('li', 1).css('color', 'green')
        .next().down('li', 2).css('color', 'blue')
        .next().down().css('color', 'yellow')
        .up(2).next().css('color', 'purple')
        .siblings(3).css('fontWeight', 'bold')
        .children().css('textDecoration', 'underline')
        .children(1).css('borderLeft', 'solid 5px red')
        .parents('*').filter('ul').css('borderTop', 'dashed 2px green')
        .not('.second').css('borderBottom', 'solid 3px blue')
        .down('.second li').has('span').css('marginTop', '10px')
        .up('ul').eq(-1).css('borderLeft', 'solid 5px orange')
        .closest('#fixtures').down('li').slice(-10,-9).css('fontSize', '25px')

      if ($('li').is('.c') === true) $('<div>INTEGRATION TEST ALL DONE!</div>').prependTo('#fixtures')
    })
  </script>
</head>
<body>
  <h1>Traversty Ender (with Sel) Integration Test</h1>
  <p>The elements with colour names should turn the appropriate colour</p>

  <div id="fixtures">
    <ul>
      <li>ONE (red)</li>
      <li class="c">TWO</li>
      <li>THREE (green)</li>
      <li class="c">FOUR
        <ul class="second">
          <li>i</li>
          <li class="c">ii</li>
          <li>iii (blue)</li>
          <li class="c">iv
            <span class="c">SPAN (yellow)</span>
          </li>
        </ul>
      </li>
      <li class="c">FIVE (purple)</li>
    </ul>
    <ul>
      <li>one (red)</li>
      <li class="c">two</li>
      <li>three (green)</li>
      <li class="c">four
        <ul class="second">
          <li>1</li>
          <li class="c">2</li>
          <li>3 (blue)</li>
          <li class="c">4
            <span class="c">span (yellow)</span>
          </li>
        </ul>
      </li>
      <li class="c">five (purple)</li>
    </ul>
  </div>

  <div id="reference">
    <h2>Reference screenshot</h2>
    <p>The above block should look similar to this:</p>
    <img src="integration_reference.png" style="border: 1px solid rgb(100,100,100); box-shadow: 2px 2px 15px rgb(100,100,100);">
  </div>

  <p>See also:</p>
  <ul>
    <li><a href="ender_qwery.html">Traversty Ender (with Qwery) Integration Test</a></li>
    <li><a href="ender_sel.html">Traversty Ender (with Sel) Integration Test</a></li>
    <li><a href="ender_sizzle.html">Traversty Ender (with Sizzle) Integration Test</a></li>
    <li><a href="ender_nwmatcher.html">Traversty Ender (with NWMatcher) Integration Test</a></li>
    <li><a href="ender_noselector.html">Traversty Ender (with no selector engine) Integration Test</a></li>
  </ul>
</body>
</html>