@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;
}
}