Skip to content

Commit b90fa92

Browse files
pk910pk910
committed
add execution spec test report styles
1 parent 4e42af2 commit b90fa92

File tree

1 file changed

+319
-0
lines changed

1 file changed

+319
-0
lines changed

‎res/execution-spec-tests-styles.css‎

Lines changed: 319 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,319 @@
1+
body {
2+
font-family: Helvetica, Arial, sans-serif;
3+
font-size: 12px;
4+
/* do not increase min-width as some may use split screens */
5+
min-width: 800px;
6+
color: #999;
7+
}
8+
9+
h1 {
10+
font-size: 24px;
11+
color: black;
12+
}
13+
14+
h2 {
15+
font-size: 16px;
16+
color: black;
17+
}
18+
19+
p {
20+
color: black;
21+
}
22+
23+
a {
24+
color: #999;
25+
}
26+
27+
table {
28+
border-collapse: collapse;
29+
}
30+
31+
/******************************
32+
* SUMMARY INFORMATION
33+
******************************/
34+
#environment td {
35+
padding: 5px;
36+
border: 1px solid #e6e6e6;
37+
vertical-align: top;
38+
}
39+
#environment tr:nth-child(odd) {
40+
background-color: #f6f6f6;
41+
}
42+
#environment ul {
43+
margin: 0;
44+
padding: 0 20px;
45+
}
46+
47+
/******************************
48+
* TEST RESULT COLORS
49+
******************************/
50+
span.passed,
51+
.passed .col-result {
52+
color: green;
53+
}
54+
55+
span.skipped,
56+
span.xfailed,
57+
span.rerun,
58+
.skipped .col-result,
59+
.xfailed .col-result,
60+
.rerun .col-result {
61+
color: orange;
62+
}
63+
64+
span.error,
65+
span.failed,
66+
span.xpassed,
67+
.error .col-result,
68+
.failed .col-result,
69+
.xpassed .col-result {
70+
color: red;
71+
}
72+
73+
.col-links__extra {
74+
margin-right: 3px;
75+
}
76+
77+
/******************************
78+
* RESULTS TABLE
79+
*
80+
* 1. Table Layout
81+
* 2. Extra
82+
* 3. Sorting items
83+
*
84+
******************************/
85+
/*------------------
86+
* 1. Table Layout
87+
*------------------*/
88+
#results-table {
89+
border: 1px solid #e6e6e6;
90+
color: #999;
91+
font-size: 12px;
92+
width: 100%;
93+
}
94+
#results-table th,
95+
#results-table td {
96+
padding: 5px;
97+
border: 1px solid #e6e6e6;
98+
text-align: left;
99+
}
100+
#results-table th {
101+
font-weight: bold;
102+
}
103+
104+
/*------------------
105+
* 2. Extra
106+
*------------------*/
107+
.logwrapper {
108+
max-height: 230px;
109+
overflow-y: scroll;
110+
background-color: #e6e6e6;
111+
}
112+
.logwrapper.expanded {
113+
max-height: none;
114+
}
115+
.logwrapper.expanded .logexpander:after {
116+
content: "collapse [-]";
117+
}
118+
.logwrapper .logexpander {
119+
z-index: 1;
120+
position: sticky;
121+
top: 10px;
122+
width: max-content;
123+
border: 1px solid;
124+
border-radius: 3px;
125+
padding: 5px 7px;
126+
margin: 10px 0 10px calc(100% - 80px);
127+
cursor: pointer;
128+
background-color: #e6e6e6;
129+
}
130+
.logwrapper .logexpander:after {
131+
content: "expand [+]";
132+
}
133+
.logwrapper .logexpander:hover {
134+
color: #000;
135+
border-color: #000;
136+
}
137+
.logwrapper .log {
138+
min-height: 40px;
139+
position: relative;
140+
top: -50px;
141+
height: calc(100% + 50px);
142+
border: 1px solid #e6e6e6;
143+
color: black;
144+
display: block;
145+
font-family: "Courier New", Courier, monospace;
146+
padding: 5px;
147+
padding-right: 80px;
148+
white-space: pre-wrap;
149+
}
150+
151+
div.media {
152+
border: 1px solid #e6e6e6;
153+
float: right;
154+
height: 240px;
155+
margin: 0 5px;
156+
overflow: hidden;
157+
width: 320px;
158+
}
159+
160+
.media-container {
161+
display: grid;
162+
grid-template-columns: 25px auto 25px;
163+
align-items: center;
164+
flex: 1 1;
165+
overflow: hidden;
166+
height: 200px;
167+
}
168+
169+
.media-container--fullscreen {
170+
grid-template-columns: 0px auto 0px;
171+
}
172+
173+
.media-container__nav--right,
174+
.media-container__nav--left {
175+
text-align: center;
176+
cursor: pointer;
177+
}
178+
179+
.media-container__viewport {
180+
cursor: pointer;
181+
text-align: center;
182+
height: inherit;
183+
}
184+
.media-container__viewport img,
185+
.media-container__viewport video {
186+
object-fit: cover;
187+
width: 100%;
188+
max-height: 100%;
189+
}
190+
191+
.media__name,
192+
.media__counter {
193+
display: flex;
194+
flex-direction: row;
195+
justify-content: space-around;
196+
flex: 0 0 25px;
197+
align-items: center;
198+
}
199+
200+
.collapsible td:not(.col-links) {
201+
cursor: pointer;
202+
}
203+
.collapsible td:not(.col-links):hover::after {
204+
color: #bbb;
205+
font-style: italic;
206+
cursor: pointer;
207+
}
208+
209+
.col-result {
210+
width: 130px;
211+
}
212+
.col-result:hover::after {
213+
content: " (hide details)";
214+
}
215+
216+
.col-result.collapsed:hover::after {
217+
content: " (show details)";
218+
}
219+
220+
#environment-header h2:hover::after {
221+
content: " (hide details)";
222+
color: #bbb;
223+
font-style: italic;
224+
cursor: pointer;
225+
font-size: 12px;
226+
}
227+
228+
#environment-header.collapsed h2:hover::after {
229+
content: " (show details)";
230+
color: #bbb;
231+
font-style: italic;
232+
cursor: pointer;
233+
font-size: 12px;
234+
}
235+
236+
/*------------------
237+
* 3. Sorting items
238+
*------------------*/
239+
.sortable {
240+
cursor: pointer;
241+
}
242+
.sortable.desc:after {
243+
content: " ";
244+
position: relative;
245+
left: 5px;
246+
bottom: -12.5px;
247+
border: 10px solid #4caf50;
248+
border-bottom: 0;
249+
border-left-color: transparent;
250+
border-right-color: transparent;
251+
}
252+
.sortable.asc:after {
253+
content: " ";
254+
position: relative;
255+
left: 5px;
256+
bottom: 12.5px;
257+
border: 10px solid #4caf50;
258+
border-top: 0;
259+
border-left-color: transparent;
260+
border-right-color: transparent;
261+
}
262+
263+
.hidden, .summary__reload__button.hidden {
264+
display: none;
265+
}
266+
267+
.summary__data {
268+
flex: 0 0 550px;
269+
}
270+
.summary__reload {
271+
flex: 1 1;
272+
display: flex;
273+
justify-content: center;
274+
}
275+
.summary__reload__button {
276+
flex: 0 0 300px;
277+
display: flex;
278+
color: white;
279+
font-weight: bold;
280+
background-color: #4caf50;
281+
text-align: center;
282+
justify-content: center;
283+
align-items: center;
284+
border-radius: 3px;
285+
cursor: pointer;
286+
}
287+
.summary__reload__button:hover {
288+
background-color: #46a049;
289+
}
290+
.summary__spacer {
291+
flex: 0 0 550px;
292+
}
293+
294+
.controls {
295+
display: flex;
296+
justify-content: space-between;
297+
}
298+
299+
.filters,
300+
.collapse {
301+
display: flex;
302+
align-items: center;
303+
}
304+
.filters button,
305+
.collapse button {
306+
color: #999;
307+
border: none;
308+
background: none;
309+
cursor: pointer;
310+
text-decoration: underline;
311+
}
312+
.filters button:hover,
313+
.collapse button:hover {
314+
color: #ccc;
315+
}
316+
317+
.filter__label {
318+
margin-right: 10px;
319+
}

0 commit comments

Comments
 (0)