mirror of
https://github.com/hanzoai/autoprefixer.git
synced 2026-09-24 16:55:58 +00:00
Bogdan DolinandAndrey Sitnik
142a4b71fd
* [css-grid] Fix bug when grid-area rules are not inserted * [css-grid] Add test cases * [css-grid] Change the comment line * [css-grid] Add new line
395 lines
6.1 KiB
CSS
395 lines
6.1 KiB
CSS
.a {
|
|
grid-template-areas:
|
|
"head head"
|
|
"nav main"
|
|
"nav foot"
|
|
"another";
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.a {
|
|
grid-template-areas: "head main";
|
|
}
|
|
}
|
|
|
|
.b {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 2;
|
|
grid-area: head;
|
|
}
|
|
|
|
.c {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 2;
|
|
grid-area: main;
|
|
}
|
|
|
|
.d {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-row-span: 2;
|
|
-ms-grid-column: 1;
|
|
grid-area: nav;
|
|
}
|
|
|
|
.e {
|
|
-ms-grid-row: 3;
|
|
-ms-grid-column: 2;
|
|
grid-area: foot;
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.b {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 1;
|
|
}
|
|
.c {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 2;
|
|
}
|
|
}
|
|
|
|
/****************\
|
|
CONFLICT TESTS
|
|
\****************/
|
|
|
|
.grid {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"a-conflict a-conflict"
|
|
"b-conflict b-conflict";
|
|
}
|
|
|
|
.grid.conflict {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"a-conflict"
|
|
"b-conflict";
|
|
}
|
|
|
|
.a {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 2;
|
|
grid-area: a-conflict;
|
|
}
|
|
|
|
.grid.conflict > .a {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 1;
|
|
}
|
|
|
|
.b {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 2;
|
|
grid-area: b-conflict;
|
|
}
|
|
|
|
.grid.conflict > .b {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 1;
|
|
}
|
|
|
|
/****************\
|
|
MQ CONFLICT TEST
|
|
\****************/
|
|
.grid-mq {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-template-areas: "a-mq b-mq";
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.grid-mq {
|
|
grid-template-areas:
|
|
"a-mq"
|
|
"b-mq";
|
|
}
|
|
}
|
|
|
|
.grid.conflict {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"a-mq"
|
|
"b-mq";
|
|
}
|
|
|
|
@media (min-width: 601px) {
|
|
.grid.conflict {
|
|
grid-template-areas: "a-mq b-mq";
|
|
}
|
|
}
|
|
|
|
.a {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: a-mq;
|
|
}
|
|
|
|
.grid.conflict > .a {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
}
|
|
|
|
.b {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 2;
|
|
grid-area: b-mq;
|
|
}
|
|
|
|
.grid.conflict > .b {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 1;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.a {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
}
|
|
.b {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 1;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 601px) {
|
|
.grid.conflict > .a {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
}
|
|
.grid.conflict > .b {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 2;
|
|
}
|
|
}
|
|
|
|
/*************************\
|
|
OVERRIDE CONFLICT TESTS
|
|
\*************************/
|
|
|
|
.grid-overide {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-template-areas: "overide";
|
|
}
|
|
|
|
.grid-overide > .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: overide;
|
|
}
|
|
|
|
.grid-overide .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: overide;
|
|
}
|
|
|
|
.grand-parent .mother {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-template-areas: "child";
|
|
}
|
|
.grand-parent .father {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-template-areas: "child child";
|
|
}
|
|
.grand-parent .father-second {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-template-areas: "child-unique";
|
|
}
|
|
@media (min-width: 600px) {
|
|
.grand-parent .father-second {
|
|
grid-template-areas: "child-unique child-unique";
|
|
}
|
|
}
|
|
.grand-parent .mother .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: child;
|
|
}
|
|
.grand-parent .mother > .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: child;
|
|
}
|
|
|
|
.grand-parent .father .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 2;
|
|
grid-area: child;
|
|
}
|
|
.grand-parent .father > .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 2;
|
|
grid-area: child;
|
|
}
|
|
|
|
/* emit warning */
|
|
.uncle .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: child;
|
|
}
|
|
|
|
/* emit warning */
|
|
.uncle > .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: child;
|
|
}
|
|
|
|
/* emit warning */
|
|
.grand-parent .uncle-second .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: child;
|
|
}
|
|
|
|
/* emit warning */
|
|
.grand-parent .uncle-second > .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: child;
|
|
}
|
|
|
|
/* emit warning */
|
|
.grand-parent .father.uncle .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 2;
|
|
grid-area: child;
|
|
}
|
|
|
|
/* emit warning */
|
|
.grand-parent.uncle .father > .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: child;
|
|
}
|
|
|
|
/* must not emit warning */
|
|
.uncle .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: child-unique;
|
|
}
|
|
|
|
/* must not emit warning */
|
|
.uncle > .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: child-unique;
|
|
}
|
|
@media (min-width: 600px) {
|
|
.uncle .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 2;
|
|
}
|
|
.uncle > .cell {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 2;
|
|
}
|
|
}
|
|
/*************************\
|
|
MULTI SELECTOR TEST
|
|
\*************************/
|
|
|
|
.grand-parent .uncle,
|
|
.grand-parent .aunt {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-template-areas: "cousin";
|
|
}
|
|
.grand-parent .uncle .cousin {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: cousin;
|
|
}
|
|
.grand-parent .uncle > .cousin {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: cousin;
|
|
}
|
|
.grand-parent .aunt .cousin {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: cousin;
|
|
}
|
|
.grand-parent .aunt > .cousin {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: cousin;
|
|
}
|
|
|
|
/*************************\
|
|
CONTROL COMMENTS TEST
|
|
\*************************/
|
|
|
|
/* must not add prefixes */
|
|
.uncle .cell {
|
|
/* autoprefixer: off */
|
|
grid-area: child;
|
|
}
|
|
|
|
/* must not add prefixes */
|
|
.uncle .cell {
|
|
/* autoprefixer: ignore next */
|
|
grid-area: child;
|
|
}
|
|
|
|
.grid-example {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.grid-example {
|
|
grid-template-areas:
|
|
'first first'
|
|
'second third';
|
|
}
|
|
}
|
|
|
|
.grid-area-first {
|
|
grid-area: first;
|
|
}
|
|
|
|
.grid-area-second {
|
|
grid-area: second;
|
|
}
|
|
|
|
.grid-area-third {
|
|
grid-area: third;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.grid-area-first {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 2;
|
|
}
|
|
.grid-area-second {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 1;
|
|
}
|
|
.grid-area-third {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 2;
|
|
}
|
|
}
|