[cssom] Make CSSStyleRule serialization aware of nesting. (w3c#6117)

Author: tabatkins

cssom-1/Overview.bs

@@ -1523,17 +1523,34 @@ To <dfn export>serialize a CSS rule</dfn>, perform one of the following in accor
 <dl class="switch">
  <dt>{{CSSStyleRule}}
  <dd>
-  The result of concatenating the following:
+  Return the result of the following steps:
+
   <ol>
-   <li>The result of performing <a>serialize a group of selectors</a> on the rule's associated selectors.
-   <li>The string "<code> { </code>", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B),
-   followed by a single SPACE (U+0020).
-   <li>The result of performing <a>serialize a CSS declaration block</a> on the rule's associated declarations.
-   <li>If the rule is associated with one or more declarations, the string "<code> </code>", i.e., a single SPACE (U+0020).
-   <li>The string "<code>}</code>", RIGHT CURLY BRACKET (U+007D).
+    <li>Let |s| initially be
+        the result of performing <a>serialize a group of selectors</a> on the rule's associated selectors,
+        followed by the string "<code> {</code>", i.e., a single SPACE (U+0020), followed by LEFT CURLY BRACKET (U+007B).
+    <li>Let |decls| be the result of performing <a>serialize a CSS declaration block</a> on the rule's associated declarations, or null if there are no such declarations.
+    <li>Let |rules| be the result of performing [=serialize a CSS rule=] on each rule in the rule's {{CSSStyleRule/cssRules}} list, or null if there are no such rules.
+    <li>If |decls| and |rules| are both null, append " }" to |s| (i.e. a single SPACE (U+0020) followed by RIGHT CURLY BRACKET (U+007D)) and return |s|.
+    <li>If |rules| is null:
+        <ol>
+            <li>Append a single SPACE (U+0020) to |s|
+            <li>Append |decls| to |s|
+            <li>Append " }" to |s| (i.e. a single SPACE (U+0020) followed by RIGHT CURLY BRACKET (U+007D)).
+            <li>Return |s|.
+        </ol>
+    <li>Otherwise:
+        <ol>
+            <li>If |decls| is not null, prepend it to |rules|.
+            <li>For each |rule| in |rules|:
+                <ol>
+                    <li>Append a newline followed by two spaces to |s|.
+                    <li>Append |rule| to |s|.
+                </ol>
+            <li>Append a newline followed by RIGHT CURLY BRACKET (U+007D) to |s|.
+            <li>Return |s|.
   </ol>
 
-
  <dt>{{CSSImportRule}}
  <dd>
   The result of concatenating the following: