[@layer] Change layer order from preorder to postorder

xiaochengh · chromium-wpt-export-bot · commit b8f8408b4c8b · 2021-10-08T13:56:50.000-07:00
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. [1] w3c/csswg-drafts#6284 (comment) [2] w3c/csswg-drafts@a6fc16e Fixed: 1257936 Change-Id: I899de8c8a921b0535296957ee1b0cca1f60a8c61
diff --git a/css/css-cascade/layer-basic.html b/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/css/css-cascade/layer-counter-style-override.html b/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/css/css-cascade/layer-font-face-override.html b/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/css/css-cascade/layer-import.html b/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/css/css-cascade/layer-keyframes-override.html b/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/css/css-cascade/layer-property-override.html b/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/css/css-cascade/layer-scroll-timeline-override.html b/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;
-      }
     `
   },
 

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`