From 49d2032f1eba98d602654646df487ac5f6c00b80 Mon Sep 17 00:00:00 2001 From: Anne van Kesteren Date: Tue, 2 Jul 2024 17:23:30 +0200 Subject: [PATCH 1/2] Enhance with alpha and colorspace=display-p3 The new alpha and colorspace attributes give it parity with the 2D canvas API. As part of this change we do away with the "simple color" concept as that has been replaced by CSS colors now. Fixes #3400. --- source | 372 ++++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 265 insertions(+), 107 deletions(-) diff --git a/source b/source index f27cfb126c9..b78a1ba115b 100644 --- a/source +++ b/source @@ -6799,78 +6799,15 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute -

Colors

- -

A simple color consists of three 8-bit numbers in the - range 0 to 255, inclusive, representing the red, green, and blue components of the color - respectively, in the 'srgb' color space.

- -

A string is a valid simple color if it is - exactly seven characters long, and the first character is a U+0023 NUMBER SIGN character (#), and - the remaining six characters are all ASCII hex digits, with the first two digits - representing the red component, the middle two digits representing the green component, and the - last two digits representing the blue component, in hexadecimal.

- -

A string is a valid lowercase simple - color if it is a valid simple color and doesn't use any characters in the range - U+0041 LATIN CAPITAL LETTER A to U+0046 LATIN CAPITAL LETTER F.

-
-

The rules for parsing simple color - values are as given in the following algorithm. When invoked, the steps must be followed in - the order given, aborting at the first step that returns a value. This algorithm will return - either a simple color or an error.

- -
    -

  1. Let input be the string being parsed.

    2. - -

  2. If input is not exactly seven characters long, then return an - error.

    3. - -

  3. If the first character in input is not a U+0023 NUMBER SIGN character - (#), then return an error.

    4. - -

  4. If the last six characters of input are not all ASCII hex - digits, then return an error.

    5. - -

  5. Let result be a simple color.

    - -

  6. Interpret the second and third characters as a hexadecimal number and let the result be - the red component of result.

    - -

  7. Interpret the fourth and fifth characters as a hexadecimal number and let the result be - the green component of result.

    - -

  8. Interpret the sixth and seventh characters as a hexadecimal number and let the result be - the blue component of result.

    - -

  9. Return result.

    -
- -

The rules for serializing - simple color values given a simple color are as given in the following - algorithm:

- -
    -

  1. Let result be a string consisting of a single U+0023 NUMBER SIGN - character (#).

    2. - -

  2. Convert the red, green, and blue components in turn to two-digit hexadecimal numbers using - ASCII lower hex digits, zero-padding if necessary, - and append these numbers to result, in the order red, green, blue.

    - -

  3. Return result, which will be a valid lowercase simple - color.

    4. -
- -
+

Legacy colors

Some obsolete legacy attributes parse colors in a more complicated manner, using the rules for parsing a legacy color value, which are given in the following algorithm. When invoked, the steps must be followed in the order given, aborting at the first step that returns a value. This algorithm will return - either a simple color or an error.

+ either a CSS color or an error.

  1. Let input be the string being parsed.

    2. @@ -6883,9 +6820,9 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute string "transparent", then return an error.

  2. -

    If input is an ASCII case-insensitive match for one of the - named colors, then return the simple color - corresponding to that keyword. CSSCOLOR

    +

    If input is an ASCII case-insensitive match for one of the named colors, then return the CSS color corresponding to that + keyword. CSSCOLOR

    CSS2 System @@ -6898,7 +6835,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute ASCII hex digits, then:

      -

    1. Let result be a simple color.

      +

    2. Let result be a CSS color.

    3. Interpret the second character of input as a hexadecimal digit; let the red component of result be the resulting number multiplied by 17.

      @@ -6942,7 +6879,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute

    4. If length is still greater than two, truncate each component, leaving only the first two characters in each.

      5. -

    5. Let result be a simple color.

      +

    6. Let result be a CSS color.

    7. Interpret the first component as a hexadecimal number; let the red component of result be the resulting number.

      8. @@ -6955,11 +6892,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
-
- -

The 2D graphics context has a separate - color syntax that also handles opacity.

-

Space-separated tokens

@@ -46458,9 +46390,11 @@ interface HTMLLabelElement : HTMLElement {
Content attributes:
Global attributes
accept
+
alpha
alt
autocomplete
checked
+
colorspace
dirname
disabled
form
@@ -46587,10 +46521,12 @@ interface HTMLInputElement : HTMLElement { [HTMLConstructor] constructor(); [CEReactions] attribute DOMString accept; + [CEReactions] attribute boolean alpha; [CEReactions] attribute DOMString alt; [CEReactions] attribute DOMString autocomplete; [CEReactions] attribute boolean defaultChecked; attribute boolean checked; + [CEReactions] attribute DOMString colorSpace; [CEReactions] attribute DOMString dirName; [CEReactions] attribute boolean disabled; readonly attribute HTMLFormElement? form; @@ -46786,9 +46722,11 @@ interface HTMLInputElement : HTMLElement {

Which of the accept, + alpha, alt, autocomplete, checked, + colorspace, dirname, formaction, formenctype, @@ -46893,6 +46831,30 @@ interface HTMLInputElement : HTMLElement { · + + alpha + · + · + + · + · + · + · + + + + · + · + · + Yes + · + + · + · + · + · + + alt · @@ -46965,6 +46927,30 @@ interface HTMLInputElement : HTMLElement { · + + colorspace + · + · + + · + · + · + · + + + + · + · + · + Yes + · + + · + · + · + · + + dirname Yes @@ -48173,8 +48159,9 @@ interface HTMLInputElement : HTMLElement { data-x="attr-input-type-checkbox">checkbox controls.

The accept, - alt, max, alpha, alt, max, min, multiple, pattern, HTMLInputElement : HTMLElement { data-x="dom-input-defaultValue">defaultValue IDL attribute must reflect the value content attribute.

-

The type IDL - attribute must reflect the respective content attribute of the same name, - limited to only known values. The maxLength IDL attribute must reflect the - maxlength content attribute, limited to only - non-negative numbers. The minLength IDL attribute must reflect the - minlength content attribute, limited to only - non-negative numbers.

+

The colorSpace IDL attribute must reflect the + colorspace content attribute, limited to only + known values. The type IDL attribute must reflect the respective + content attribute of the same name, limited to only known values. The maxLength IDL attribute + must reflect the maxlength content + attribute, limited to only non-negative numbers. The minLength IDL + attribute must reflect the minlength + content attribute, limited to only non-negative numbers.

The IDL attributes width and HTMLInputElement : HTMLElement {

The following content attributes must not be specified and do not apply to the element: accept, + alpha, alt, checked, + colorspace, formaction, formenctype, formmethod, @@ -48428,8 +48420,10 @@ interface HTMLInputElement : HTMLElement {

The following content attributes must not be specified and do not apply to the element: accept, + alpha, alt, checked, + colorspace, formaction, formenctype, formmethod, @@ -48531,8 +48525,10 @@ interface HTMLInputElement : HTMLElement {

The following content attributes must not be specified and do not apply to the element: accept, + alpha, alt, checked, + colorspace, formaction, formenctype, formmethod, @@ -48636,8 +48632,10 @@ interface HTMLInputElement : HTMLElement {

The following content attributes must not be specified and do not apply to the element: accept, + alpha, alt, checked, + colorspace, formaction, formenctype, formmethod, @@ -48907,8 +48905,10 @@ ldh-str = < as defined in accept, + alpha, alt, checked, + colorspace, formaction, formenctype, formmethod, @@ -49003,8 +49003,10 @@ ldh-str = < as defined in accept, + alpha, alt, checked, + colorspace, formaction, formenctype, formmethod, @@ -49176,8 +49178,10 @@ ldh-str = < as defined in accept, + alpha, alt, checked, + colorspace, dirname, formaction, formenctype, @@ -49329,8 +49333,10 @@ ldh-str = < as defined in accept, + alpha, alt, checked, + colorspace, dirname, formaction, formenctype, @@ -49486,8 +49492,10 @@ ldh-str = < as defined in accept, + alpha, alt, checked, + colorspace, dirname, formaction, formenctype, @@ -49639,8 +49647,10 @@ ldh-str = < as defined in accept, + alpha, alt, checked, + colorspace, dirname, formaction, formenctype, @@ -49785,8 +49795,10 @@ ldh-str = < as defined in accept, + alpha, alt, checked, + colorspace, dirname, formaction, formenctype, @@ -49950,8 +49962,10 @@ ldh-str = < as defined in accept, + alpha, alt, checked, + colorspace, dirname, formaction, formenctype, @@ -50221,8 +50235,10 @@ ldh-str = < as defined in accept, + alpha, alt, checked, + colorspace, dirname, formaction, formenctype, @@ -50268,42 +50284,155 @@ ldh-str = < as defined in value to a string representing a simple - color.

+ element's value to a string representing the serialization + of a CSS color.

+ +

In this state, there is always a CSS color picked, and there is no way to set the + value to the empty string.

+ +

The alpha attribute + is a boolean attribute. If present, it indicates the CSS color's alpha component can + be manipulated by the end user and does not have to be fully opaque.

+ +

The colorspace + attribute indicates the color space of the serialized CSS color. It also hints at the desired user + interface for selecting a CSS color. It is an enumerated attribute with the following + keywords and states:

+ + + + + + + +
Keyword + State + Brief description +
limited-srgb + Limited sRGB + The CSS color is converted to the 'srgb' color space and limited to 8-bits per + component, e.g., "#123456" or "color(srgb 0 1 0 / 0.5)". +
display-p3 + Display P3 + The CSS color is converted to the 'display-p3' color space, e.g., "color(display-p3 0.84 0.19 0.72 / 0.6)". +
+ +

The attribute's missing value default and invalid value default are both the Limited sRGB state.

-

In this state, there is always a color picked, and there is no way to set the - value to the empty string.

+

Whenever the element's alpha or colorspace attributes are changed, the user agent must run + update a color well control color given the element.

+

If the element is mutable, the user agent should allow the user to change the color represented by its value, as - obtained from applying the rules for parsing simple color values to it. User agents - must not allow the user to set the value to a string that is - not a valid lowercase simple color. If the user agent provides a user interface for - selecting a color, then the value must be set to the result - of using the rules for serializing simple color values to the user's selection. User - agents must not allow the user to set the value to the empty - string.

+ obtained from parsing it. User agents must not + allow the user to set the value to a string that running + update a color well control color for the element would not set it to. If the user + agent provides a user interface for selecting a CSS color, then the value must be set to the result of serializing a color well control color given the element and the + end user's selection.

The input activation behavior for such an element element is to show the picker, if applicable, for element.

-

Constraint validation: While the user interface describes input that the user - agent cannot convert to a valid lowercase simple color, the control is - suffering from bad input.

+

Constraint validation: While the element's value is not the empty string and parsing it returns failure, the control is suffering from bad + input.

-

The value attribute, if specified and not empty, must - have a value that is a valid simple color.

+

The value attribute, if specified and not the empty + string, must have a value that is a CSS color.

-

The value sanitization algorithm is as follows: If the value of the element is a valid simple color, then - set it to the value of the element converted to ASCII - lowercase; otherwise, set it to the string "#000000".

+

The value sanitization algorithm is as follows: Run update + a color well control color for the element.

+ +

To update a color well control color, given an element element:

+ +
    +

  1. Assert: element is an input element whose type attribute is in the Color state.

    2. + +

  2. Let color be the result of parsing element's value.

    3. + +

  3. If color is failure, then set color to opaque + black.

    4. + +

  4. Set element's value to the result of serializing a color well control color given + element and color.

    5. +
+ +

To serialize a color well control color, given an element element and a + CSS color color:

+ +
    +

  1. Assert: element is an input element whose type attribute is in the Color state.

    2. + +

  2. Let htmlCompatible be false.

    3. + +

  3. If element's alpha attribute is not + specified, then set color's alpha component to be fully opaque.

    4. + +
  4. +

    If element's colorspace attribute is + in the Limited sRGB state:

    + +
      +
    1. +

      If element's alpha attribute is not + specified, then set htmlCompatible to true.

      + +

      This intentionally uses a different serialization path for compatibility with + an earlier version of the color well control.

      +
      2. + +

    2. Set color to color converted to the 'srgb' color + space.

      3. + +

    3. Round each of color's components so they are in the range 0 to 255, + inclusive. Components are to be rounded towards +∞.

      4. + +
    +
    5. + +
  5. +

    Otherwise:

    + +
      +

    1. Assert: element's colorspace attribute is in the Display P3 state.

      2. + +

    2. Set color to color converted to the 'display-p3' + color space.

      3. +
    +
    6. + +

  6. Return the result of serializing (serialize a CSS <color> value) + color with htmlCompatible set to + htmlCompatible. See issue + #8917 for context.

    7. +
@@ -50311,7 +50440,9 @@ ldh-str = < as defined in apply to the element: - autocomplete and + alpha, + autocomplete, + colorspace, and list content attributes; list and value IDL attributes; @@ -50442,8 +50573,10 @@ ldh-str = < as defined in accept, + alpha, alt, autocomplete, + colorspace, dirname, formaction, formenctype, @@ -50615,8 +50748,10 @@ ldh-str = < as defined in accept, + alpha, alt, autocomplete, + colorspace, dirname, formaction, formenctype, @@ -50868,9 +51003,11 @@ ldh-str = < as defined in alpha, alt, autocomplete, checked, + colorspace, dirname, formaction, formenctype, @@ -50983,9 +51120,11 @@ ldh-str = < as defined in accept, + alpha, alt, autocomplete, checked, + colorspace, height, list, max, @@ -51252,8 +51391,10 @@ ldh-str = < as defined in accept, + alpha, autocomplete, checked, + colorspace, dirname, list, max, @@ -51369,9 +51510,11 @@ ldh-str = < as defined in accept, + alpha, alt, autocomplete, checked, + colorspace, dirname, formaction, formenctype, @@ -51454,9 +51597,11 @@ ldh-str = < as defined in accept, + alpha, alt, autocomplete, checked, + colorspace, dirname, formaction, formenctype, @@ -139458,9 +139603,11 @@ interface External { empty globals; accept; + alpha; alt; autocomplete; checked; + colorspace; dirname; disabled; form; @@ -140866,6 +141013,11 @@ interface External { iframe Whether to allow the iframe's contents to use requestFullscreen() Boolean attribute + + alpha + input + Allow the color's alpha component to be set + Boolean attribute alt area; @@ -140957,6 +141109,12 @@ interface External { link Color to use when customizing a site's icon (for rel="mask-icon") CSS <color> + + colorspace + input + The color space of the serialized color + "limited-srgb"; + "display-p3" cols textarea From 327b2ae53660562b3a54c3f19f6a11ddb366dc22 Mon Sep 17 00:00:00 2001 From: Anne van Kesteren Date: Thu, 19 Sep 2024 10:36:08 +0200 Subject: [PATCH 2/2] remaining review comments --- source | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/source b/source index b78a1ba115b..6d6bd3390fd 100644 --- a/source +++ b/source @@ -50405,8 +50405,8 @@ ldh-str = < as defined in converted to the 'srgb' color space.

  • Round each of color's components so they are in the range 0 to 255, inclusive. Components are to be colorspace attribute is in the Display P3 state.

    • -

  • Set color to color converted to the 'display-p3' - color space.

    • +

  • Set color to color converted to the 'display-p3' color space.

    • -

  • Return the result of serializing (serialize a CSS <color> value) - color with htmlCompatible set to - htmlCompatible. See issue - #8917 for context.

    • +

  • Return the result of serializing + color. If htmlCompatible is true, then do so with HTML-compatible serialization + requested.