Bug 1919718 - Part 2: Implement HTMLInputElement.alpha r=emilio,webidl,firefox-style-system-reviewers,layout-reviewers

Differential Revision: https://phabricator.services.mozilla.com/D278296

Author: saschanaz

dom/html/HTMLInputElement.cpp

@@ -7,6 +7,7 @@
 #include "mozilla/dom/HTMLInputElement.h"
 
 #include <algorithm>
+#include <cmath>
 
 #include "HTMLDataListElement.h"
 #include "HTMLFormSubmissionConstants.h"
@@ -774,26 +775,52 @@ static void SerializeColorForHTMLCompatibility(const StyleAbsoluteColor& aColor,
                        NS_GET_B(color));
 }
 
+static void ClampColorComponents(StyleAbsoluteColor& aColor) {
+  MOZ_ASSERT(aColor.color_space == StyleColorSpace::Srgb);
+  aColor.components._0 = std::clamp(aColor.components._0, 0.0f, 1.0f);
+  aColor.components._1 = std::clamp(aColor.components._1, 0.0f, 1.0f);
+  aColor.components._2 = std::clamp(aColor.components._2, 0.0f, 1.0f);
+}
+
 // https://html.spec.whatwg.org/#serialize-a-color-well-control-color
 static void SerializeColor(const StyleAbsoluteColor& aColor,
                            StyleColorSpace aTargetColorSpace,
-                           nsAString& aResult) {
-  // A few steps are ignored given alpha support is still coming.
+                           bool aSpecifiedAlpha, nsAString& aResult) {
+  // Step 2: Let htmlCompatible be false.
+  bool htmlCompatible = false;
 
   // Step 3: If element's alpha attribute is not specified, then set color's
   // alpha component to be fully opaque.
   // (Setting colorspace here as it's easier.)
   StyleAbsoluteColor color = aColor.ToColorSpace(aTargetColorSpace);
-  color.alpha = 1.0;
+  if (!aSpecifiedAlpha) {
+    color.alpha = 1.0;
+  }
 
   // Step 4: If element's colorspace attribute is in the Limited sRGB state:
   if (color.color_space == StyleColorSpace::Srgb) {
-    // Step 6: ... then do so with HTML-compatible serialization requested.
+    // Step 4.2: Round each of color's components so they are in the range 0 to
+    // 255, inclusive. Components are to be rounded towards +∞.
+    ClampColorComponents(color);
+
+    if (!aSpecifiedAlpha) {
+      // Step 4.3: If element's alpha attribute is not specified, then set
+      // htmlCompatible to true.
+      htmlCompatible = true;
+    } else {
+      // Step 4.4: Otherwise, set color to color converted using the 'color()'
+      // function.
+      // (Unset the legacy bit to force `color()`)
+      color.flags &= ~StyleColorFlags::IS_LEGACY_SRGB;
+    }
+  }
+
+  // Step 6: Return the result of serializing color. If htmlCompatible is true,
+  // then do so with HTML-compatible serialization requested.
+  if (htmlCompatible) {
     SerializeColorForHTMLCompatibility(color, aResult);
     return;
   }
-
-  // Step 6: Return the result of serializing color.
   nsAutoCString result;
   Servo_AbsoluteColor_ToCss(&color, &result);
   CopyUTF8toUTF16(result, aResult);
@@ -821,7 +848,7 @@ nsTArray<nsString> HTMLInputElement::GetColorsFromList() {
     // https://html.spec.whatwg.org/#serialize-a-color-well-control-color
     if (Maybe<StyleAbsoluteColor> result =
             MaybeComputeColor(OwnerDoc(), value)) {
-      SerializeColor(*result, GetColorSpaceEnum(), value);
+      SerializeColor(*result, GetColorSpaceEnum(), Alpha(), value);
       colors.AppendElement(value);
     }
   }
@@ -1595,6 +1622,11 @@ void HTMLInputElement::ResultForDialogSubmit(nsAString& aResult) {
   }
 }
 
