title: chrome renders js different depending on the extension of the file to render [testcase included]
body: <p>I was trying to implement an image panner I found <a href="http://www.dynamicdrive.com/dynamicindex4/imagepanner.htm" rel="nofollow noreferrer">here</a>
  Chrome renders the same document differently depending on the extension of the file requested. I have created a test case, where it works when the file it's <strong>not</strong> named as test.<strong>xhtml</strong></p>
  
  <p>You can download the test case from <a href="http://www.eyeprevent.nl/testcase.tar.gz" rel="nofollow noreferrer">here</a></p>
  
  <p>Does anybody know why or how to solve it? I want my files to be .xhtml
  In IE and FF it works fine.</p>
  
  <p>Code:
  test.html / test.xhtml (change the name to see that works with one but not with the other).</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/&gt;
  &lt;style type="text/css"&gt;
  /*Default CSS for pan containers*/
  .pancontainer {
      position: relative; /*keep this intact*/
      overflow: hidden; /*keep this intact*/
      width: 300px;
      height: 300px;
      border: 1px solid black;
  }
  &lt;/style&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex4/imagepanner.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="pancontainer" data-orient="center" data-canzoom="yes" style="width: 350px; height: 200px; float: left; position: relative; overflow-x: hidden; overflow-y: hidden; cursor: move; "&gt;&lt;img src="./test_files/image.jpg" style="position: absolute; width: 700px; height: 525px; left: -175px; top: -163px; display: block;" /&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Update:
  Apparently, thanks to the comments is tomcat which is sending application/xhtml+xml as Content-Type.</p>
  
  <pre><code>HTTP_TRANSACTION_READ_RESPONSE_HEADERS  
  --&gt; HTTP/1.1 200 OK            
  Server: Apache-Coyote/1.1  
  X-Powered-By: JSF/1.2      
  Pragma: no-cache           
  Cache-Control: no-cache    
  Cache-Control: no-store    
  Cache-Control: must-revalidate
  Expires: Mon, 8 Aug 2006 10:00:00 GMT
  Content-Type: application/xhtml+xml;charset=UTF-8
  Transfer-Encoding: chunked 
  Date: Wed, 09 Jun 2010 07:39:30 GMT
  </code></pre>
  
  <p>I've added a mime-type to the <code>web.xml</code>:</p>
  
  <pre><code>&lt;mime-mapping&gt;
  &lt;extension&gt;xhtml&lt;/extension&gt;
  &lt;mime-type&gt;text/html&lt;/mime-type&gt;
  &lt;/mime-mapping&gt; 
  </code></pre>
  
  <p>But still does not work. I belive that <code>FacesServlet</code> is reading the file extension and sending the content-type, overriding the configuration in <code>web.xml</code></p>
  
  <pre><code> &lt;servlet&gt;
    &lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
    &lt;servlet-class&gt;javax.faces.webapp.FacesServlet&lt;/servlet-class&gt;
    &lt;load-on-startup&gt;1&lt;/load-on-startup&gt;
   &lt;/servlet&gt;
   &lt;servlet-mapping&gt;
    &lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
    &lt;url-pattern&gt;*.xhtml&lt;/url-pattern&gt;
   &lt;/servlet-mapping&gt;
  </code></pre>
  
  <p>I've tried to modify the web.xml configuration to change .xhtml to .html, but Faces Servlet serves the files as application/xhtml+xml I guess I could add a filter to the webapp modifying the Content-Type to text/html but that's a bit hacky. </p>
  
  <p>Why JSF with Facelets does not serve the files as html? Or how to do so?</p>
  
  <p><strong>Update</strong> Found how to serve text/html from JSF. You need to add</p>
  
  <pre><code>&lt;f:view contentType="text/html"/&gt;
  </code></pre>
  
  <p>after <code>&lt;html&gt;</code> and before <code>&lt;head&gt;</code></p>
  
  <p>Now it works as expected in chrome.</p>