restructure tests a bit

Author: samthor

src/test/lit-element_styling_test.ts

@@ -898,23 +898,22 @@ suite('Static get styles', () => {
         document.body.removeChild(element);
       });
 
-  // Test this in Shadow DOM without `adoptedStyleSheets` only since it's easily
-  // detectable in that case. Look explicitly for no ShadyCSS.
   const testAdoptedStyleSheets =
-      (typeof ShadowRoot === 'function') &&
-      ('adoptedStyleSheets' in window.ShadowRoot.prototype);
+      (window.ShadowRoot) &&
+      ('replace' in CSSStyleSheet.prototype);
   (testAdoptedStyleSheets ? test : test.skip)(
       'Can return CSSStyleSheet where adoptedStyleSheets are natively supported',
       async () => {
         const sheet = new CSSStyleSheet();
         sheet.replaceSync('div { border: 4px solid red; }');
+        const normal = css`span { border: 4px solid blue; }`;
 
         const base = generateElementName();
         customElements.define(base, class extends LitElement {
-          static styles = sheet;
+          static styles = [sheet, normal];
 
           render() {
-            return htmlWithStyles`<div></div>`;
+            return htmlWithStyles`<div></div><span></span>`;
           }
         });
 
@@ -926,37 +925,42 @@ suite('Static get styles', () => {
             getComputedStyle(div).getPropertyValue('border-top-width').trim(),
             '4px');
 
+        const span = el.shadowRoot!.querySelector('span')!;
+        assert.equal(
+            getComputedStyle(span).getPropertyValue('border-top-width').trim(),
+            '4px');
+
         // When the WC polyfills are included, calling .replaceSync is a noop to
         // our styles as they're already flattened (so expect 4px). Otherwise,
         // look for the updated value.
-        const flattenDueToPolyfill = (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow);
-        const expectedValue = flattenDueToPolyfill ? '4px' : '2px';
+        const usesAdoptedStyleSheet = (window.ShadyCSS === undefined || window.ShadyCSS.nativeShadow);
+        const expectedValue = usesAdoptedStyleSheet ? '2px' : '4px';
         sheet.replaceSync('div { border: 2px solid red; }');
 
         assert.equal(
             getComputedStyle(div).getPropertyValue('border-top-width').trim(),
             expectedValue);
       });
 
-  // Test that when ShadyCSS is enabled with native support for
-  // adoptedStyleSheets, we can return a CSSStyleSheet that will be flattened
+  // Test that when ShadyCSS is enabled (while still having native support for
+  // adoptedStyleSheets), we can return a CSSStyleSheet that will be flattened
   // and play nice with others.
-  const testShadyCSSWithAdoptedStyleSheetSupport = (typeof ShadowRoot === 'function') &&
-      ('adoptedStyleSheets' in window.ShadowRoot.prototype) &&
+  const testShadyCSSWithAdoptedStyleSheetSupport =
+      (window.ShadowRoot) &&
+      ('replace' in CSSStyleSheet.prototype) &&
       (window.ShadyCSS !== undefined && !window.ShadyCSS.nativeShadow);
   (testShadyCSSWithAdoptedStyleSheetSupport ? test : test.skip)(
       'CSSStyleSheet is flattened where ShadyCSS is enabled yet adoptedStyleSheets are supported',
       async () => {
         const sheet = new CSSStyleSheet();
         sheet.replaceSync('div { border: 4px solid red; }');
-        const normal = css`span { border: 4px solid blue; }`;
 
         const base = generateElementName();
         customElements.define(base, class extends LitElement {
-          static styles = [sheet, normal];
+          static styles = sheet;
 
           render() {
-            return htmlWithStyles`<div></div><span></span>`;
+            return htmlWithStyles`<div></div>`;
           }
         });
 
@@ -969,11 +973,6 @@ suite('Static get styles', () => {
             getComputedStyle(div).getPropertyValue('border-top-width').trim(),
             '4px');
 
-        const span = el.shadowRoot!.querySelector('span')!;
-        assert.equal(
-            getComputedStyle(span).getPropertyValue('border-top-width').trim(),
-            '4px');
-
         // CSSStyleSheet update should fail, as the styles will be flattened.
         sheet.replaceSync('div { border: 2px solid red; }');
         assert.equal(