+void HTMLInputElement::SetAlpha(bool aValue, ErrorResult& aRv) {
+  SetHTMLBoolAttr(nsGkAtoms::alpha, aValue, aRv);
+  UpdateColor();
+}
+
 void HTMLInputElement::GetAutocomplete(nsAString& aValue) {
   if (!DoesAutocompleteApply()) {
     return;
@@ -2128,8 +2160,8 @@ void HTMLInputElement::GetColor(InputPickerColor& aValue) {
   aValue.mComponent1 = color.components._0;
   aValue.mComponent2 = color.components._1;
   aValue.mComponent3 = color.components._2;
+  aValue.mAlpha = Alpha() ? color.alpha : NAN;
 
-  // aValue.mAlpha = color.alpha;
   // aValue.mColorSpace = mColorSpace;
 }
 
@@ -2162,10 +2194,10 @@ void HTMLInputElement::SetUserInputColor(const InputPickerColor& aValue) {
                   ._1 = aValue.mComponent2,
                   ._2 = aValue.mComponent3,
               },
-          .alpha = 1,
+          .alpha = aValue.mAlpha,
           .color_space = StyleColorSpace::Srgb,
       },
-      GetColorSpaceEnum(), serialized);
+      GetColorSpaceEnum(), Alpha(), serialized);
 
   // (We are either Chrome/UA but the principal doesn't matter for color inputs)
   SetUserInput(serialized, *NodePrincipal());
@@ -5136,7 +5168,7 @@ void HTMLInputElement::SanitizeValue(nsAString& aValue,
       StyleAbsoluteColor color = MaybeComputeColorOrBlack(OwnerDoc(), aValue);
       // Serialization step 6: If htmlCompatible is true, then do so with
       // HTML-compatible serialization requested.
-      SerializeColor(color, GetColorSpaceEnum(), aValue);
+      SerializeColor(color, GetColorSpaceEnum(), Alpha(), aValue);
       break;
     }
     default:

dom/html/HTMLInputElement.h

@@ -452,6 +452,9 @@ class HTMLInputElement final : public TextControlElement,
     SetHTMLAttr(nsGkAtoms::accept, aValue, aRv);
   }
 
+  bool Alpha() const { return HasAttr(nsGkAtoms::alpha); }
+  void SetAlpha(bool aValue, ErrorResult& aRv);
+
   void GetAlt(nsAString& aValue) { GetHTMLAttr(nsGkAtoms::alt, aValue); }
   void SetAlt(const nsAString& aValue, ErrorResult& aRv) {
     SetHTMLAttr(nsGkAtoms::alt, aValue, aRv);

dom/webidl/HTMLInputElement.webidl

@@ -28,6 +28,8 @@ interface HTMLInputElement : HTMLElement {
 
   [CEReactions, Pure, SetterThrows]
            attribute DOMString accept;
+  [CEReactions, Pure, SetterThrows, Pref="dom.forms.colorspace_and_alpha.enabled"]
+           attribute boolean alpha;
   [CEReactions, Pure, SetterThrows]
            attribute DOMString alt;
   [CEReactions, Pure, SetterThrows]
@@ -302,8 +304,8 @@ dictionary InputPickerColor {
   required float component2;
   required float component3;
 
-  // bug 1919718
-  // required float alpha;
+  required unrestricted float alpha;
+  // bug 2009748
   // required InputColorSpace colorSpace;
 };
 

layout/forms/nsColorControlFrame.cpp

@@ -82,9 +82,9 @@ void nsColorControlFrame::UpdateColor() {
     return;
   }
 
-  // Set the background-color CSS property of the swatch element to this color.
+  // Set the color CSS property of the swatch element to this color.
   mColorContent->SetAttr(kNameSpaceID_None, nsGkAtoms::style,
-                         u"background-color:"_ns + color,
+                         u"color:"_ns + color,
                          /* aNotify */ true);
 }
 

layout/style/res/forms.css

@@ -438,6 +438,9 @@ input[type="image"]:disabled {
   box-sizing: border-box;
   border: 1px solid grey;
   display: block;
+  background-color: #fff;
+  background-image: linear-gradient(currentColor), repeating-conic-gradient(#ccc 0 25%, transparent 0 50%);
+  background-size: 12px 12px;
 }
 
 /* radio buttons */

testing/web-platform/meta/html/dom/idlharness.https.html.ini

@@ -2030,78 +2030,6 @@ prefs: [dom.security.featurePolicy.experimental.enabled:true, dom.security.featu
   [HTMLMediaElement interface: attribute videoTracks]
     expected: FAIL
 
-  [HTMLInputElement interface: attribute alpha]
-    expected: FAIL
-
-  [HTMLInputElement interface: document.createElement("input") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("text") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("hidden") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("search") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("tel") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("url") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("email") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("password") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("date") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("month") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("week") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("time") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("datetime-local") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("number") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("range") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("color") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("checkbox") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("radio") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("file") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("submit") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("image") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("reset") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
-  [HTMLInputElement interface: createInput("button") must inherit property "alpha" with the proper type]
-    expected: FAIL
-
   [HTMLScriptElement interface: attribute blocking]
     expected: FAIL