Re: Browser inconsistencies wrt data validity semantics on form elements

2013-12-23 17:36, Šime Vidas wrote:
> Premise: If the :invalid and :valid selectors apply on a form element, 
> th[e]n that element has data validity semantics.

Well, I would rather say that it’s defined the other way around, in 
principle, but the pseudo-classes are a simple way to test things. There 
are some pitfalls, though. A more direct way is to test the validity 
property of an element object.

>
> I've tested in a few desktop browsers (on Windows) and I've noticed 
> some inconsistencies: The <form> element does not have data validity 
> semantics in Chrome/IE11 but it has in Firefox. The behavior is 
> opposite wrt <input type=submit> (Semantics in chrome/IE11 but not in 
> Firefox).
>
> Live demo: http://jsfiddle.net/RxLzM/4/
>
> From what I can see in the HTML 5.1 spec, there seem to be no validity 
> requirements for <input type=submit>, and I'm not sure about <form>.
An <input> element, classified as a submittable element (when type is 
other than hidden), is a candidate for constraint validation. For <input 
type=submit>, the only way it can be in the invalid state is when set so 
with setCustomValidity(). So in your test, it should always have green 
outline.

A <form> element is not a submittable element and does not have the 
validity property. So it seems that in your test, it should have black 
outline.

So it seems, but... the :invalid and :valid selectors are defined at
http://www.w3.org/html/wg/drafts/html/master/single-page.html#pseudo-classes
so that a <form> element, though it does not have the validity property, 
still is in the valid or invalid state in the sense of matching either 
:valid or :invalid. A <form> element matches :invalid when it is “the 
form owner 
<http://www.w3.org/html/wg/drafts/html/master/single-page.html#form-owner> 
of one or more elements that themselves are candidates for constraint 
validation 
<http://www.w3.org/html/wg/drafts/html/master/single-page.html#candidate-for-constraint-validation> 
but do not satisfy their constraints 
<http://www.w3.org/html/wg/drafts/html/master/single-page.html#satisfies-its-constraints>”.

When testing the elements in your example in Firefox and inspecting 
their validity property,  the <input type=submit> element has the 
validity property, which has the valid property set to true, and the 
<form> element lacks the validity property. This corresponds to what 
HTML5 CR and HTML 5.1 say.

So both browsers are wrong, in their implementations of these CSS 
features. Firefox is wrong in not showing green outline for <input 
type=submit>. Chrome (and IE 11) is wrong in not showing red outline for 
the <form> elements that has a control that does not satisfy its constraint.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

Received on Monday, 23 December 2013 19:20:51 UTC