@page :first:right:left:blank, name:first:right:left:blank { color: green; @container (500px <= width <= 500px) { } @top-left-corner { content: "foo"; color: blue; @container (500px <= width <= 500px) { } } @top-left { content: "foo"; @container (500px <= width <= 500px) { } color: blue; } @top-center { @container ( 500px <= width <= 500px ) { } content: "foo"; color: blue; } @top-right { content: "foo"; @container (500px <= width <= 500px) { } color: blue; } @top-right-corner { @container ( 500px <= width <= 500px) {} content: "foo"; color: blue; } @bottom-left-corner { content: "foo"; @container (500px <= width <= 500px) { } color: blue; } @bottom-left { content: "foo"; color: blue; @container (500px <= width <= 500px) { } } @bottom-center { @container (500px <= width <= 500px) { } content: "foo"; color: blue; } @bottom-right { content: "foo"; @container (500px <= width <= 500px) { } color: blue; } @bottom-right-corner { content: "foo"; color: blue; @container (500px <= width <= 500px) { } } @left-top { @container (500px <= width <= 500px) { } content: "foo"; color: blue; } @left-middle { @container (500px <= width <= 500px) { } content: "foo"; color: blue; @container (500px <= width <= 500px) { } } @left-bottom { content: "foo"; color: blue; @container (500px <= width <= 500px) { } } @right-top { content: "foo"; @container (500px <= width <= 500px) { } color: blue; } @right-middle { content: "foo"; @container (500px <= width <= 500px) { } color: blue; } content: "foo"; @container (500px <= width <= 500px) { } @right-bottom { content: "foo"; @container (500px <= width <= 500px) { } color: blue; } }