Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Which input types should readonly affect constraint validation for? #8133

Open
nt1m opened this issue Jul 27, 2022 · 2 comments
Open

Which input types should readonly affect constraint validation for? #8133

nt1m opened this issue Jul 27, 2022 · 2 comments
Labels
clarification Standard could be clearer topic: forms

Comments

@nt1m
Copy link
Member

nt1m commented Jul 27, 2022

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:

  1. readonly bars constraint validation from all input types (matches current behavior in all browsers, but incoherent)
  2. readonly bars constraint validation on supported input types (more logical IMHO)
@nt1m nt1m added the agenda+ To be discussed at a triage meeting label Jul 27, 2022
@annevk
Copy link
Member

annevk commented Jul 27, 2022

cc @whatwg/forms

@domenic
Copy link
Member

domenic commented Jul 29, 2022

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.

@past past removed the agenda+ To be discussed at a triage meeting label Aug 5, 2022
nt1m added a commit to nt1m/wpt that referenced this issue Aug 8, 2022
nt1m added a commit to web-platform-tests/wpt that referenced this issue Aug 9, 2022
webkit-early-warning-system pushed a commit to nt1m/WebKit that referenced this issue Aug 11, 2022
https://bugs.webkit.org/show_bug.cgi?id=240343
<rdar://93173726>

Reviewed by Chris Dumez.

We should only apply the readonly attribute on certain input types: https://html.spec.whatwg.org/multipage/input.html#do-not-apply
Except in the constraint validation case (willValidate) for compat reasons, since it affects the :in-range/:out-of-range pseudo-classes, the relevant test has been updated to reflect that.
This also was the resolution of whatwg/html#8133 in the HTML spec triage meeting.

Also introduce isMutable() which corresponds to the spec concept of mutable form control.

* LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/constraints/form-validation-willValidate-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/constraints/form-validation-willValidate.html:
* LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/show-picker-disabled-readonly-expected.txt:
* LayoutTests/platform/mac-wk1/imported/w3c/web-platform-tests/html/semantics/forms/constraints/form-validation-willValidate-expected.txt:
* LayoutTests/platform/mac-wk1/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/show-picker-disabled-readonly-expected.txt: Added.
* Source/WebCore/html/BaseDateAndTimeInputType.cpp:
(WebCore::BaseDateAndTimeInputType::valueMissing const):
(WebCore::BaseDateAndTimeInputType::handleDOMActivateEvent):
* Source/WebCore/html/ColorInputType.cpp:
(WebCore::ColorInputType::isKeyboardFocusable const):
* Source/WebCore/html/HTMLFormControlElement.cpp:
(WebCore::HTMLFormControlElement::HTMLFormControlElement):
(WebCore::HTMLFormControlElement::parseAttribute):
(WebCore::HTMLFormControlElement::computeWillValidate const):
* Source/WebCore/html/HTMLFormControlElement.h:
(WebCore::HTMLFormControlElement::supportsReadOnly const):
(WebCore::HTMLFormControlElement::isReadOnly const):
(WebCore::HTMLFormControlElement::isMutable const):
(WebCore::HTMLFormControlElement::isDisabledOrReadOnly const): Deleted.
* Source/WebCore/html/HTMLInputElement.cpp:
(WebCore::HTMLInputElement::updateType):
(WebCore::HTMLInputElement::supportsReadOnly const):
(WebCore::HTMLInputElement::showPicker):
(WebCore::HTMLInputElement::matchesReadWritePseudoClass const):
(WebCore::HTMLInputElement::createInnerTextStyle):
* Source/WebCore/html/HTMLInputElement.h:
* Source/WebCore/html/HTMLTextAreaElement.cpp:
(WebCore::HTMLTextAreaElement::matchesReadWritePseudoClass const):
* Source/WebCore/html/HTMLTextAreaElement.h:
* Source/WebCore/html/HTMLTextFormControlElement.cpp:
(WebCore::HTMLTextFormControlElement::isInnerTextElementEditable const):
* Source/WebCore/html/SearchInputType.cpp:
(WebCore::SearchInputType::handleKeydownEvent):
* Source/WebCore/html/TextFieldInputType.cpp:
(WebCore::TextFieldInputType::valueMissing const):
(WebCore::TextFieldInputType::handleKeydownEventForSpinButton):
(WebCore::TextFieldInputType::shouldSpinButtonRespondToMouseEvents const):
(WebCore::TextFieldInputType::shouldDrawCapsLockIndicator const):
(WebCore::TextFieldInputType::shouldDrawAutoFillButton const):
* Source/WebCore/html/shadow/SliderThumbElement.cpp:
(WebCore::SliderThumbElement::handleTouchEvent):
* Source/WebCore/html/shadow/TextControlInnerElements.cpp:
(WebCore::SearchFieldCancelButtonElement::defaultEventHandler):
(WebCore::SearchFieldCancelButtonElement::willRespondToMouseClickEventsWithEditability const):

