LibWeb: Add serialization code for CSS{Media,Supports}Rule

The `CSSMediaRule::serialized()` code is to spec. The
`CSSSupportsRule::serialized()` code has no spec right now, but I'm
fairly confident it will be almost identical to media's, so I copied
that for now.

Userland/Libraries/LibWeb/CSS/CSSGroupingRule.cpp

@@ -30,12 +30,6 @@ void CSSGroupingRule::delete_rule(size_t)
     TODO();
 }
 
-// https://drafts.csswg.org/cssom/#serialize-a-css-rule
-String CSSGroupingRule::serialized() const
-{
-    TODO();
-}
-
 void CSSGroupingRule::for_each_effective_style_rule(Function<void(CSSStyleRule const&)> const& callback) const
 {
     m_rules->for_each_effective_style_rule(callback);

Userland/Libraries/LibWeb/CSS/CSSGroupingRule.h

@@ -29,8 +29,6 @@ public:
     virtual void for_each_effective_style_rule(Function<void(CSSStyleRule const&)> const& callback) const;
     virtual bool for_first_not_loaded_import_rule(Function<void(CSSImportRule&)> const& callback);
 
-    virtual String serialized() const;
-
 protected:
     explicit CSSGroupingRule(NonnullRefPtrVector<CSSRule>&&);
 

Userland/Libraries/LibWeb/CSS/CSSMediaRule.cpp

@@ -28,4 +28,30 @@ void CSSMediaRule::set_condition_text(String text)
     m_media->set_media_text(text);
 }
 
+// https://www.w3.org/TR/cssom-1/#serialize-a-css-rule
+String CSSMediaRule::serialized() const
+{
+    // The result of concatenating the following:
+    StringBuilder builder;
+
+    // 1. The string "@media", followed by a single SPACE (U+0020).
+    builder.append("@media ");
+    // 2. The result of performing serialize a media query list on rule’s media query list.
+    builder.append(condition_text());
+    // 3. A single SPACE (U+0020), followed by the string "{", i.e., LEFT CURLY BRACKET (U+007B), followed by a newline.
+    builder.append(" {\n");
+    // 4. The result of performing serialize a CSS rule on each rule in the rule’s cssRules list, separated by a newline and indented by two spaces.
+    for (size_t i = 0; i < css_rules().length(); i++) {
+        auto rule = css_rules().item(i);
+        if (i != 0)
+            builder.append("\n");
+        builder.append("  ");
+        builder.append(rule->css_text());
+    }
+    // 5. A newline, followed by the string "}", i.e., RIGHT CURLY BRACKET (U+007D)
+    builder.append("\n}");
+
+    return builder.to_string();
+}
+
 }

Userland/Libraries/LibWeb/CSS/CSSMediaRule.h

@@ -39,6 +39,8 @@ public:
 private:
     explicit CSSMediaRule(NonnullRefPtr<MediaList>&&, NonnullRefPtrVector<CSSRule>&&);
 
+    virtual String serialized() const override;
+
     NonnullRefPtr<MediaList> m_media;
 };
 

Userland/Libraries/LibWeb/CSS/CSSSupportsRule.cpp

@@ -31,4 +31,27 @@ void CSSSupportsRule::set_condition_text(String text)
         m_supports = new_supports.release_nonnull();
 }
 
+// https://www.w3.org/TR/cssom-1/#serialize-a-css-rule
+String CSSSupportsRule::serialized() const
+{
+    // Note: The spec doesn't cover this yet, so I'm roughly following the spec for the @media rule.
+    // It should be pretty close!
+
+    StringBuilder builder;
+
+    builder.append("@supports ");
+    builder.append(condition_text());
+    builder.append(" {\n");
+    for (size_t i = 0; i < css_rules().length(); i++) {
+        auto rule = css_rules().item(i);
+        if (i != 0)
+            builder.append("\n");
+        builder.append("  ");
+        builder.append(rule->css_text());
+    }
+    builder.append("\n}");
+
+    return builder.to_string();
+}
+
 }

Userland/Libraries/LibWeb/CSS/CSSSupportsRule.h

@@ -38,6 +38,8 @@ public:
 private:
     explicit CSSSupportsRule(NonnullRefPtr<Supports>&&, NonnullRefPtrVector<CSSRule>&&);
 
+    virtual String serialized() const override;
+
     NonnullRefPtr<Supports> m_supports;
 };