Bug 1734939 [wpt PR 31169] - [@layer] Change layer order from preorder to postorder, a=testonly

xiaochengh · moz-wptsync-bot · commit 6f575f5ea81f · 2021-10-14T04:45:47.000Z
Automatic update from web-platform-tests [@layer] Change layer order from preorder to postorder This patch follows from a recent CSSWG resolution [1] that puts the default layer at the highest priority, and a subsequent spec edit [2] that changed the layer ordering from the preorder of the layer tree to the postorder. Most test changes just reflect this spec change. In some WPT tests, rule ordering is swapping so that the winning rule will appear first, so that we can verify layer is working. external/wpt/css/css-cascade/presentational-hints-cascade.html is moved from the stable test suite to a new disable-custom-element-default-style virtual test suite because this is the flag that actually makes the test result different on test and stable builds. We need to disable this flag while keeping cascade layers enabled to test the new test case in the file. [1] w3c/csswg-drafts#6284 (comment) [2] w3c/csswg-drafts@a6fc16e Fixed: 1257936 Change-Id: I899de8c8a921b0535296957ee1b0cca1f60a8c61 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3214603 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Cr-Commit-Position: refs/heads/main@{#930689} -- wpt-commits: fd7a9e9a139e01cd5017b57b8d3123d3a9a1a7bb wpt-pr: 31169
diff --git a/testing/web-platform/tests/css/css-cascade/layer-basic.html b/testing/web-platform/tests/css/css-cascade/layer-basic.html
@@ -56,9 +56,9 @@
         title: 'A5 Anonymous layers',
         style: `
             @layer {
-                target { color: red; }
+                target { color: green; }
                 @layer {
-                    target { color: green; }
+                    target { color: red; }
                 }
             }
         `,
@@ -68,9 +68,9 @@
         style: `
             @layer {
                 @layer {
-                    target { color: green; }
+                    target { color: red; }
                 }
-                target { color: red; }
+                target { color: green; }
             }
         `,
     },
@@ -85,9 +85,9 @@
             }
             @layer {
                 @layer {
-                    target { color: green; }
+                    target { color: red; }
                 }
-                target { color: red; }
+                target { color: green; }
             }
         `,
     },
@@ -104,9 +104,9 @@
             }
             @layer {
                 @layer {
-                    target { color: green; }
+                    target { color: red; }
                 }
-                target { color: red; }
+                target { color: green; }
             }
         `,
     },
@@ -122,10 +122,10 @@
             @layer {
                 @layer {
                     @layer {
-                        target { color: green; }
+                        target { color: red; }
                     }
                 }
-                target { color: red; }
+                target { color: green; }
             }
         `,
     },
@@ -175,9 +175,9 @@
         title: 'B5 Named layers',
         style: `
             @layer A {
-                target { color: red; }
+                target { color: green; }
                 @layer A {
-                    target { color: green; }
+                    target { color: red; }
                 }
             }
         `,
@@ -362,11 +362,11 @@
         style: `
             @layer A {
                 @layer {
-                    target { color: green; }
+                    target { color: red; }
                 }
             }
             @layer A {
-                target { color: red; }
+                target { color: green; }
             }
         `,
     },
diff --git a/testing/web-platform/tests/css/css-cascade/layer-counter-style-override.html b/testing/web-platform/tests/css/css-cascade/layer-counter-style-override.html
@@ -35,21 +35,21 @@
 
 const testCases = [
   {
-    title: '@counter-style layered overrides unlayered',
+    title: '@counter-style unlayered overrides layered',
     style: `
       #target::before {
         content: counter(dont-care, custom-counter-style);
       }
 
+      @counter-style custom-counter-style {
+        system: extends four;
+      }
+
       @layer {
         @counter-style custom-counter-style {
-          system: extends four;
+          system: extends three;
         }
       }
-
-      @counter-style custom-counter-style {
-        system: extends three;
-      }
     `
   },
 
diff --git 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
@@ -24,17 +24,17 @@
         font-family: custom-font;
       }
 
+      @font-face {
+        font-family: custom-font;
+        src: url('/fonts/Ahem.ttf');
+      }
+
       @layer {
         @font-face {
           font-family: custom-font;
           src: url('/fonts/noto/noto-sans-v8-latin-regular.woff') format('woff');
         }
       }
-
-      @font-face {
-        font-family: custom-font;
-        src: url('/fonts/Ahem.ttf');
-      }
     `
   },
 
diff --git a/testing/web-platform/tests/css/css-cascade/layer-import.html b/testing/web-platform/tests/css/css-cascade/layer-import.html
@@ -145,9 +145,9 @@
     {
         title: 'C4 Named imports',
         style: `
-            @import url(layer-green.css) layer(A);
+            @import url(layer-red.css) layer(A);
             @layer A {
-                target { color: red; }
+                target { color: green; }
             }
         `
     },
