Auto merge of #19330 - Eijebong:sanitize_color, r=KiChjang

Add a sanitize_value implementation for the color input

I had to change the test a little bit to avoid some failures due to
color and text both having a sanitizedValue which was making the test
use the first assertion instead of the second one in some cases.

The sanitize_value implementation is pretty simple, we iterate over the
content and checks that the content is 7 characters long, that the first
character is a `#` and then that all the following characters are
hexadecimal. If all those requirements are met, we lowercase the
content, otherwise we put `#000000` in it.

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19330)
<!-- Reviewable:end -->

components/atoms/static_atoms.txt

@@ -1,3 +1,4 @@
+DOMContentLoaded
 abort
 activate
 beforeunload
@@ -10,13 +11,13 @@ characteristicvaluechanged
 checkbox
 click
 close
+color
 controllerchange
 cursive
 date
 datetime
 datetime-local
 dir
-DOMContentLoaded
 email
 emptied
 error

components/script/dom/htmlinputelement.rs

@@ -875,6 +875,26 @@ impl HTMLInputElement {
                 content.strip_newlines();
                 content.strip_leading_and_trailing_ascii_whitespace();
             }
+            atom!("color") => {
+                let mut textinput = self.textinput.borrow_mut();
+
+                let is_valid = {
+                    let content = textinput.single_line_content();
+                    let mut chars = content.chars();
+                    if content.len() == 7 && chars.next() == Some('#') {
+                        chars.all(|c| c.is_digit(16))
+                    } else {
+                        false
+                    }
+                };
+
+                if is_valid {
+                    let content = textinput.single_line_content_mut();
+                    content.make_ascii_lowercase();
+                } else {
+                    textinput.set_content("#000000".into());
+                }
+            }
             // TODO: Implement more value sanitization algorithms for different types of inputs
             _ => ()
         }

tests/wpt/metadata/MANIFEST.json

@@ -543020,7 +543020,7 @@
    "testharness"
   ],
   "html/semantics/forms/the-input-element/type-change-state.html": [
-   "927c8f78d173edd6e82badf4a1584df3c50c5505",
+   "95e8bfd7d2f14068b0d3e41e3f017da3647bc382",
    "testharness"
   ],
   "html/semantics/forms/the-input-element/url.html": [

tests/wpt/metadata/html/semantics/forms/the-input-element/color.html.ini

@@ -1,68 +0,0 @@
-[color.html]
-  type: testharness
-  [Empty value should return #000000]
-    expected: FAIL
-
-  [Missing value should return #000000]
-    expected: FAIL
-
-  [Valid simple color (containing LATIN CAPITAL LETTERS): should return #ffffff (converted to ASCII lowercase)]
-    expected: FAIL
-
-  [Zero-padding]
-    expected: FAIL
-
-  [Invalid simple color: not 7 characters long]
-    expected: FAIL
-
-  [Invalid simple color: no starting # sign]
-    expected: FAIL
-
-  [Invalid simple color: non ASCII hex digits]
-    expected: FAIL
-
-  [Invalid simple color: foobar]
-    expected: FAIL
-
-  [Invalid color: trailing Null (U+0000)]
-    expected: FAIL
-
-  [Invalid color: trailing ;]
-    expected: FAIL
-
-  [Invalid color: leading space]
-    expected: FAIL
-
-  [Invalid color: trailing space]
-    expected: FAIL
-
-  [Invalid color: leading+trailing spaces]
-    expected: FAIL
-
-  [Invalid color: keyword crimson]
-    expected: FAIL
-
-  [Invalid color: keyword bisque]
-    expected: FAIL
-
-  [Invalid color: keyword currentColor]
-    expected: FAIL
-
-  [Invalid color: keyword transparent]
-    expected: FAIL
-
-  [Invalid color: keyword ActiveBorder]
-    expected: FAIL
-
-  [Invalid color: keyword inherit]
-    expected: FAIL
-
-  [Invalid color: rgb(1,1,1)]
-    expected: FAIL
-
-  [Invalid color: rgb(1,1,1,1)]
-    expected: FAIL
-
-  [Invalid color: PILE OF POO (U+1F4A9)]
-    expected: FAIL
-

tests/wpt/metadata/html/semantics/forms/the-input-element/type-change-state.html.ini

@@ -24,9 +24,6 @@
   [change state from hidden to range]
     expected: FAIL
 
-  [change state from hidden to color]
-    expected: FAIL
-
   [change state from text to email]
     expected: FAIL
 
@@ -51,9 +48,6 @@
   [change state from text to range]
     expected: FAIL
 
-  [change state from text to color]
-    expected: FAIL
-
   [change state from search to email]
     expected: FAIL
 
@@ -78,9 +72,6 @@
   [change state from search to range]
     expected: FAIL
 
-  [change state from search to color]
-    expected: FAIL
-
   [change state from tel to email]
     expected: FAIL
 
@@ -105,9 +96,6 @@
   [change state from tel to range]
     expected: FAIL
 
-  [change state from tel to color]
-    expected: FAIL
-
   [change state from url to text]
     expected: FAIL
 
@@ -141,9 +129,6 @@
   [change state from url to range]
     expected: FAIL
 
-  [change state from url to color]
-    expected: FAIL
-
   [change state from email to hidden]
     expected: FAIL
 
@@ -186,9 +171,6 @@
   [change state from email to range]
     expected: FAIL
 
-  [change state from email to color]
-    expected: FAIL
-
   [change state from password to email]
     expected: FAIL
 
@@ -213,9 +195,6 @@
   [change state from password to range]
     expected: FAIL
 
-  [change state from password to color]
-    expected: FAIL
-
   [change state from datetime to text]
     expected: FAIL
 
@@ -252,9 +231,6 @@
   [change state from datetime to range]
     expected: FAIL
 
-  [change state from datetime to color]
-    expected: FAIL
-
   [change state from date to hidden]
     expected: FAIL
 
@@ -297,9 +273,6 @@
   [change state from date to range]
     expected: FAIL
 
-  [change state from date to color]
-    expected: FAIL
-
   [change state from month to hidden]
     expected: FAIL
 
@@ -342,9 +315,6 @@
   [change state from month to range]
     expected: FAIL
 
-  [change state from month to color]
-    expected: FAIL
-
   [change state from week to hidden]
     expected: FAIL
 
@@ -387,9 +357,6 @@
   [change state from week to range]
     expected: FAIL
 
-  [change state from week to color]
-    expected: FAIL
-
   [change state from time to hidden]
     expected: FAIL
 
@@ -432,9 +399,6 @@
   [change state from time to range]
     expected: FAIL
 
-  [change state from time to color]
-    expected: FAIL
-
   [change state from number to hidden]
     expected: FAIL
 
@@ -477,9 +441,6 @@
   [change state from number to range]
     expected: FAIL
 
-  [change state from number to color]
-    expected: FAIL
-
   [change state from range to hidden]
     expected: FAIL
 
@@ -522,54 +483,6 @@
   [change state from range to number]
     expected: FAIL
 
-  [change state from range to color]
-    expected: FAIL
-
-  [change state from color to hidden]
-    expected: FAIL
-
-  [change state from color to checkbox]
-    expected: FAIL
-
-  [change state from color to radio]
-    expected: FAIL
-
-  [change state from color to submit]
-    expected: FAIL
-
-  [change state from color to image]
-    expected: FAIL
-
-  [change state from color to reset]
-    expected: FAIL
-
-  [change state from color to button]
-    expected: FAIL
-
-  [change state from color to email]
-    expected: FAIL
-
-  [change state from color to datetime]
-    expected: FAIL
-
-  [change state from color to date]
-    expected: FAIL
-
-  [change state from color to month]
-    expected: FAIL
-
-  [change state from color to week]
-    expected: FAIL
-
-  [change state from color to time]
-    expected: FAIL
-
-  [change state from color to number]
-    expected: FAIL
-
-  [change state from color to range]
-    expected: FAIL
-
   [change state from checkbox to email]
     expected: FAIL
 
@@ -594,9 +507,6 @@
   [change state from checkbox to range]
     expected: FAIL
 
-  [change state from checkbox to color]
-    expected: FAIL
-
   [change state from radio to email]
     expected: FAIL
 
@@ -621,9 +531,6 @@
   [change state from radio to range]
     expected: FAIL
 
-  [change state from radio to color]
-    expected: FAIL
-
   [change state from submit to email]
     expected: FAIL
 
@@ -648,9 +555,6 @@
   [change state from submit to range]
     expected: FAIL
 
-  [change state from submit to color]
-    expected: FAIL
-
   [change state from image to email]
     expected: FAIL
 
@@ -675,9 +579,6 @@
   [change state from image to range]
     expected: FAIL
 
-  [change state from image to color]
-    expected: FAIL
-
   [change state from reset to email]
     expected: FAIL
 
@@ -702,9 +603,6 @@
   [change state from reset to range]
     expected: FAIL
 
-  [change state from reset to color]
-    expected: FAIL
-
   [change state from button to email]
     expected: FAIL
 
@@ -729,9 +627,6 @@
   [change state from button to range]
     expected: FAIL
 
-  [change state from button to color]
-    expected: FAIL
-
   [change state from hidden to datetime-local]
     expected: FAIL
 
@@ -795,9 +690,6 @@
   [change state from datetime-local to range]
     expected: FAIL
 
-  [change state from datetime-local to color]
-    expected: FAIL
-
   [change state from date to datetime-local]
     expected: FAIL
 
@@ -816,9 +708,6 @@
   [change state from range to datetime-local]
     expected: FAIL
 
-  [change state from color to datetime-local]
-    expected: FAIL
-
   [change state from checkbox to datetime-local]
     expected: FAIL
 

tests/wpt/metadata/html/semantics/forms/the-input-element/valueMode.html.ini

@@ -42,12 +42,6 @@
   [value IDL attribute of input type range with value attribute]
     expected: FAIL
 
-  [value IDL attribute of input type color without value attribute]
-    expected: FAIL
-
-  [value IDL attribute of input type color with value attribute]
-    expected: FAIL
-
   [value IDL attribute of input type datetime-local without value attribute]
     expected: FAIL
 

tests/wpt/web-platform-tests/html/semantics/forms/the-input-element/type-change-state.html

@@ -49,7 +49,7 @@
           } else {
             input.value = "  foo\rbar  ";
             input.type = types[j].type;  // change state
-            if (types[j].sanitizedValue || types[j].sanitizedValue === "") {
+            if (types[i].type !== "color" && (types[j].sanitizedValue || types[j].sanitizedValue === "")) {
               assert_equals(input.value, types[j].sanitizedValue, "input.value should be " + types[j].sanitizedValue + " after change of state");
             } else if (types[i].sanitizedValue || types[i].sanitizedValue === "") {
               assert_equals(input.value, types[i].sanitizedValue, "input.value should be " + types[i].sanitizedValue + " after change of state");