accessibility-developer-tools/lib/closure-library/doc/js/article_test_dom.html

This is a library of accessibility-related testing and utility code.

<!-- Documentation licensed under CC BY 4.0 -->
<!-- License available at https://creativecommons.org/licenses/by/4.0/ -->

<script src="article.js"></script>

<div id="testFindTitle">
  <div class="input">
    <h1>Unused</h1>
    <article>
      <h1 id="top_of_page">Top</h1>
      <h1>Heading</h1>
      <h1>Another Heading</h1>
    </article>
  </div>

  <script type="process">
    var title = document.querySelector('title');
    window['old_title'] = title.textContent;
    title.textContent = '';
    closure.docs.findTitle();
  </script>

  <div class="expected">
    <h1>Unused</h1>
    <article>
      <h1 id="top_of_page">Top</h1>
      <h1>Another Heading</h1>
    </article>
  </div>

  <script type="postcondition">
    var title = document.querySelector('title');
    assertEquals('Heading', title.textContent);
    title.textContent = window['old_title'];
  </script>
</div>


<div id="testAutoNumber">
  <div class="input">
    <h2>Unaffected</h2>
    <article>
      <h1>Unnumbered</h1>
      <h2 id="id-provided">1 I already have an ID.</h1>
      <p>Paragraph
      <h3>1 Subsection</h3>
      <h4>1 Subsubsection</h4>
      <h3>1 Another subsection</h3>
      <h3>No number</h3>
      <h3>1.1.1.1 Numbers again</h3>
      <h2>1 Second subsection</h2>
      <h3>5 Wacky number</h3>
    </article>
  </div>

  <script type="process">closure.docs.autoNumber();</script>

  <div class="expected">
    <h2>Unaffected</h2>
    <article>
      <h1>Unnumbered</h1>
      <h2 id="id-provided">1 I already have an ID.</h2>
      <p>Paragraph
      <h3 id="_subsection">1.1 Subsection</h3>
      <h4 id="_subsubsection">1.1.1 Subsubsection</h4>
      <h3 id="_another-subsection">1.2 Another subsection</h3>
      <h3>No number</h3>
      <h3 id="_numbers-again">1.3 Numbers again</h3>
      <h2 id="_second-subsection">2 Second subsection</h2>
      <h3 id="_wacky-number">2.1 Wacky number</h3>
    </article>
  </div>
</div>


<div id="testAutoNumber_idConflict">
  <div class="input">
    <article>
      <h2>1 Section</h2>
      <h3>1 Section</h3>
      <h4>1 Section</h4>
      <h4>1 Section</h4>
      <h3>1 Section</h3>
      <h2>1 Section</h2>
      <h3>1 Section</h3>
    </article>
  </div>

  <script type="process">closure.docs.autoNumber();</script>

  <div class="expected">
    <article>
      <h2 id="_section">1 Section</h2>
      <h3 id="_section1">1.1 Section</h3>
      <h4 id="_section2">1.1.1 Section</h4>
      <h4 id="_section3">1.1.2 Section</h4>
      <h3 id="_section4">1.2 Section</h3>
      <h2 id="_section5">2 Section</h2>
      <h3 id="_section6">2.1 Section</h3>
    </article>
  </div>
</div>


<div id="testBuildToc">
  <div class="input">
    <h2>Ignored</h2>
    <nav class="toc">
      <ul>
        <li>Contents
      </ul>
    </nav>
    <article>
      <h1 id="ignored">Ignored</h1>
      <h2 id="a">A</h2>
      <h3 id="a-b">B</h3>
      <h4 id="a-b-c">C</h4>
      <h3 id="a-d">D</h3>
      <h2 id="e">E</h2>
      <h2 id="f">F</h2>
      <h3 id="f-g">G</h3>
    </article>
  </div>

  <script type="process">closure.docs.buildToc();</script>

  <div class="expected">
    <h2>Ignored</h2>
    <nav class="toc">
      <ul>
        <li>Contents
        <li><a href="#a">A</a>
          <ul>
            <li><a href="#a-b">B</a>
            <li><a href="#a-d">D</a>
          </ul>
        <li><a href="#e">E</a>
        <li><a href="#f">F</a>
          <ul>
            <li><a href="#f-g">G</a>
          </ul>
      </ul>
    </nav>
    <article>
      <h1 id="ignored">Ignored</h1>
      <h2 id="a">A</h2>
      <h3 id="a-b">B</h3>
      <h4 id="a-b-c">C</h4>
      <h3 id="a-d">D</h3>
      <h2 id="e">E</h2>
      <h2 id="f">F</h2>
      <h3 id="f-g">G</h3>
    </article>
  </div>
</div>


<div id="testBuildToc_respectsMinMax">
  <div class="input">
    <nav class="toc">
      <ul>
      </ul>
    </nav>
    <article>
      <h1 id="a">A</h1>
      <h2 id="b">B</h2>
      <h3 id="c">C</h3>
      <h4 id="d">D</h4>
      <h5 id="e">E</h5>
    </article>
  </div>

  <script type="process">
    window['_JEKYLL_DATA'] = {'page': {'toc': {'min': 1, 'max': 4}}};
    closure.docs.buildToc();
  </script>

  <div class="expected">
    <nav class="toc">
      <ul>
        <li><a href="#a">A</a>
          <ul>
            <li><a href="#b">B</a>
              <ul>
                <li><a href="#c">C</a>
                  <ul>
                    <li><a href="#d">D</a>
                  </ul>
              </ul>
          </ul>
      </ul>
    </nav>
    <article>
      <h1 id="a">A</h1>
      <h2 id="b">B</h2>
      <h3 id="c">C</h3>
      <h4 id="d">D</h4>
      <h5 id="e">E</h5>
    </article>
  </div>
</div>


<div id="testFixLinkTest">
  <div class="input">
    <a href="#foo">??</a>
    <h2 id="foo">1 Foo</h2>
    <h3 id="bar">1.1 Bar</h3>
    <a href="#bar">????</a>
    <a href="#foo">Foo</a>
    <a href="#baz">??</a>
  </div>

  <script type="process">closure.docs.fixLinkText();</script>

  <div class="expected">
    <a href="#foo">1 Foo</a>
    <h2 id="foo">1 Foo</h2>
    <h3 id="bar">1.1 Bar</h3>
    <a href="#bar">1.1 Bar</a>
    <a href="#foo">Foo</a>
    <a href="#baz">??</a>
  </div>
</div>


<div id="testFixSyntaxHighlighting">
  <div class="input">
    <pre class="highlight">
      <span class="nx">foo</span>
      <span class="o">.</span>
      <span class="nx">bar</span>
      <span class="p">(</span>
      <span class="nx">x</span>
      <span class="p">);</span>
    </pre>
  </div>

  <script type="process">closure.docs.fixSyntaxHighlighting();</script>

  <div class="expected">
    <pre class="highlight">
      <span class="nx">foo</span>
      <span class="o">.</span>
      <span class="nf">bar</span>
      <span class="p">(</span>
      <span class="nx">x</span>
      <span class="p">);</span>
    </pre>
  </div>
</div>


<div id="testHighlightCallouts">
  <div class="input">
    <p>Foo bar baz
    <p>Qux: corge
    <p>Abc
  </div>

  <script type="process">closure.docs.highlightCallouts();</script>

  <div class="expected">
    <p>Foo bar baz
    <p class="callout-qux">Qux: corge
    <p>Abc
  </div>
</div>


<div id="testSetEditLink">
  <div class="input">
    <a class="edit">
      <div></div>
    </a>
  </div>

  <script type="process">
    closure.docs.LOCATION = 'http://google.github.io/lib/foo/bar';
    closure.docs.setEditLink();
  </script>

  <div class="expected">
    <a class="edit"
       href="https://github.com/google/lib/edit/master/doc/foo/bar.md">
      <div></div>
    </a>
  </div>
</div>


<div id="testMarkActiveNav">
  <div class="input">
    <header>
      <nav>
        <a href="http://google.github.io/lib/foo">foo</a>
        <a href="http://google.github.io/lib/bar">bar</a>
      </nav>
    </header>
    <nav class="side">
      <a href="http://google.github.io/lib/foo/baz">foo-baz</a>
      <a href="http://google.github.io/lib/foo/bar">foo-bar</a>
    </nav>
  </div>

  <script type="process">
    window['_JEKYLL_DATA'] = {'site': {'github': {'url': '/gh'}}};
    closure.docs.LOCATION = 'http://google.github.io/lib/foo/bar';
    closure.docs.markActiveNav();
  </script>

  <div class="expected">
    <header>
      <nav>
        <a href="http://google.github.io/lib/foo" class="active">foo</a>
        <a href="http://google.github.io/lib/bar">bar</a>
      </nav>
    </header>
    <nav class="side">
      <a href="http://google.github.io/lib/foo/baz">foo-baz</a>
      <a href="http://google.github.io/lib/foo/bar" class="active">foo-bar</a>
    </nav>
  </div>
</div>


<div id="testMarkActiveNav_customSection">
  <div class="input">
    <header>
      <nav>
        <a href="http://google.github.io/lib/foo">foo</a>
        <a href="http://google.github.io/lib/bar">bar</a>
      </nav>
    </header>
  </div>

  <script type="process">
    window['_JEKYLL_DATA'] = {
      'site': {'github': {'url': 'http://google.github.io/lib'}},
      'page': {'section': '/bar'}
    };
    closure.docs.LOCATION = 'http://google.github.io/lib/foo/bar';
    closure.docs.markActiveNav();
  </script>

  <div class="expected">
    <header>
      <nav>
        <a href="http://google.github.io/lib/foo">foo</a>
        <a href="http://google.github.io/lib/bar" class="active">bar</a>
      </nav>
    </header>
  </div>
</div>


<script>
  initTestSuite();
</script>