html
html copied to clipboard
Which input types should readonly affect constraint validation for?
Given this example:
data:text/html,<input type=range min=0 max=100 value=50><input type=range readonly min=0 max=100 value=50><style>input:in-range { appearance: none; border: 1px solid red; }</style>
:in-range
seems to be affected by whether an input is readonly, which makes sense when you read:
Constraint validation: If the readonly attribute is specified on an input element, the element is barred from constraint validation.` from https://html.spec.whatwg.org/multipage/input.html#the-readonly-attribute
but on the other hand, the spec says that readonly does not apply to input[type=range] : https://html.spec.whatwg.org/multipage/input.html#do-not-apply
By that logic, I would expect readonly
to have no effect on the :in-range
selector for input[type=range]
.
WebKit & Firefox & Chrome all (probably unintentionally) have this incoherency, it is worth a clarification on whether:
- readonly bars constraint validation from all input types (matches current behavior in all browsers, but incoherent)
- readonly bars constraint validation on supported input types (more logical IMHO)
cc @whatwg/forms
I think a strict reading of the spec supports current browser behavior. "do not apply" is a boolean predicate, and what effects it has are determined by other parts of the spec, which consult that predicate.
Just because "do not apply" = true for (<input type=range>
, readonly=""
), that doesn't mean "everything to do with readonly
stops applying to <input type=range>
". (For example, basic behaviors like the fact that rangeInput.setAttribute("readonly", "")
causes rangeInput.hasAttribute("readonly")
to return true, or rangeAttribute.matches("[readonly]")
, still "apply".)
So since the part of the spec defining :in-range
doesn't consult the "do not apply" predicate, there's no impact.
This could be clarified by renaming "do not apply" to something like "mostly doesn't apply" or "has most features disabled", I suppose, and explaining the above.