LibWeb: Make CSSStyleDeclaration a legacy platform object with indices

CSSStyleDeclaration has an indexed property getter, which returns
properties associated with the object in the order they were specified
in.

Libraries/LibWeb/CSS/CSSStyleDeclaration.cpp

@@ -24,6 +24,9 @@ JS_DEFINE_ALLOCATOR(ElementInlineCSSStyleDeclaration);
 CSSStyleDeclaration::CSSStyleDeclaration(JS::Realm& realm)
     : PlatformObject(realm)
 {
+    m_legacy_platform_object_flags = LegacyPlatformObjectFlags {
+        .supports_indexed_properties = true,
+    };
 }
 
 void CSSStyleDeclaration::initialize(JS::Realm& realm)
@@ -328,6 +331,15 @@ WebIDL::ExceptionOr<void> CSSStyleDeclaration::set_css_float(StringView value)
     return set_property("float"sv, value, ""sv);
 }
 
+Optional<JS::Value> CSSStyleDeclaration::item_value(size_t index) const
+{
+    auto value = item(index);
+    if (value.is_empty())
+        return {};
+
+    return JS::PrimitiveString::create(vm(), value);
+}
+
 // https://www.w3.org/TR/cssom/#serialize-a-css-declaration
 static String serialize_a_css_declaration(CSS::PropertyID property, StringView value, Important important)
 {

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt

@@ -0,0 +1,212 @@
+All properties associated with getComputedStyle(document.body):
+{
+    "0": "-webkit-text-fill-color",
+    "1": "accent-color",
+    "2": "border-collapse",
+    "3": "border-spacing",
+    "4": "caption-side",
+    "5": "clip-rule",
+    "6": "color",
+    "7": "cursor",
+    "8": "direction",
+    "9": "fill",
+    "10": "fill-opacity",
+    "11": "fill-rule",
+    "12": "font-family",
+    "13": "font-feature-settings",
+    "14": "font-language-override",
+    "15": "font-size",
+    "16": "font-style",
+    "17": "font-variant",
+    "18": "font-variation-settings",
+    "19": "font-weight",
+    "20": "font-width",
+    "21": "image-rendering",
+    "22": "letter-spacing",
+    "23": "line-height",
+    "24": "list-style-image",
+    "25": "list-style-position",
+    "26": "list-style-type",
+    "27": "math-depth",
+    "28": "math-shift",
+    "29": "math-style",
+    "30": "pointer-events",
+    "31": "quotes",
+    "32": "stroke",
+    "33": "stroke-linecap",
+    "34": "stroke-linejoin",
+    "35": "stroke-miterlimit",
+    "36": "stroke-opacity",
+    "37": "stroke-width",
+    "38": "tab-size",
+    "39": "text-align",
+    "40": "text-anchor",
+    "41": "text-decoration-line",
+    "42": "text-indent",
+    "43": "text-justify",
+    "44": "text-shadow",
+    "45": "text-transform",
+    "46": "visibility",
+    "47": "white-space",
+    "48": "word-break",
+    "49": "word-spacing",
+    "50": "word-wrap",
+    "51": "writing-mode",
+    "52": "align-content",
+    "53": "align-items",
+    "54": "align-self",
+    "55": "animation-delay",
+    "56": "animation-direction",
+    "57": "animation-duration",
+    "58": "animation-fill-mode",
+    "59": "animation-iteration-count",
+    "60": "animation-name",
+    "61": "animation-play-state",
+    "62": "animation-timing-function",
+    "63": "appearance",
+    "64": "aspect-ratio",
+    "65": "backdrop-filter",
+    "66": "background-attachment",
+    "67": "background-clip",
+    "68": "background-color",
+    "69": "background-image",
+    "70": "background-origin",
+    "71": "background-position-x",
+    "72": "background-position-y",
+    "73": "background-repeat",
+    "74": "background-size",
+    "75": "border-bottom-color",
+    "76": "border-bottom-left-radius",
+    "77": "border-bottom-right-radius",
+    "78": "border-bottom-style",
+    "79": "border-bottom-width",
+    "80": "border-left-color",
+    "81": "border-left-style",
+    "82": "border-left-width",
+    "83": "border-right-color",
+    "84": "border-right-style",
+    "85": "border-right-width",
+    "86": "border-top-color",
+    "87": "border-top-left-radius",
+    "88": "border-top-right-radius",
+    "89": "border-top-style",
+    "90": "border-top-width",
+    "91": "bottom",
+    "92": "box-shadow",
+    "93": "box-sizing",
+    "94": "clear",
+    "95": "clip",
+    "96": "clip-path",
+    "97": "column-count",
+    "98": "column-gap",
+    "99": "column-span",
+    "100": "column-width",
+    "101": "content",
+    "102": "content-visibility",
+    "103": "counter-increment",
+    "104": "counter-reset",
+    "105": "counter-set",
+    "106": "cx",
+    "107": "cy",
+    "108": "display",
+    "109": "filter",
+    "110": "flex-basis",
+    "111": "flex-direction",
+    "112": "flex-grow",
+    "113": "flex-shrink",
+    "114": "flex-wrap",
+    "115": "float",
+    "116": "grid-auto-columns",
+    "117": "grid-auto-flow",
+    "118": "grid-auto-rows",
+    "119": "grid-column-end",
+    "120": "grid-column-start",
+    "121": "grid-row-end",
+    "122": "grid-row-start",
+    "123": "grid-template-areas",
+    "124": "grid-template-columns",
+    "125": "grid-template-rows",
+    "126": "height",
+    "127": "inline-size",
+    "128": "inset-block-end",
+    "129": "inset-block-start",
+    "130": "inset-inline-end",
+    "131": "inset-inline-start",
+    "132": "justify-content",
+    "133": "justify-items",
+    "134": "justify-self",
+    "135": "left",
+    "136": "margin-block-end",
+    "137": "margin-block-start",
+    "138": "margin-bottom",
+    "139": "margin-inline-end",
+    "140": "margin-inline-start",
+    "141": "margin-left",
+    "142": "margin-right",
+    "143": "margin-top",
+    "144": "mask",
+    "145": "mask-type",
+    "146": "max-height",
+    "147": "max-inline-size",
+    "148": "max-width",
+    "149": "min-height",
+    "150": "min-inline-size",
+    "151": "min-width",
+    "152": "object-fit",
+    "153": "object-position",
+    "154": "opacity",
+    "155": "order",
+    "156": "outline-color",
+    "157": "outline-offset",
+    "158": "outline-style",
+    "159": "outline-width",
+    "160": "overflow-x",
+    "161": "overflow-y",
+    "162": "padding-block-end",
+    "163": "padding-block-start",
+    "164": "padding-bottom",
+    "165": "padding-inline-end",
+    "166": "padding-inline-start",
+    "167": "padding-left",
+    "168": "padding-right",
+    "169": "padding-top",
+    "170": "position",
+    "171": "r",
+    "172": "right",
+    "173": "rotate",
+    "174": "row-gap",
+    "175": "rx",
+    "176": "ry",
+    "177": "scrollbar-gutter",
+    "178": "scrollbar-width",
+    "179": "stop-color",
+    "180": "stop-opacity",
+    "181": "table-layout",
+    "182": "text-decoration-color",
+    "183": "text-decoration-style",
+    "184": "text-decoration-thickness",
+    "185": "text-overflow",
+    "186": "top",
+    "187": "transform",
+    "188": "transform-box",
+    "189": "transform-origin",
+    "190": "transition-delay",
+    "191": "transition-duration",
+    "192": "transition-property",
+    "193": "transition-timing-function",
+    "194": "unicode-bidi",
+    "195": "user-select",
+    "196": "vertical-align",
+    "197": "width",
+    "198": "x",
+    "199": "y",
+    "200": "z-index"
+}
+All properties associated with document.body.style by default:
+{}
+All properties associated with document.body.style after setting some properties:
+{
+    "0": "display",
+    "1": "background-color",
+    "2": "font-size"
+}

Tests/LibWeb/Text/input/css/CSSStyleDeclaration-has-indexed-property-getter.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<script src="../include.js"></script>
+<script>
+    test(() => {
+        const bodyStyleDeclaration = getComputedStyle(document.body);
+
+        const serializedBodyComputedStyle = JSON.stringify(bodyStyleDeclaration, null, 4);
+        println("All properties associated with getComputedStyle(document.body):");
+        println(serializedBodyComputedStyle);
+
+        const serializedBodyElementStyle = JSON.stringify(document.body.style, null, 4);
+        println("All properties associated with document.body.style by default:");
+        println(serializedBodyElementStyle);
+
+        document.body.style.display = "none";
+        document.body.style.backgroundColor = "red";
+        document.body.style.fontSize = "15px";
+
+        const serializedBodyElementStyleWithSetProperties = JSON.stringify(document.body.style, null, 4);
+        println("All properties associated with document.body.style after setting some properties:");
+        println(serializedBodyElementStyleWithSetProperties);
+    });
+</script>