@@ -192,8 +192,8 @@
         title: 'C9 Named imports',
         style: `
             @import url(basic-red.css) layer(A);
-            @import url(basic-green.css) layer(B.A);
-            @import url(basic-red.css) layer(B);
+            @import url(basic-red.css) layer(B.A);
+            @import url(basic-green.css) layer(B);
         `
     },
     {
diff --git a/testing/web-platform/tests/css/css-cascade/layer-keyframes-override.html b/testing/web-platform/tests/css/css-cascade/layer-keyframes-override.html
@@ -29,15 +29,15 @@
         animation: anim 1s paused;
       }
 
+      @keyframes anim {
+        from { background-color: green; }
+      }
+
       @layer {
         @keyframes anim {
           from { background-color: red; }
         }
       }
-
-      @keyframes anim {
-        from { background-color: green; }
-      }
     `
   },
 
diff --git a/testing/web-platform/tests/css/css-cascade/layer-property-override.html b/testing/web-platform/tests/css/css-cascade/layer-property-override.html
@@ -23,26 +23,26 @@
 
 const testCases = [
   {
-    title: '@property layered overrides unlayered',
+    title: '@property unlayered overrides layered',
     style: `
       #target {
         background-color: var(--foo);
       }
 
+      @property --foo {
+        syntax: '<color>';
+        inherits: false;
+        initial-value: green;
+      }
+
       @layer {
         @property --foo {
           syntax: '<color>';
           inherits: false;
-          initial-value: green;
+          initial-value: red;
         }
       }
-
-      @property --foo {
-        syntax: '<color>';
-        inherits: false;
-        initial-value: red;
-      }
-    `
+   `
   },
 
   {
diff --git a/testing/web-platform/tests/css/css-cascade/layer-scroll-timeline-override.html b/testing/web-platform/tests/css/css-cascade/layer-scroll-timeline-override.html
@@ -46,25 +46,25 @@
 
 const testCases = [
   {
-    title: '@scroll-timeline layered overrides unlayered',
+    title: '@scroll-timeline unlayered overrides layered',
     style: `
       #target {
         animation-timeline: timeline;
       }
 
+      @scroll-timeline timeline {
+        source: selector(#scroller);
+        start: 0px;
+        end: 50px;
+      }
+
       @layer {
         @scroll-timeline timeline {
           source: selector(#scroller);
           start: 0px;
-          end: 50px;
+          end: 100px;
         }
       }
-
-      @scroll-timeline timeline {
-        source: selector(#scroller);
-        start: 0px;
-        end: 100px;
-      }
     `
   },
 
diff --git a/testing/web-platform/tests/css/css-cascade/presentational-hints-cascade.html b/testing/web-platform/tests/css/css-cascade/presentational-hints-cascade.html
@@ -12,10 +12,17 @@
 #target1 {
   width: 100px;
 }
+
+@layer {
+  #target3 {
+    width: 100px;
+  }
+}
 </style>
 
 <img class=test id=target1 width=200>
 <img class=test id=target2 width=200 style="width: 100px">
+<img class=test id=target3 width=200>
 
 <script>
 test(() => {
@@ -25,4 +32,8 @@
 test(() => {
   assert_equals(getComputedStyle(target2).width, '100px');
 }, 'Presentational hints have lower precedence than the style attribute');
+
+test(() => {
+  assert_equals(getComputedStyle(target3).width, '100px');
+}, 'Presentational hints have lower precedence than layered style');
 </script>

Original file line number	Diff line number	Diff line change
`@@ -56,9 +56,9 @@`
`56`	`56`	`title: 'A5 Anonymous layers',`
`57`	`57`	style: `
`58`	`58`	`@layer {`
`59`		`- target { color: red; }`
	`59`	`+ target { color: green; }`
`60`	`60`	`@layer {`
`61`		`- target { color: green; }`
	`61`	`+ target { color: red; }`
`62`	`62`	`}`
`63`	`63`	`}`
`64`	`64`	`,
`@@ -68,9 +68,9 @@`
`68`	`68`	style: `
`69`	`69`	`@layer {`
`70`	`70`	`@layer {`
`71`		`- target { color: green; }`
	`71`	`+ target { color: red; }`
`72`	`72`	`}`
`73`		`- target { color: red; }`
	`73`	`+ target { color: green; }`
`74`	`74`	`}`
`75`	`75`	`,
`76`	`76`	`},`
`@@ -85,9 +85,9 @@`
`85`	`85`	`}`
`86`	`86`	`@layer {`
`87`	`87`	`@layer {`
`88`		`- target { color: green; }`
	`88`	`+ target { color: red; }`
`89`	`89`	`}`
`90`		`- target { color: red; }`
	`90`	`+ target { color: green; }`
`91`	`91`	`}`
`92`	`92`	`,
`93`	`93`	`},`
`@@ -104,9 +104,9 @@`
`104`	`104`	`}`
`105`	`105`	`@layer {`
`106`	`106`	`@layer {`
`107`		`- target { color: green; }`
	`107`	`+ target { color: red; }`
`108`	`108`	`}`
`109`		`- target { color: red; }`
	`109`	`+ target { color: green; }`
`110`	`110`	`}`
`111`	`111`	`,
`112`	`112`	`},`
`@@ -122,10 +122,10 @@`
`122`	`122`	`@layer {`
`123`	`123`	`@layer {`
`124`	`124`	`@layer {`
`125`		`- target { color: green; }`
	`125`	`+ target { color: red; }`
