title: What happens if <base href...> is set with a double slash?
body: <p>I like to understand how to use a <code>&lt;base href="" /&gt;</code> value for my web crawler, so I tested several combinations with major browsers and finally found something with double slashes I don't understand.</p>
  
  <p>If you don't like to read everything jump to the test results of <strong>D</strong> and <strong>E</strong>. Demonstration of all tests:<br />
  <a href="http://gutt.it/basehref.php" rel="nofollow">http://gutt.it/basehref.php</a></p>
  
  <p>Step by step my test results on calling <code>http://example.com/images.html</code>:</p>
  
  <p><strong>A - Multiple base href</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;base target="_blank" /&gt;
  &lt;base href="http://example.com/images/" /&gt;
  &lt;base href="http://example.com/" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;img src="/images/image.jpg"&gt;
  &lt;img src="image.jpg"&gt;
  &lt;img src="./image.jpg"&gt;
  &lt;img src="images/image.jpg"&gt; not found
  &lt;img src="/image.jpg"&gt; not found
  &lt;img src="../image.jpg"&gt; not found
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>Conclusion</em><br /></p>
  
  <ul>
  <li>only the first <code>&lt;base&gt;</code> with <code>href</code> counts</li>
  <li>a source starting with <code>/</code> targets the root</li>
  <li><code>../</code> goes one folder up </li>
  </ul>
  
  <p><strong>B - Without trailing slash</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;base href="http://example.com/images" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;img src="/images/image.jpg"&gt;
  &lt;img src="image.jpg"&gt; not found
  &lt;img src="./image.jpg"&gt; not found
  &lt;img src="images/image.jpg"&gt;
  &lt;img src="/image.jpg"&gt; not found
  &lt;img src="../image.jpg"&gt; not found
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>Conclusion</em><br /></p>
  
  <ul>
  <li><code>&lt;base href&gt;</code> ignores everything after the last slash so <code>http://example.com/images</code> becomes <code>http://example.com/</code></li>
  </ul>
  
  <p><strong>C - How it should be</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;base href="http://example.com/" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;img src="/images/image.jpg"&gt;
  &lt;img src="image.jpg"&gt; not found
  &lt;img src="./image.jpg"&gt; not found
  &lt;img src="images/image.jpg"&gt;
  &lt;img src="/image.jpg"&gt; not found
  &lt;img src="../image.jpg"&gt; not found
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>Conclusion</em><br /></p>
  
  <ul>
  <li>Same result as in <strong>Test B</strong> as expected</li>
  </ul>
  
  <p><strong>D - Double Slash</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;base href="http://example.com/images//" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;img src="/images/image.jpg"&gt;
  &lt;img src="image.jpg"&gt;
  &lt;img src="./image.jpg"&gt;
  &lt;img src="images/image.jpg"&gt; not found
  &lt;img src="/image.jpg"&gt; not found
  &lt;img src="../image.jpg"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>E - Double Slash with whitespace</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;base href="http://example.com/images/ /" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;img src="/images/image.jpg"&gt;
  &lt;img src="image.jpg"&gt; not found
  &lt;img src="./image.jpg"&gt; not found
  &lt;img src="images/image.jpg"&gt; not found
  &lt;img src="/image.jpg"&gt; not found
  &lt;img src="../image.jpg"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Both are not "valid" URLs, but real results of my web crawler. Please explain what happend in <strong>D</strong> and <strong>E</strong> that <code>../image.jpg</code> could be found and why causes the whitespace a difference?</p>
  
  <p>Only for your interest:</p>
  
  <ul>
  <li><code>&lt;base href="http://example.com//" /&gt;</code> is the same as <strong>Test C</strong></li>
  <li><code>&lt;base href="http://example.com/ /" /&gt;</code> is completely different. Only <code>../image.jpg</code> is found</li>
  <li><code>&lt;base href="a/" /&gt;</code> finds only <code>/images/image.jpg</code></li>
  </ul>