chromium/third_party/blink/manual_tests/spatial-navigation/spatial-navigation-test-cases.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Spatial Navigation Test Cases</title>
  </head>
  <body>

    <div style="margin-left: 40px; text-align: center;">
      <h1 style="text-align: left;">Spatial Navigation Fun</h1>
      <h2 style="text-align: left;">3x3 Centered Table Test</h2>
    </div>

    <table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td style="vertical-align: top; text-align: center;"><a href="a">test</a></td>
          <td style="vertical-align: top; text-align: center;"><a href="a">test</a></td>
          <td style="vertical-align: top; text-align: center;"><a href="a">test</a></td>
        </tr>
        <tr>
          <td style="vertical-align: top; text-align: center;"><a href="a">test</a></td>
          <td style="vertical-align: top; text-align: center;"><a href="a">test</a></td>
          <td style="vertical-align: top; text-align: center;"><a href="a">test</a></td>
        </tr>
        <tr>
          <td style="vertical-align: top; text-align: center;"><a href="a">test</a></td>
          <td style="vertical-align: top; text-align: center;"><a href="a">test</a></td>
          <td style="vertical-align: top; text-align: center;"><a href="a">test</a></td>
        </tr>
      </tbody>
    </table>

    <div style="margin-left: 40px; text-align: left;"><br>

      <div style="text-align: left;">
        <h2>Vertical Sine Test</h2><br>
      </div>

      <div style="text-align: left;">
        <a href="a">test<br></a>
      </div>

      <div style="margin-left: 40px;">
        <a href="a">test<br></a>
      </div>

      <div style="margin-left: 80px;">
        <a href="a">test<br></a>
      </div>

      <div style="margin-left: 40px;">
        <a href="a">test<br></a>
      </div>

      <a href="a">test<br></a>

      <div style="margin-left: 40px;">
        <a href="a">test<br></a>
      </div>

      <div style="margin-left: 80px;">
        <a href="a">test<br></a>
      </div>

      <div style="margin-left: 40px;">
        <a href="a">test<br></a>
      </div>

      <a href="a">test<br></a>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="a">test<br></a>

      <h2>Increasing sentence length</h2>
      <a href="a">H</a><br>
      <a href="p">Ho<br></a>
      <a href="p">How<br></a>
      <a href="p">How <br></a>
      <a href="p">How N</a><br>
      <a href="p">How No</a><br>
      <a href="p">How Now</a><br>
      <a href="p">How Now </a><br>
      <a href="p">How Now B</a><br>
      <a href="p">How Now Br</a><br>
      <a href="p">How Now Bro</a><br>
      <a href="p">How Now Brow</a><br>
      <a href="p">How Now Brown</a><br>
      <a href="p">How Now Brown </a><br>
      <a href="p">How Now Brown C</a><br>
      <a href="p">How Now Brown Co</a><br>
      <a href="p">How Now Brown Cow</a><br>
      <br>

      <h2>Split sentence<br></h2><br>
      <a href="p">H</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<a href="p">ow Now Brown Cow</a><br>
      <a href="p">Ho</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <a href="p">w Now Brown Cow</a><br>
      <a href="p">How</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="p">Now Brown Cow</a><br>
      <a href="p">How N</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; <a href="p">ow Brown Cow</a><br>
      <a href="p">How No</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; <a href="p">w Brown Cow</a><br>
      <a href="p">How Now </a>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; <a href="p">Brown Cow</a><br>
      <a href="p">How Now B</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; <a href="p">rown Cow</a><br>
      <a href="p">How Now Br</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; <a href="p">own Cow</a><br>
      <a href="p">How Now Bro</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; <a href="p">wn Cow</a><br>
      <a href="p">How Now Brow</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="p">n Cow</a><br>
      <a href="p">How Now Brown</a> &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; <a href="p">Cow</a><br>
      <a href="p">How Now Brown C</a> &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; <a href="p">ow</a><br>
      <a href="p">How Now Brown Co</a> &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; <a href="p">w</a><br>
      <a href="p">How Now Brown Cow</a><br><br>

      <h2>Line Wrap Test</h2><br>

      <table style="text-align: left; width: 393px; height: 72px;" border="1" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td style="vertical-align: top;">
              <span class="huge">
                <a href="a">Which of the following constanst do you like the most, one is g, one is pi, and the other is e. </a><br>
             </span>
            </td>

            <td style="vertical-align: top;">
              <a href="a">3.14</a><br>
              <a href="a">2.71</a><br>
              <a href="a">6.67</a><br>
            </td>
          </tr>
        </tbody>
      </table><br>

      <h2>Javascript Focus/Blur Test</h2>
        When going to any link from the following link, you should see a dialog.<br><br>
      <a href="a" onblur='alert("onBlurt")'>Test</a><br><br>

      <h2>IFrames</h2><br>
      <iframe src="links.html"></iframe><br><br><br>

      <h2>DIVs</h2><br>
      <div id=v>
        <a href="a">a</a>
        <div id="Div1">
          <a href="a">b</a>
        </div>
        <a href="a">c</a>
      </div><br><br>

      <h3> Form elements </h3>

      <i> Make sure you can enter space in boxes below </i> <br>

      <input type="text" /> <br><br>
      <textarea></textarea>

      <h3> Content editable </h3>

      <i> Make sure you can edit the text below and enter spaces. </i> <br><br>

      <div contentEditable="true">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec nisi et lectus vulputate fermentum eget a eros. Mauris blandit, enim ac varius ultricies, tortor orci semper sem, in faucibus eros dolor nec turpis. Vestibulum tincidunt pellentesque lacus, ut tincidunt ipsum pretium laoreet. Nulla sed mi magna. Aliquam vitae quam viverra, sodales augue pretium, pharetra odio. Nunc iaculis nisi augue, quis ullamcorper lorem congue ut. Proin id ligula ipsum.

Nulla auctor porta sapien, vitae elementum libero rhoncus ac. Sed pretium vel neque a interdum. Duis id tristique lacus. Nulla vel lobortis libero. Morbi nisi quam, aliquet vel leo id, hendrerit imperdiet sem. Mauris interdum, odio non interdum tempus, turpis tellus ornare ipsum, quis cursus risus tellus quis nisl. Suspendisse dictum elit ut lectus auctor tincidunt. Aenean at egestas mi. Morbi porttitor dictum ipsum blandit tincidunt. Sed eu justo libero. Proin interdum tempor gravida.
      </div>

      <br><br>

    <a href="last">last</a>
    </div>
</body>
</html>