1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
// InactivePropertyHelper `place-items` and `place-content` test cases.
export default [
{
info: "place-items is inactive on block element",
property: "place-items",
tagName: "div",
rules: ["div { place-items: center; }"],
isActive: false,
},
{
info: "place-items is inactive on inline element",
property: "place-items",
tagName: "span",
rules: ["span { place-items: center; }"],
isActive: false,
},
{
info: "place-items is inactive on flex item",
property: "place-items",
createTestElement: rootNode => {
const container = document.createElement("div");
const element = document.createElement("span");
container.append(element);
rootNode.append(container);
return element;
},
rules: [
"div { display: flex; align-items: start; }",
"span { place-items: center; }",
],
ruleIndex: 1,
isActive: false,
},
{
info: "place-items is inactive on grid item",
property: "place-items",
createTestElement: rootNode => {
const container = document.createElement("div");
const element = document.createElement("span");
container.append(element);
rootNode.append(container);
return element;
},
rules: [
"div { display: grid; align-items: start; }",
"span { place-items: center; }",
],
ruleIndex: 1,
isActive: false,
},
{
info: "place-items is active on flex container",
property: "place-items",
tagName: "div",
rules: ["div { place-items: center; display: flex;}"],
isActive: true,
},
{
info: "place-items is active on inline-flex container",
property: "place-items",
tagName: "div",
rules: ["div { place-items: center; display: inline-flex;}"],
isActive: true,
},
{
info: "place-items is active on grid container",
property: "place-items",
tagName: "div",
rules: ["div { place-items: center; display: grid;}"],
isActive: true,
},
{
info: "place-items is active on inline grid container",
property: "place-items",
tagName: "div",
rules: ["div { place-items: center; display: inline-grid;}"],
isActive: true,
},
{
info: "place-content is inactive on block element",
property: "place-content",
tagName: "div",
rules: ["div { place-content: center; }"],
isActive: false,
},
{
info: "place-content is inactive on inline element",
property: "place-content",
tagName: "span",
rules: ["span { place-content: center; }"],
isActive: false,
},
{
info: "place-content is inactive on flex item",
property: "place-content",
createTestElement: rootNode => {
const container = document.createElement("div");
const element = document.createElement("span");
container.append(element);
rootNode.append(container);
return element;
},
rules: [
"div { display: flex; align-items: start; }",
"span { place-content: center; }",
],
ruleIndex: 1,
isActive: false,
},
{
info: "place-content is inactive on grid item",
property: "place-content",
createTestElement: rootNode => {
const container = document.createElement("div");
const element = document.createElement("span");
container.append(element);
rootNode.append(container);
return element;
},
rules: [
"div { display: grid; align-items: start; }",
"span { place-content: center; }",
],
ruleIndex: 1,
isActive: false,
},
{
info: "place-content is active on flex container",
property: "place-content",
tagName: "div",
rules: ["div { place-content: center; display: flex;}"],
isActive: true,
},
{
info: "place-content is active on inline-flex container",
property: "place-content",
tagName: "div",
rules: ["div { place-content: center; display: inline-flex;}"],
isActive: true,
},
{
info: "place-content is active on grid container",
property: "place-content",
tagName: "div",
rules: ["div { place-content: center; display: grid;}"],
isActive: true,
},
{
info: "place-content is active on inline grid container",
property: "place-content",
tagName: "div",
rules: ["div { place-content: center; display: inline-grid;}"],
isActive: true,
},
];
|
