Bug 1734545 [wpt PR 31144] - Update Cascade Layer tests to the new default layer order, a=testonly
authorAntti Koivisto <antti@apple.com>
Wed, 13 Oct 2021 17:23:28 +0000
changeset 595779 131c2f0e7abd04f26f8a7956f7e735248387c62c
parent 595778 ea34cbd280dbe2e210ce553377ee772008351911
child 595780 5f01a93494494bbfb3032aada2744b2ec41ff8dd
push id151470
push userwptsync@mozilla.com
push dateThu, 14 Oct 2021 04:52:53 +0000
treeherderautoland@74c55a0faa22 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1734545, 31144
milestone95.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1734545 [wpt PR 31144] - Update Cascade Layer tests to the new default layer order, a=testonly Automatic update from web-platform-tests Update Cascade Layer tests to the new default layer order (#31144) * Update Cascade Layer tests to the new default layer order * Update css/css-cascade/layer-basic.html Co-authored-by: Tim Nguyen <nt1m@users.noreply.github.com> * Minor updates Co-authored-by: Tim Nguyen <nt1m@users.noreply.github.com> -- wpt-commits: b0ddca61eb379737028ca37080392f3cca1e1eba wpt-pr: 31144
testing/web-platform/tests/css/css-cascade/layer-basic.html
testing/web-platform/tests/css/css-cascade/layer-font-face-override.html
testing/web-platform/tests/css/css-cascade/layer-import.html
testing/web-platform/tests/css/css-cascade/layer-keyframes-override.html
testing/web-platform/tests/css/css-cascade/layer-stylesheet-sharing.html
--- 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>