DOMLint - Test suite against HTML/DOM conflicts

Powered by: Yahoo! Query Language
Created by: Juriy "kangax" Zaytsev

DOMLint requires Javascript enabled

Tests description:

  1. Names of form controls are populated as properties of "parent" form element and might conflict with "actual" properties of a form element (either own or inherited via "interface chain")
    Interfaces tested against are HTMLFormElement, HTMLElement, Element, Node, EventTarget, ElementCSSInlineStyle as well as Object.prototype
      <form>
        <input type="text" name="submit" value="Submit!">
        <input type="text" name="style">
      </form>
      ...
      <script type="text/javascript">
        document.forms[0].submit; // "[object HTMLInputElement]"
        document.forms[0].style; // "[object HTMLInputElement]"
      </script>
  2. Form names are populated as properties of `document` and might conflict with document's "actual" properties (either own or inherited via "interface chain")
    Interfaces tested against are HTMLDocument, Document, Node, EventTarget as well as Object.prototype
      <form name="getElementById">
        ...
      </form>
      <form name="body">
        ...
      </form>
      ...
    
      <script type="text/javascript">
        document.getElementById; // "[object HTMLFormElement]"
        document.body; // "[object HTMLFormElement]"
      </script>
  3. In MSHTML DOM, values of "name" or "id" attributes of elements that are not form controls become accessible via global identifiers. These values might conflict with properties of a global object.
    Interfaces tested against are AbstractView, EventTarget
      <div id="addEventListener">
        ...
      </div>
      ...
      <script type="text/javascript">
        window.addEventListener; // "[object HTMLDivElement]"
      </script>
  4. In MSHTML DOM, id values of elements in NodeList are populated as properties of that NodeList. These values might conflict with actual properties of NodeList - item, length, etc. Opera is partially affected in the same way - while length is never shadowed, such NodeList methods as item and namedItem are.
    Tested against NodeList and Object.prototype
      <div id="item">
        ...
      </div>
      ...
      <span id="length"></span>
      ...
      <script type="text/javascript">
        document.getElementsByTagName('div').item; // [object HTMLDivElement]
        document.getElementsByTagName('span').length; // [object HTMLSpanElement]
      </script>
  5. Intrinsic event handlers have their scope augmented with element object itself, a parent `form` (when applicable) and `document` elements. Due to such augmentation, there is a chance of conflicts between named form controls and global properties - e.g. window, document, etc, (that might be used in those event handlers)
    Tested against DOM L0 global properties
      <form name="window" onclick="console.log(window, setInterval)">
        <input name="setInterval">
      </form>
      // when clicked, logs [object HTMLFormElement], [object HTMLInputElement]
      
  6. In MSHTML DOM element attributes and properties directly map to each other.
    Custom attributes can therefore conflict with properties Prototype.js extends elements with. Moreover, some of the properties when present on document element might conflict with those added by Prototype.js. They can also break Prototype.js entirely (as per: 1.6.0.3)
      <div id="test" show="foo">
        ...
      </div>
      ...
      <form name="evaluate" action="/"></form>
      ...
      <script type="text/javascript">
        $('test').show; // "[object HTMLDivElement]"
        Prototype.BrowserFeatures.XPath; // true (due to truthy `document.evaluate`)
      </script>

Thanks to Garrett Smith for writing an Unsafe Names for HTML Form Controls article which inspired me to create this tool.