Skip to content

Latest commit

 

History

History
470 lines (375 loc) · 10.2 KB

todo.md

File metadata and controls

470 lines (375 loc) · 10.2 KB

Milestones for html-tag-validator

  • [1.0.0] Done
    • Validate HTML documents against HTML 5 spec
    • Parsing an HTML document to generate an AST
    • doctype definition
    • HTML 5 elements
    • HTML 5 attributes
    • Enhanced validation for script, style, link and meta elements
    • Basic support for iframe elements
    • HTML comments
    • Conditional comments
    • Allowed <input> element type values and the attributes supported by each type
    • A properly-formed HTML 5 document should have a <title> element with contents
    • Void elements
    • Void and normal attributes
    • Allow for options to be provided to parser before running
    • Create documentation for 0.2.x release
    • Correct attribute validation for input tags based on type
  • [1.1.x] Planned
    • Add settings block to options object to toggle global settings
      • Have strict and non-strict attribute and tag modes
        • Have rule for handling unknown tags
      • Have replacement vs merge setting for custom attributes
      • Have adapter settings for error format
      • Update readme to contain descriptions of new settings
    • Create conditional and conditions in attributes (options object) to handle allowed attributes changing based on the value of another attribute in the tag (e.g.: input element)
  • [1.2.x] Planned
    • More accurate HTML 5 spec compliance for type: 'element' tags
    • Allow plugins to extend validations performed by parser
    • Better handling of other special HTML elem such as canvas
    • Ability to preserve whitespace in pre tags
  • [2.0.0] Planned
    • Have a tool for traversing the AST generated by the parser (probably as a standalone library)

Checklist for v1.x

v 1.1.0

  • Malformed starting tags gave wrong error message

    <div>
  <p class
  </p>
</div>

  • Having HTML or XML elements inside of a conditional comment caused parse errors

    <!--[if ie]>
  <style>
    .breaking {
      content: "whoops!";
    }
  </style>
<![endif]-->

  • Add settings block to options object to toggle global settings

    {
  'settings': {
    'format': 'markdown'
  }
}

  • Have strict and non-strict attribute and tag modes

    {
  'settings': {
    'validateAttributes': true,
    'ignoreUnknownAttributes': false
  }
}

1.2.0

  • Allow plugins to extend validations performed by parser

  • More accurate HTML 5 spec compliance for type: 'element' tags

    • Validate elements allow for event and global attributes

  • Better handling of other special HTML elements

    <canvas></canvas>

  • parse pre tags without trimming whitespace like regular elements

    • This is tricky because there could still be other HTML elements within the pre tag that should still be parsed
    <pre>

  The whitespace above, below and          here
  should be preserved.

  <input type="text" value="what happens to me?">
</pre>

Checklist for v1.0.0

Testing

  • Set up grunt and create tasks to automate development, testing, building, etc...

HTML attributes

  • Regular value="bees" and value='bees'
  • Attributes without quotes value=1
  • Attributes without values checked
  • Angular 2.0 values [checked]="true" (click)="myFunc()"
  • Inline style declarations style="color: bold; content: 'my text';"
  • Inline JavaScript in event attributes click="run(event)"

Self-closing tags

  • Enforce whitelist of self-closing tags

  • Enforce rule against invalid XHTML format <img src="cat.gif" /> this is okay/ignored according to spec

  • Support self-closing tag syntax

    <img src="cat.gif">

HTML DOCTYPE declarations

  • Support DOCTYPE syntax

  • Enforce correct DOCTYPE position in document

  • Allow for having a DOCTYPE definition inside of an iframe element within a parent document

    <!DOCTYPE html>

Special tags

  • whitelist of allowed attributes global and event for all special tags
  • whitelist of required, normal, and void attributes for each special tag

Hierarchal rules

  • If you omit the title tag, the document will not validate as HTML
  • You can not have more than one title element in an HTML document
  • The link element goes only in the head section of an HTML document
  • The meta element goes only in the head section of an HTML document
  • If the "scoped" attribute is not used, each style tag must be located in the head section.

Tag-specific rules

  • title

    • title tag is required to have content between the start and end tags

      <head>
  <title>Nick's happy fun page</title>
