1532968 - form input[type=“checkbox”] is considered as readonly by Firefox but it shouldn't

Status: RESOLVED INVALID

(Core :: DOM: Core & HTML, defect, P3)

Description

[tomasz.kapalka]

Attachment: index.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36

Steps to reproduce:

The whole bug and an live example is described on: https://stackoverflow.com/questions/55021057/why-form-inputtype-checkbox-is-considered-as-readonly-by-firefox-but-it-shou

1. Create a simple form with input type set to checkbox like so:
   <form id="book-form">
   <div>
   <label for="title">Checkbox test</label>
   <input type="checkbox"
   checked="true"
   id="checkbox">
   </div>
   </form>
2. Define style for the HTML:
   form input:-moz-read-only,
   form input:-moz-read-only:hover,
   form input:-moz-read-only:focus {
   cursor: not-allowed;
   }

Actual results:

The input with checkbox type is considered as read-only. Cursor: not-allowed is applied.

Expected results:

The input shouldn't be considered as read-only. Default cursor should be applied.

I have other form input fields and it seems to work just fine.

Comment 1

[tomasz.kapalka]

I forgot to mention that all other browsers works just fine with following CSS:
form input:read-only, form input:read-only:hover, form input:read-only:focus {
border-color: #dddddd !important;
background: transparent;
cursor: not-allowed; }

Comment 2

[Mats Palmgren (inactive)]

:read-only applies when :read-write doesn't apply, per:
https://html.spec.whatwg.org/multipage/semantics-other.html#selector-read-only
The conditions for :read-write to apply are:

1. "input elements to which the readonly attribute applies ..."
   No, the readonly attribute does apply for type=checkbox, per:
   https://html.spec.whatwg.org/multipage/input.html#concept-input-apply
2. "textarea elements..."
   No, it's not a textarea
3. "elements that are editing hosts or editable and are neither input elements nor textarea elements"
   No

So, :read-write does not apply, hence :read-only applies, per:
"The :read-only pseudo-class must match all other HTML elements."

Please file a HTML spec issue if you want it to work in some other way.
https://github.com/whatwg/html/issues/

Comment 3

[Mats Palmgren (inactive)]

I filed a Chrome bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=939143

Comment 4

[tomasz.kapalka]

I have found different information under the same links:
You wrote:
":read-only applies when :read-write doesn't apply, per:
https://html.spec.whatwg.org/multipage/semantics-other.html#selector-read-only"

but...
according to the specification it's the other way:
"The :read-write pseudo-class must match any element falling into one of the following categories, which for the purposes of Selectors are thus considered user-alterable: [SELECTORS]

• input elements to which the readonly attribute applies, and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled)"

so..
it's: :read-write applies when :read-only doesn't apply!

and..
:read-only applies ONLY when the attribute IS provided!

The conclusion is:
The bug is on Firefox side. Chromium works OK and the bug you have reported for Chromium is invalid!

Comment 5

[Peter Van der Beken [:peterv]]

(In reply to tomasz.kapalka from comment #4)

"The :read-write pseudo-class must match any element falling into one of the following categories, which for the purposes of Selectors are thus considered user-alterable: [SELECTORS]

• input elements to which the readonly attribute applies, and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled)"

The HTML spec is unambiguous, the readonly attribute does not apply to checkboxes. So <input type="checkbox"> is not an "input elements to which the readonly attribute applies". The first part of this condition is false, how can you then claim that the whole condition is true?

I see you commented in the Chromium bug to have them mark it invalid, but I think you should first try to get the spec changed if you think its behaviour is wrong.

Comment 6

[tomasz.kapalka]

@pererv
(In reply to Peter Van der Beken [:peterv] from comment #5)

(In reply to tomasz.kapalka from comment #4)

"The :read-write pseudo-class must match any element falling into one of the following categories, which for the purposes of Selectors are thus considered user-alterable: [SELECTORS]

• input elements to which the readonly attribute applies, and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled)"

The HTML spec is unambiguous, the readonly attribute does not apply to checkboxes. So <input type="checkbox"> is not an "input elements to which the readonly attribute applies". The first part of this condition is false, how can you then claim that the whole condition is true?

I see you commented in the Chromium bug to have them mark it invalid, but I think you should first try to get the spec changed if you think its behavior is wrong.

The spec clearly say:
"The :read-write pseudo-class must match any element falling into one of the following categories, which for the purposes of Selectors are thus considered user-alterable: [SELECTORS]"

1. The input checkbox has read-only attribute! (FALSE as it can't ave it)
2. The input checkbox is NOT disabled (FALSE) (in this case)

This means that the checkbox is MUTABLE and this is ONLY what we care about in this case!

Comment 7

[Peter Van der Beken [:peterv]]

(In reply to tomasz.kapalka from comment #6)

1. The input checkbox has read-only attribute! (FALSE as it can't ave it)
2. The input checkbox is NOT disabled (FALSE) (in this case)

This means that the checkbox is MUTABLE and this is ONLY what we care about in this case!

I think you're misreading the spec. There are two conditions in the sentence that I quoted:

1. input elements to which the readonly attribute applies,
   and
2. that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled)

Both have to be true to apply, that's why there is an 'and' in between. The first condition is not true, the readonly attribute doesn't apply to <input type="checkbox">, so the whole condition can never be true. Or are you arguing that the first condition does apply?

Comment 8

[tomasz.kapalka]

(In reply to Peter Van der Beken [:peterv] from comment #7)

(In reply to tomasz.kapalka from comment #6)

1. The input checkbox has read-only attribute! (FALSE as it can't ave it)
2. The input checkbox is NOT disabled (FALSE) (in this case)

This means that the checkbox is MUTABLE and this is ONLY what we care about in this case!

I think you're misreading the spec. There are two conditions in the sentence that I quoted:

1. input elements to which the readonly attribute applies,
   and
2. that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled)

Both have to be true to apply, that's why there is an 'and' in between. The first condition is not true, the readonly attribute doesn't apply to <input type="checkbox">, so the whole condition can never be true. Or are you arguing that the first condition does apply?

Hmm if I am misreading the spec Firefox does the same as why it treats the input checkbox as read-only? From what you are saying it shouldn't treat it neither as read-only nor read-write!

Comment 9

[Peter Van der Beken [:peterv]]

(In reply to tomasz.kapalka from comment #8)

Hmm if I am misreading the spec Firefox does the same as why it treats the input checkbox as read-only? From what you are saying it shouldn't treat it neither as read-only nor read-write!

Yes it should: "The :read-only pseudo-class must match all other HTML elements". This really is invalid, Firefox is following the spec.

Comment 10

[tomasz.kapalka]

The spec says what's following:
"Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply."
But Firefox still makes checkbox as read-only!

Comment 11

[Peter Van der Beken [:peterv]]

Please stop reopening the bug.

You're confusing making a text control read-only with applying the :read-only pseudo-class. I specifically quoted the language for the :read-only pseudo-class, which should be applied to any HTML element that :read-write doesn't apply to. :read-write doesn't apply to a checkbox.

There are web-platform tests for exactly this: https://github.com/web-platform-tests/wpt/blob/master/html/semantics/selectors/pseudo-classes/readwrite-readonly.html See the results at: https://wpt.fyi/results/html/semantics/selectors/pseudo-classes/readwrite-readonly.html?label=master&product=chrome%5Bexperimental%5D&product=edge&product=firefox%5Bexperimental%5D&product=safari%5Bexperimental%5D&aligned (Firefox fails all the tests because we only support prefixed :moz-read-only/write).

Comment 12

[Sebastian Zartner [:sebo]]

(In reply to Peter Van der Beken [:peterv] from comment #11)

Firefox fails all the tests because we only support prefixed :moz-read-only/write

For what it's worth, unprefixing :-moz-read-only/write is covered in bug 312971.

Sebastian