CSS :read-only is applied to elements that are not readonly

Question

can someone explain to me why the css pseudo class :read-only is applied to elements that are not readonly?

See https://codepen.io/xsrf/pen/RwgZepb

I tested this in recent Edge, Chrome and Firefox. All apply the input:read-only to <input type="button" />

https://www.w3schools.com/cssref/sel_read-only.asp says

The :read-only selector selects elements which are "readonly". Form elements with a "readonly" attribute are defined as "readonly".

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly says:

When an input has the readonly attribute, the :read-only pseudo-class also applies to it. Conversely, inputs that support the readonly attribute but don't have the attribute set match the :read-write pseudo-class.

Answer 1

Had a similar problem with an input with the type="checkbox". The read-only selector even took the ones without the "readonly" attribute.

While this selected also the inputs not set readonly

element:read-only{
   #code
}

This chose the elements as I wanted them to.

input[readonly]{
   #code
}