script: Use an implemented pseudo-element to fortype=color ::color-swatch (#37427)

Implement internal pseudo element, which would be resolved as a
"Implemented Pseudo Element" within style computation. This is an
concrete element that would has a primary style after the style
computation, but could match and style resolved like an pseudo element.
Therefore, it would have a different behavior compared to how does
`pseudo`s that `ServoLayoutNode` had. Where they would not have a
concrete element behind it. Note that, due to the nature of these pseudo
elements residing inside a UA widget, these pseudo elements would
therefore not be accessible in JavaScript by default.

This kind of element is required in order to implement the [form control
pseudo element](https://drafts.csswg.org/css-forms-1/#pseudo-elements)
like `::placeholder`, `::color-swatch`, `::field-text`, etc.
 
See [this docs](https://hackmd.io/@ChaKweTiau/BJ3zRdLQlg) for more
details of the implementation.

Then, the implemented pseudo element is utilized to implement style
matching for input `type=text`.

Servo's side of: https://github.com/servo/stylo/pull/212

Testing: No WPT regression.

---------

Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>

components/layout/stylesheets/servo.css

@@ -19,6 +19,15 @@ textarea {
   font-size: 0.8333em;
 }
 
+input::color-swatch {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  box-sizing: border-box;
+  border: 1px solid gray;
+  border-radius: 2px;
+}
+
 input::selection,
 textarea::selection {
   background: rgba(176, 214, 255, 1.0);