--- a/testing/web-platform/tests/css/css-cascade/layer-basic.html
+++ b/testing/web-platform/tests/css/css-cascade/layer-basic.html
@@ -21,29 +21,29 @@ var testCases = [
         style: `
             @layer { }
             target { color: green; }
         `,
     },
     {
         title: 'A2 Anonymous layers',
         style: `
-            target { color: red; }
+            target { color: green; }
             @layer {
-                target { color: green; }
+                target { color: red; }
             }
         `,
     },
     {
         title: 'A3 Anonymous layers',
         style: `
             @layer {
-                target { color: green; }
+                target { color: red; }
             }
-            target { color: red; }
+            target { color: green; }
         `,
     },
     {
         title: 'A4 Anonymous layers',
         style: `
             @layer {
                 target { color: red; }
             }
@@ -56,29 +56,27 @@ var testCases = [
         title: 'A5 Anonymous layers',
         style: `
             @layer {
                 target { color: red; }
                 @layer {
                     target { color: green; }
                 }
             }
-            target { color: red; }
         `,
     },
     {
         title: 'A6 Anonymous layers',
         style: `
             @layer {
                 @layer {
                     target { color: green; }
                 }
                 target { color: red; }
             }
-            target { color: red; }
         `,
     },
     {
         title: 'A7 Anonymous layers',
         style: `
             @layer {
                 @layer {
                     target { color: red; }
@@ -138,31 +136,30 @@ var testCases = [
             }
             target { color: green; }
         `,
     },
     {
         title: 'B2 Named layers',
         style: `
             @layer A {
-                target { color: green; }
+                target { color: red; }
             }
-            target { color: red; }
+            target { color: green; }
         `,
     },
     {
         title: 'B3 Named layers',
         style: `
             @layer A {
                 target { color: red; }
             }
             @layer A {
                 target { color: green; }
             }
-            target { color: red; }
         `,
     },
     {
         title: 'B4 Named layers',
         style: `
             @layer A {
                 target { color: red; }
             }
@@ -503,26 +500,25 @@ var testCases = [
             }
             @layer B {
                 target { color: green; }
             }
         `,
     },
 ];
 
-for (var i = 0; i < testCases.length; ++i) {
-    var testCase = testCases[i];
-    var documentStyle = document.createElement('style');
-    documentStyle.appendChild(document.createTextNode(testCase['style']));
-    document.head.appendChild(documentStyle);
+for (let testCase of testCases) {
+    const styleElement = document.createElement('style');
+    styleElement.textContent = testCase['style'];
+    document.head.append(styleElement);
 
     test(function () {
         var targets = document.querySelectorAll('target');
         for (target of targets)
             assert_equals(window.getComputedStyle(target).color, 'rgb(0, 128, 0)',
                       testCase['title'] + ", target '" + target.classList[0] + "'");
     }, testCase['title']);
 
-    document.head.removeChild(documentStyle)
+    styleElement.remove();
 }
 </script>
 </body>
 </html>

--- a/testing/web-platform/tests/css/css-cascade/layer-font-face-override.html
+++ b/testing/web-platform/tests/css/css-cascade/layer-font-face-override.html
@@ -13,32 +13,32 @@
 
 <div id="target">Test</div>
 
 <script>
 // In all tests, width of #target should be 80px.
 
 const testCases = [
   {
-    title: '@font-face layered overrides unlayered',
+    title: '@font-face unlayered overrides layered',
     style: `
       #target {
         font-family: custom-font;
       }
 
       @layer {
         @font-face {
           font-family: custom-font;
-          src: url('/fonts/Ahem.ttf');
+          src: url('/fonts/noto/noto-sans-v8-latin-regular.woff') format('woff');
         }
       }
 
       @font-face {
         font-family: custom-font;
-        src: url('/fonts/noto/noto-sans-v8-latin-regular.woff') format('woff');
+        src: url('/fonts/Ahem.ttf');
       }
     `
   },
 
   {
     title: '@font-face override between layers',
     style: `
       @layer base, override;

--- a/testing/web-platform/tests/css/css-cascade/layer-import.html
+++ b/testing/web-platform/tests/css/css-cascade/layer-import.html
@@ -52,34 +52,34 @@ const imports = {
         }
     `,
 };
 
 const testCases = [
     {
         title: 'A1 Layer rules with import',
         style: `
-            @import url(basic-red.css);
+            @import url(basic-green.css);
             @layer {
-                target { color: green; }
+                target { color: red; }
             }
         `
     },
     {
         title: 'A2 Layer rules with import',
         style: `
-            @import url(layer-green.css);
-            target { color: red; }
+            @import url(layer-red.css);
+            target { color: green; }
         `
     },
     {
         title: 'A3 Layer rules with import',
         style: `
-            @import url(layer-green.css);
-            @import url(basic-red.css);
+            @import url(basic-green.css);
+            @import url(layer-red.css);
         `
     },
     {
         title: 'A4 Layer rules with import',
         style: `
             @import url(layer-A-red.css);
             @layer B {
                 target { color: green; }
@@ -87,18 +87,18 @@ const testCases = [
             @layer A {
                 target { color: red; }
             }
         `
     },
     {
         title: 'B1 Anonymous imports',
         style: `
-            @import url(basic-green.css) layer;
-            target { color: red; }
+            @import url(basic-red.css) layer;
+            target { color: green; }
         `
     },
     {
         title: 'B2 Anonymous imports',
         style: `
            @import url(basic-red.css) layer;
            @import url(basic-green.css) layer;
         `
@@ -117,18 +117,18 @@ const testCases = [
         style: `
             @import url(layer-red.css);
             @import url(basic-green.css) layer;
         `
     },
     {
         title: 'C1 Named imports',
         style: `
-            @import url(basic-green.css) layer(A);
-            target { color: red; }
+            @import url(basic-red.css) layer(A);
+            target { color: green; }
         `
     },
     {
         title: 'C2 Named imports',
         style: `
             @import url(basic-red.css) layer(A);
             @import url(basic-green.css) layer(A);
         `
@@ -255,25 +255,27 @@ const testCases = [
 ];
 
 for (let testCase of testCases) {
     promise_test(async t => {
         const styleElement = document.createElement('style');
         const styleText = testCase['style'].replaceAll(/url\((.+?)\)/g, (match, p1) => {
             return `url(data:text/css,${ encodeURI(imports[p1]) })`;
         });
-        styleElement.appendChild(document.createTextNode(styleText));
+        styleElement.textContent = styleText;
 
         await new Promise(resolve => {
             styleElement.onload = resolve;
-            document.head.appendChild(styleElement);
+            document.head.append(styleElement);
         });
 
-        const targets = document.querySelectorAll('target');
-        for (target of targets)
-            assert_equals(window.getComputedStyle(target).color, 'rgb(0, 128, 0)', testCase['title'] + ", target '" + target.classList[0] + "'");
-
-       document.head.removeChild(styleElement);
+        try {
+            const targets = document.querySelectorAll('target');
+            for (target of targets)
+                assert_equals(window.getComputedStyle(target).color, 'rgb(0, 128, 0)', testCase['title'] + ", target '" + target.classList[0] + "'");
+        } finally {
+            styleElement.remove();
+        }
     }, testCase['title']);
 }
 </script>
 </body>
 </html>

--- a/testing/web-platform/tests/css/css-cascade/layer-keyframes-override.html
+++ b/testing/web-platform/tests/css/css-cascade/layer-keyframes-override.html
@@ -18,30 +18,30 @@
 <div id="target"></div>
 <div id="reference"></div>
 
 <script>
 // In all tests, background color of #target should be green, same as #reference
 
 const testCases = [
   {
-    title: '@keyframes layered overrides unlayered',
+    title: '@keyframes unlayered overrides layered',
     style: `
       #target {
         animation: anim 1s paused;
       }
 
       @layer {
         @keyframes anim {
-          from { background-color: green; }
+          from { background-color: red; }
         }
       }
 
       @keyframes anim {
-        from { background-color: red; }
+        from { background-color: green; }
       }
     `
   },
 
   {
     title: '@keyframes override between layers',
     style: `
       @layer base, override;

--- a/testing/web-platform/tests/css/css-cascade/layer-stylesheet-sharing.html
+++ b/testing/web-platform/tests/css/css-cascade/layer-stylesheet-sharing.html
@@ -5,17 +5,16 @@
 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
 <link rel="author" title="Mozilla" href="https://mozilla.org">
 <link rel="match" href="layer-stylesheet-sharing-ref.html">
 <style>
   target {
     display: block;
     width: 100px;
     height: 100px;
-    background-color: red;
   }
 </style>
 <link rel=stylesheet href="data:text/css,@layer{target{background-color:green}}">
 <style>
 @layer A { target { background-color: red } }
 </style>
 <link rel=stylesheet href="data:text/css,@layer{target{background-color:green}}">
 <target></target>