LibWeb: Make resolved serialization of CSS `display` prefer short form

Although we translate e.g `block` to `block flow` for internal use in
the engine, CSS-DISPLAY-3 tells us to use the short form in
serializations for compatibility reasons.

This adds 9 points to our score on https://html5test.com/ :^)

Tests/LibWeb/Text/expected/css/getComputedStyle-display-short-serialization.txt

@@ -0,0 +1,14 @@
+none => none
+block => block
+flow-root => flow-root
+inline => inline
+inline-block => inline-block
+run-in => run-in
+list-item => list-item
+flex => flex
+inline-flex => inline-flex
+grid => grid
+inline-grid => inline-grid
+ruby => ruby
+table => table
+inline-table => inline-table

Tests/LibWeb/Text/input/css/getComputedStyle-display-short-serialization.html

@@ -0,0 +1,32 @@
+<script src="../include.js"></script>
+<script>
+    test(() => {
+        const e = document.createElement("div");
+        document.body.appendChild(e);
+        function checkDisplay(display) {
+            e.style.display = display;
+            const computedStyle = getComputedStyle(e);
+            const serialized = computedStyle.display;
+            println(display + " => " + serialized);
+        }
+        for (display of [
+            "none",
+            "block",
+            "flow-root",
+            "inline",
+            "inline-block",
+            "run-in",
+            "list-item",
+            "flex",
+            "inline-flex",
+            "grid",
+            "inline-grid",
+            "ruby",
+            "table",
+            "inline-table",
+        ]) {
+            checkDisplay(display);
+        }
+        e.remove();
+    });
+</script>

Tests/LibWeb/Text/input/include.js

@@ -0,0 +1,15 @@
+var __outputElement = null;
+
+function println(s) {
+    __outputElement.appendChild(document.createTextNode(s + "\n"));
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    __outputElement = document.createElement("pre");
+    __outputElement.setAttribute("id", "out");
+    document.body.appendChild(__outputElement);
+});
+
+function test(f) {
+    document.addEventListener("DOMContentLoaded", f);
+}

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -91,6 +91,35 @@ static ErrorOr<RefPtr<StyleValue>> style_value_for_display(CSS::Display display)
         return IdentifierStyleValue::create(CSS::ValueID::None);
 
     if (display.is_outside_and_inside()) {
+        // NOTE: Following the precedence rules of “most backwards-compatible, then shortest”,
+        //       serialization of equivalent display values uses the “Short display” column.
+        if (display == CSS::Display::from_short(CSS::Display::Short::Block))
+            return IdentifierStyleValue::create(CSS::ValueID::Block);
+        if (display == CSS::Display::from_short(CSS::Display::Short::FlowRoot))
+            return IdentifierStyleValue::create(CSS::ValueID::FlowRoot);
+        if (display == CSS::Display::from_short(CSS::Display::Short::Inline))
+            return IdentifierStyleValue::create(CSS::ValueID::Inline);
+        if (display == CSS::Display::from_short(CSS::Display::Short::InlineBlock))
+            return IdentifierStyleValue::create(CSS::ValueID::InlineBlock);
+        if (display == CSS::Display::from_short(CSS::Display::Short::RunIn))
+            return IdentifierStyleValue::create(CSS::ValueID::RunIn);
+        if (display == CSS::Display::from_short(CSS::Display::Short::ListItem))
+            return IdentifierStyleValue::create(CSS::ValueID::ListItem);
+        if (display == CSS::Display::from_short(CSS::Display::Short::Flex))
+            return IdentifierStyleValue::create(CSS::ValueID::Flex);
+        if (display == CSS::Display::from_short(CSS::Display::Short::InlineFlex))
+            return IdentifierStyleValue::create(CSS::ValueID::InlineFlex);
+        if (display == CSS::Display::from_short(CSS::Display::Short::Grid))
+            return IdentifierStyleValue::create(CSS::ValueID::Grid);
+        if (display == CSS::Display::from_short(CSS::Display::Short::InlineGrid))
+            return IdentifierStyleValue::create(CSS::ValueID::InlineGrid);
+        if (display == CSS::Display::from_short(CSS::Display::Short::Ruby))
+            return IdentifierStyleValue::create(CSS::ValueID::Ruby);
+        if (display == CSS::Display::from_short(CSS::Display::Short::Table))
+            return IdentifierStyleValue::create(CSS::ValueID::Table);
+        if (display == CSS::Display::from_short(CSS::Display::Short::InlineTable))
+            return IdentifierStyleValue::create(CSS::ValueID::InlineTable);
+
         StyleValueVector values;
         switch (display.outside()) {
         case CSS::Display::Outside::Inline: