title: Why does firefox change align="center" to align="middle"?
body: <p>I know that <code>img.align</code> is <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" rel="nofollow noreferrer">deprecated</a> or even obsolete, still ... Firefox is changing the values of my attributes. In particular see example</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const img = document.querySelector("img");
  console.log("img.align:", img.align);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="http://www.gravatar.com/avatar" align="center" &gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>results:</p>
  
  <ul>
  <li>chrome: <code>img.align: center</code></li>
  <li>firefox: <code>img.align: middle</code></li>
  </ul>
  
  <p>Any idea why firefox changes the value of the attribute? Are there other attribute values firefox changes?</p>
  
  <p>This has implications for code like</p>
  
  <pre><code>document.querySelectorAll("img[align=center]")
  </code></pre>
  
  <p>Which fails on Firefox (only) and so would any CSS using the same selector; <code>img[align=center] { ... }</code>, for example.</p>
  
  <p>Possibly relevant: <a href="https://stackoverflow.com/questions/1735230/can-i-add-custom-attribute-to-html-tag">Can I add custom attribute to HTML tag?</a></p>