</head>

  • script tags

    • validate script tags only have specific attributes
    • a script tag cannot have a src AND contents at the same time
    <script type="text/javascript" async src="cat.js"></script>

  • style tags

    • validate style tags only have specific attributes
    <style type="text/css"></style>

  • iframe tags

    • validate iframe tags only have specific attributes
    <iframe src="cats.html"></iframe>

  • pre tags

    <pre>

  The whitespace above, below and above here
  should be preserved.

</pre>

  • link tags

    • validate link tags as void elements with specific attributes

      <head>
  <link rel="stylesheet" type="text/css" href="theme.css">
</head>

  • meta tags

    • validate meta tags as void elements

    • validate meta tags only have specific attributes

    • validate meta tags have specific rules for content, name and http-equiv attributes

      <head>
  <meta charset="UTF-8">
  <meta name="author" content="Nick Wronski">
</head>

  • input tags

    • Correct attribute validation for input tags based on type

      <input type="checkbox" checked="checked">

Text nodes

  • parse text nodes

    <p>
  text node
  <strong>content within strong tag</strong>
</p>

Comment nodes

  • parse block comments

    <!--This is a comment. Comments are not displayed in the browser-->

Conditional comments

  • parse conditional comments

    <!--[if gte mso 12]>
  <style>
    td {
      mso-line-height-rule: exactly;
    }
  </style>
<![endif]-->

Create standard AST format

  • Base format and DOCTYPE

    • DOCTYPE
    • base format
      • object for single root element, or array for multiple root elements
    doctype:    html
document:   []

  • element (includes link and meta special tags)

    • self-closing

      type:       element
void:       true
name:       input
attributes:
  value:    bees
children:   []

    • normal (closing)

      type:       element
void:       false
name:       div
attributes: {}
children:   []

  • script, style

    type:       script
attributes:
  type:     text/javascript
contents:
  """

    var Cat;

    Cat = (function() {
      function Cat(name1) {
        this.name = name1;
      }

      Cat.prototype.meow = function() {
        return "Meow, my name is " + name + "!";
      };

      return Cat;

    })();

    var myCat = new Cat("Catherine Catterson");
    alert(myCat.meow());

  """

  • style

    type:       style
attributes:
  type: text/css
contents:
  """

    p {
      color: black;
    }

    body {
      background-color: white;
    }

    .main {
      color: #FF1212;
      font-weight: bold;
    }

  """

  • title

    type:       title
attributes: {}
contents:   Nick's happy fun page

  • iframe

    type:         iframe
attributes:
  height:     300px
  width:      400px
contents:
  doctype:    html
  document:   []

  • text

    type:     text
contents: Hello there

  • comment

    • block comment

      type:        comment
conditional: false
condition:   null
children:
  type:     text
  contents: Some sort of html comment

    • conditional block comment

      type:        comment
conditional: true
condition:   if ie 8
children:
  type:       element
  void:       false
  name:       p
  attributes: {}
  children:
    -
      type:     text
      contents: IE is version 8!

  • Have parser export AST

    • Partially completed (does not have all types yet)

AST spec (in progress)

{
  "doctype": "html",
  "document": {
    "type": "element",
    "void": false,
    "name": "html",
    "attributes": { },
    "children": [
      {
        "type": "element",
        "void": false,
        "name": "head",
        "attributes": {},
        "children": [
          {
            "type": "script",
            "contents": "function myFunc() { console.log('hello, world!'); };"
          },
          {
            "type": "script",
            "attributes": {
              "type": "javascript",
              "src": "path/to/my/script.js"
            },
            "contents": null
          }
        ]
      },
      {
        "type": "element",
        "void": false,
        "name": "body",
        "attributes": {
          "class": "class1 class2",
          "bgcolor": "black"
        },
        "children": [
          {
            "type": "text",
            "content": "I am some text"
          },
          {
            "type": "element",
            "void": false,
            "name": "p",
            "attributes": {
              "id": "myPTag",
              "style": "font-weight: bold;"
            },
            "children": [
              {
               "type": "text",
               "content": "I am some more text"
              }
            ]
          }
        ]
      }
    ]
  }
}