`126`	`126`	`}`
`127`	`127`	`}`
`128`		`- target { color: red; }`
	`128`	`+ target { color: green; }`
`129`	`129`	`}`
`130`	`130`	`,
`131`	`131`	`},`
`@@ -175,9 +175,9 @@`
`175`	`175`	`title: 'B5 Named layers',`
`176`	`176`	style: `
`177`	`177`	`@layer A {`
`178`		`- target { color: red; }`
	`178`	`+ target { color: green; }`
`179`	`179`	`@layer A {`
`180`		`- target { color: green; }`
	`180`	`+ target { color: red; }`
`181`	`181`	`}`
`182`	`182`	`}`
`183`	`183`	`,
`@@ -362,11 +362,11 @@`
`362`	`362`	style: `
`363`	`363`	`@layer A {`
`364`	`364`	`@layer {`
`365`		`- target { color: green; }`
	`365`	`+ target { color: red; }`
`366`	`366`	`}`
`367`	`367`	`}`
`368`	`368`	`@layer A {`
`369`		`- target { color: red; }`
	`369`	`+ target { color: green; }`
`370`	`370`	`}`
`371`	`371`	`,
`372`	`372`	`},`
Original file line number	Diff line number	Diff line change
`@@ -35,21 +35,21 @@`
`35`	`35`
`36`	`36`	`const testCases = [`
`37`	`37`	`{`
`38`		`- title: '@counter-style layered overrides unlayered',`
	`38`	`+ title: '@counter-style unlayered overrides layered',`
`39`	`39`	style: `
`40`	`40`	`#target::before {`
`41`	`41`	`content: counter(dont-care, custom-counter-style);`
`42`	`42`	`}`
`43`	`43`
	`44`	`+ @counter-style custom-counter-style {`
	`45`	`+ system: extends four;`
	`46`	`+ }`
	`47`	`+`
`44`	`48`	`@layer {`
`45`	`49`	`@counter-style custom-counter-style {`
`46`		`- system: extends four;`
	`50`	`+ system: extends three;`
`47`	`51`	`}`
`48`	`52`	`}`
`49`		`-`
`50`		`- @counter-style custom-counter-style {`
`51`		`- system: extends three;`
`52`		`- }`
`53`	`53`	`
`54`	`54`	`},`
`55`	`55`
Original file line number	Diff line number	Diff line change
`@@ -24,17 +24,17 @@`
`24`	`24`	`font-family: custom-font;`
`25`	`25`	`}`
`26`	`26`
	`27`	`+ @font-face {`
	`28`	`+ font-family: custom-font;`
	`29`	`+ src: url('/fonts/Ahem.ttf');`
	`30`	`+ }`
	`31`	`+`
`27`	`32`	`@layer {`
`28`	`33`	`@font-face {`
`29`	`34`	`font-family: custom-font;`
`30`	`35`	`src: url('/fonts/noto/noto-sans-v8-latin-regular.woff') format('woff');`
`31`	`36`	`}`
`32`	`37`	`}`
`33`		`-`
`34`		`- @font-face {`
`35`		`- font-family: custom-font;`
`36`		`- src: url('/fonts/Ahem.ttf');`
`37`		`- }`
`38`	`38`	`
`39`	`39`	`},`
`40`	`40`
Original file line number	Diff line number	Diff line change
`@@ -145,9 +145,9 @@`
`145`	`145`	`{`
`146`	`146`	`title: 'C4 Named imports',`
`147`	`147`	style: `
`148`		`- @import url(layer-green.css) layer(A);`
	`148`	`+ @import url(layer-red.css) layer(A);`
`149`	`149`	`@layer A {`
`150`		`- target { color: red; }`
	`150`	`+ target { color: green; }`
`151`	`151`	`}`
`152`	`152`	`
`153`	`153`	`},`
`@@ -192,8 +192,8 @@`
`192`	`192`	`title: 'C9 Named imports',`
`193`	`193`	style: `
`194`	`194`	`@import url(basic-red.css) layer(A);`
`195`		`- @import url(basic-green.css) layer(B.A);`
`196`		`- @import url(basic-red.css) layer(B);`
	`195`	`+ @import url(basic-red.css) layer(B.A);`
	`196`	`+ @import url(basic-green.css) layer(B);`
`197`	`197`	`
`198`	`198`	`},`
`199`	`199`	`{`
Original file line number	Diff line number	Diff line change
`@@ -29,15 +29,15 @@`
`29`	`29`	`animation: anim 1s paused;`
`30`	`30`	`}`
`31`	`31`
	`32`	`+ @keyframes anim {`
	`33`	`+ from { background-color: green; }`
	`34`	`+ }`
	`35`	`+`
`32`	`36`	`@layer {`
`33`	`37`	`@keyframes anim {`
`34`	`38`	`from { background-color: red; }`
`35`	`39`	`}`
`36`	`40`	`}`
`37`		`-`
`38`		`- @keyframes anim {`
`39`		`- from { background-color: green; }`
`40`		`- }`
`41`	`41`	`
`42`	`42`	`},`
`43`	`43`