[css-nesting] Reject invalid nested selectors from CSSOM.

Using CSSOM, we could add nested selectors that would be unparsable
(those that start with a tag selector); plug that hole and add tests
for it. Note that this probably also fixes that we wouldn't set
the parent rule correctly in these cases.

See w3c/csswg-drafts#7971.

Bug: 1095675
Change-Id: Ieedde3a2b07873d940dcd0a3f0aa68159259b729
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4197343
Reviewed-by: Rune Lillesveen <[email protected]>
Commit-Queue: Steinar H Gunderson <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1097886}

css/css-nesting/cssom.html

@@ -124,4 +124,22 @@
   & .c { color: blue; }
 }`, 'color is changed, new rule is ignored');
   });
+
+  // We cannot insert anything starting with an tag, as that would cause
+  // the serialized rule not to parse back. Compounds starting with a tag
+  // that are _not_ the first compound in a complex selector are OK, though,
+  // as are complex selectors that are not the first in the list.
+  test(() => {
+    document.getElementById('ss').innerHTML = sampleSheetText;
+    let [ss] = document.styleSheets;
+    ss.cssRules[0].cssRules[0].selectorText = 'div.b .c &';  // Ignored.
+    ss.cssRules[0].cssRules[1].selectorText = '.c div.b &, div &';  // Allowed.
+    assert_throws_dom('SyntaxError', () => { ss.cssRules[0].insertRule('div & {}'); });
+    assert_equals(ss.cssRules[0].cssText,
+`.a {
+  color: red;
+  & .b { color: green; }
+  .c div.b &, div & { color: blue; }
+}`, 'one rule is kept unchanged, the other is changed');
+  });
 </script>