:in-range & :out-of-range CSS pseudo-classes shouldn't match disabled or readonly inputs

Issue #7190958 • Assigned to Bogdan B.

Details

Author
Chris R.
Created
Apr 13, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Chrome
  • Safari
  • Firefox
Found in build #
13.10586
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

  1. Open the attached testcase webpage in Edge.
  2. Observe the colors of the outlines of the <input>s.
    What is the expected behavior?
    The outlines should be green, indicating that the disabled or readonly <input type=number>s did not match the :in-range or :out-of-range CSS pseudo-classes.
    What went wrong?
    The outlines are orange and red, indicating that the disabled or readonly <input type=number>s matched the :in-range or :out-of-range CSS pseudo-classes.

Attachments

1 attachment

Comments and activity

  • Based on my reading of the HTML spec, :in-range and :out-of-range should never apply to disabled or readonly ``s.

    Per https://html.spec.whatwg.org/multipage/scripting.html#selector-in-range

    The :in-range pseudo-class must match all elements that are candidates for constraint validation, have range limitations, and […]
    The :out-of-range pseudo-class must match all elements that are candidates for constraint validation, have range limitations, and […]

    Per https://html.spec.whatwg.org/multipage/forms.html#candidate-for-constraint-validation

    A submittable element is a candidate for constraint validation except when a condition has barred the element from constraint validation.

    Per https://html.spec.whatwg.org/multipage/forms.html#the-readonly-attribute:barred-from-constraint-validation

    If the readonly attribute is specified on an input element, the element is barred from constraint validation.

    Per https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute:barred-from-constraint-validation

    If an element is disabled, it is barred from constraint validation.

    Thus, disabled and readonly ``s are barred from constraint validation, meaning they are not candidates for constraint validation, thus causing them to be disqualified by the 1st of the 3 conditions which are required for an element to match :in-range or :out-of-range.

  • Microsoft Edge Team

    Changed Assigned To to “Bogdan B.”

    Changed Assigned To from “Bogdan B.” to “Rossen A.”

    Changed Status to “Confirmed”

  • The bleeding-edge versions of Firefox, Chrome, and Safari no longer suffer from the same bug. See note #3 on http://caniuse.com/#feat=css-in-out-of-range

  • Microsoft Edge Team

    Changed Assigned To from “Rossen A.” to “Bogdan B.”

    Changed Status from “Confirmed” to “Won’t fix”

    Changed Status from “Won’t fix”

  • Reactivating auto-resolved valid bugs reported by web dev community. Those were not expected to be resolved. We apologize for any inconvenience!

  • Microsoft Edge Team

    Changed Assigned To to “Bogdan B.”

You need to sign in to your Microsoft account to add a comment.

Sign in