Canonical link: https://commits.webkit.org/253321@main
@zcorpan zcorpan added the clarification Standard could be clearer label Aug 11, 2022
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Sep 5, 2022
…onstraint validation on 'unsupported' types, a=testonly

Automatic update from web-platform-tests
readonly attribute should still affect constraint validation on 'unsupported' types (#35389)

See whatwg/html#8133 and whatwg/html#8089
--

wpt-commits: b7eb2920ba4cea3af51fdc4e11eddacd26f9a3ac
wpt-pr: 35389
aperezdc pushed a commit to WebKit/WebKit that referenced this issue Jan 30, 2023
…gi?id=240343

    readonly attribute should only apply on certain input types
    https://bugs.webkit.org/show_bug.cgi?id=240343
    <rdar://93173726>

    Reviewed by Chris Dumez.

    We should only apply the readonly attribute on certain input types: https://html.spec.whatwg.org/multipage/input.html#do-not-apply
    Except in the constraint validation case (willValidate) for compat reasons, since it affects the :in-range/:out-of-range pseudo-classes, the relevant test has been updated to reflect that.
    This also was the resolution of whatwg/html#8133 in the HTML spec triage meeting.

    Also introduce isMutable() which corresponds to the spec concept of mutable form control.

    * LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/constraints/form-validation-willValidate-expected.txt:
    * LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/constraints/form-validation-willValidate.html:
    * LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/show-picker-disabled-readonly-expected.txt:
    * LayoutTests/platform/mac-wk1/imported/w3c/web-platform-tests/html/semantics/forms/constraints/form-validation-willValidate-expected.txt:
    * LayoutTests/platform/mac-wk1/imported/w3c/web-platform-tests/html/semantics/forms/the-input-element/show-picker-disabled-readonly-expected.txt: Added.
    * Source/WebCore/html/BaseDateAndTimeInputType.cpp:
    (WebCore::BaseDateAndTimeInputType::valueMissing const):
    (WebCore::BaseDateAndTimeInputType::handleDOMActivateEvent):
    * Source/WebCore/html/ColorInputType.cpp:
    (WebCore::ColorInputType::isKeyboardFocusable const):
    * Source/WebCore/html/HTMLFormControlElement.cpp:
    (WebCore::HTMLFormControlElement::HTMLFormControlElement):
    (WebCore::HTMLFormControlElement::parseAttribute):
    (WebCore::HTMLFormControlElement::computeWillValidate const):
    * Source/WebCore/html/HTMLFormControlElement.h:
    (WebCore::HTMLFormControlElement::supportsReadOnly const):
    (WebCore::HTMLFormControlElement::isReadOnly const):
    (WebCore::HTMLFormControlElement::isMutable const):
    (WebCore::HTMLFormControlElement::isDisabledOrReadOnly const): Deleted.
    * Source/WebCore/html/HTMLInputElement.cpp:
    (WebCore::HTMLInputElement::updateType):
    (WebCore::HTMLInputElement::supportsReadOnly const):
    (WebCore::HTMLInputElement::showPicker):
    (WebCore::HTMLInputElement::matchesReadWritePseudoClass const):
    (WebCore::HTMLInputElement::createInnerTextStyle):
    * Source/WebCore/html/HTMLInputElement.h:
    * Source/WebCore/html/HTMLTextAreaElement.cpp:
    (WebCore::HTMLTextAreaElement::matchesReadWritePseudoClass const):
    * Source/WebCore/html/HTMLTextAreaElement.h:
    * Source/WebCore/html/HTMLTextFormControlElement.cpp:
    (WebCore::HTMLTextFormControlElement::isInnerTextElementEditable const):
    * Source/WebCore/html/SearchInputType.cpp:
    (WebCore::SearchInputType::handleKeydownEvent):
    * Source/WebCore/html/TextFieldInputType.cpp:
    (WebCore::TextFieldInputType::valueMissing const):
    (WebCore::TextFieldInputType::handleKeydownEventForSpinButton):
    (WebCore::TextFieldInputType::shouldSpinButtonRespondToMouseEvents const):
    (WebCore::TextFieldInputType::shouldDrawCapsLockIndicator const):
    (WebCore::TextFieldInputType::shouldDrawAutoFillButton const):
    * Source/WebCore/html/shadow/SliderThumbElement.cpp:
    (WebCore::SliderThumbElement::handleTouchEvent):
    * Source/WebCore/html/shadow/TextControlInnerElements.cpp:
    (WebCore::SearchFieldCancelButtonElement::defaultEventHandler):
    (WebCore::SearchFieldCancelButtonElement::willRespondToMouseClickEventsWithEditability const):

    Canonical link: https://commits.webkit.org/253321@main
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
clarification Standard could be clearer topic: forms
Development

No branches or pull requests

5 participants