HTML5 forms: more accurate tests for html5test.com

html5test is a good test. It's easy to understand. Neils found a good way to rate HTML5 support. It's not perfect, but I think a perfect test is not possible if you want to keep it simple. But there's still room for improvements.

Look at the current version of html5test, the Forms part. Webkit has a good score (34/38, 89%), although their HTML5 forms support is incomplete (no UI, validity barely implemented, but they expose the input type). The way forms are tested is not that accurate: just testing if the input type is supported as a DOM property is not enough. The good way is to check that the constraint is actually applied (input.validity.valid).

//Exemple: testing <input type=email>

/*
 * How it was tested
 */
var valid = (input.type == "email");


/*
 * A better way to test it
 */

input.value = "foo";
var valid = false;
if (!input.validity.valid) {
  input.value = "foo@bar.org";
    if (input.validity.valid) {
      valid = true;
    }
}

I also added some tests for input.form, input.labels and label.control. I'm also testing the forms related CSS selectors (:required, :optional, :valid and :invalid).

I sent a patch to Neils. You can see the result here beta.html5test.com. Basically, webkit score is less good now for the forms section (29/45, 64%), but still better than Firefox4 ;) (and still very good for Opera).