Add support for statically linking to a specific test
[WebKit-https.git] / PerformanceTests / Animometer / resources / debug-runner / animometer.css
1 body {
2     background-color: rgb(96, 96, 96);
3     color: rgb(235, 235, 235);
4 }
5
6 .hidden {
7     display: none;
8 }
9
10 h1 {
11     margin: 5vh 0;
12 }
13
14 button {
15     border: 2px solid rgb(235, 235, 235);
16     color: rgb(235, 235, 235);
17 }
18
19 button:disabled {
20     border-color: rgba(235, 235, 235, .5);
21     color: rgba(235, 235, 235, .5);
22 }
23
24 button:hover {
25     background-color: rgba(255, 255, 255, .1);
26     cursor: pointer;
27 }
28
29 button:active {
30     color: inherit;
31     background-color: rgba(255, 255, 255, .2);
32 }
33
34 @media screen and (min-device-width: 1800px) {
35     section {
36         width: 1600px;
37         height: 800px;
38     }
39 }
40
41 /* -------------------------------------------------------------------------- */
42 /*                               Tree                                         */
43 /* -------------------------------------------------------------------------- */
44
45 .tree {
46     padding: 0;
47     list-style-type: none;
48 }
49
50 .tree .expand-button {
51     position: absolute;
52     clip: rect(0, 0, 0, 0);
53 }
54
55 .tree .expand-button ~ ul {
56     display: none;
57 }
58
59 .tree .expand-button:checked ~ ul {
60     display: block;
61 }
62
63 .tree ul {
64     list-style-type:none;
65 }
66
67 .tree li {
68     position: relative;
69     padding: 0 0 1em 1em;
70 }
71
72 .tree ul li {
73     list-style:none;
74     padding: 1em 0 0 0em;
75 }
76
77 .tree > li:last-child {
78     padding-bottom: 0;
79 }
80
81 .tree-label {
82   position: relative;
83   display: inline-block;
84 }
85
86 label.tree-label {
87     cursor: pointer;
88 }
89
90 .tree > li > label.tree-label:before {
91     position: relative;
92     z-index: 1;
93     float: left;
94     margin: 0 0 0 -2em;
95     width: 1em;
96     height: 1em;
97     content: '\25BA';
98     text-align: center;
99     line-height: 2.5em;
100     font-size: .5em;
101 }
102
103 .tree > li > :checked ~ label.tree-label:before {
104     content: '\25BC';
105 }
106
107 .tree .link {
108     cursor: pointer;
109     color: #999;
110     font-style: italic;
111     margin-left: 2em;
112 }
113
114 @media screen and (max-device-width: 414px) {
115     .tree {
116         padding-left: 1em;
117     }
118     .tree > li > label.tree-label:before {
119         font-size: 1em;
120         margin-left: -1.75em;
121         line-height: 1em;
122     }
123 }
124
125 /* -------------------------------------------------------------------------- */
126 /*                                 Intro Section                              */
127 /* -------------------------------------------------------------------------- */
128
129 #intro {
130     flex-direction: column;
131     justify-content: flex-start;
132     align-content: center;
133
134     min-height: 600px;
135     height: auto;
136 }
137
138 #intro h2 {
139     margin-top: 0;
140     font-size: 1.2em;
141 }
142
143 #intro > div {
144     width: 100%;
145     margin: 2em 0;
146     flex-direction: row;
147     display: flex;
148     align-content: flex-start;
149 }
150
151 #suites {
152     padding-left: 15vw;
153     padding-right: 3em;
154     flex: 1 1 30%;
155 }
156
157 #options {
158     flex: 10 1 auto;
159 }
160
161 #intro input[type="number"] {
162     width: 50px;
163 }
164
165 #suites input[type="number"] {
166     display: none;
167     float: right;
168 }
169
170 #suites input[type="number"].selected {
171     display: inline;
172     margin: 0;
173 }
174
175 #suites ul ul {
176     font-size: .8em;
177     margin: 0;
178     padding: 0 0 0 1em;
179 }
180
181 #suites > div {
182     margin-top: 3em;
183 }
184
185 #drop-target {
186     font-size: 1em;
187     border-radius: 10px;
188     padding: .5em 2em;
189     border: 2px solid rgb(235, 235, 235);
190     color: rgb(235, 235, 235);
191 }
192
193 #drop-target:hover {
194     background-color: rgba(255, 255, 255, .1);
195     cursor: pointer;
196 }
197
198 #options ul {
199     margin: 0;
200     padding: 0;
201     list-style: none;
202 }
203
204 #options h3 {
205     font-size: 1em;
206     font-weight: inherit;
207     margin: 0 0 .3em 0;
208     padding: 0;
209 }
210
211 #options > form > ul > li {
212     padding: 0 0 1em 0;
213 }
214
215 #options ul ul {
216     padding: 0;
217 }
218
219 #options li {
220     padding: .1em 0;
221 }
222
223 @media screen and (min-device-width: 1800px) {
224     #intro {
225         min-height: 800px;
226     }
227 }
228
229 @media screen and (max-device-width: 414px) {
230     #intro {
231         min-height: 100%;
232     }
233
234     #intro > div {
235         flex-direction: column;
236     }
237
238     #suites,
239     #options {
240         padding: 0 5px;
241         margin: 0;
242         flex: 0 0 auto;
243     }
244 }
245
246 /* -------------------------------------------------------------------------- */
247 /*                           Running Section                                  */
248 /* -------------------------------------------------------------------------- */
249
250 #test-container {
251     position: relative;
252 }
253
254 #running-test {
255     display: flex;
256     align-items: center;
257     justify-content: center;
258 }
259
260 #progress {
261     display: none;
262 }
263
264 .display-progress-bar #progress {
265     display: block;
266     position: fixed;
267     top: 0;
268     left: 0;
269     height: 6px;
270     width: 100%;
271     background-color: rgb(128, 128, 128);
272 }
273
274 .display-progress-bar #progress-completed {
275     position: absolute;
276     top: 0;
277     left: 0;
278     height: 6px;
279     width: 0;
280     background-color: rgb(235, 96, 32);
281 }
282
283 @media screen and (min-device-width: 1800px) {
284     .frame-container > iframe {
285         width: 1600px;
286         height: 800px;
287     }
288 }
289
290 /* -------------------------------------------------------------------------- */
291 /*                           Results Section                                  */
292 /* -------------------------------------------------------------------------- */
293
294 #results h1, #test-graph h1 {
295     font-size: 2em;
296 }
297
298 #results button.small-button {
299     border: 1px solid rgba(235, 235, 235, .9);
300     color: rgba(235, 235, 235, .9);
301     border-radius: 2px;
302     padding: 1px 4px;
303     margin: 0 0 0 1em;
304     font-size: 9px;
305 }
306
307 #results button.small-button:active {
308     background-color: rgba(235, 235, 235, .2);
309     color: inherit;
310 }
311
312 .score {
313     font-size: 3em;
314 }
315
316 .mean {
317     margin-top: 0;
318     margin-bottom: 1em;
319     font-size: 1.5em;
320     font-weight: 400;
321 }
322
323 #results-data .average {
324     padding-left: 1em;
325     text-align: right;
326 }
327
328 #results-data .stdev {
329     text-align: left;
330     padding-left: .25em;
331 }
332
333 #results-data .left {
334     text-align: left;
335 }
336
337 #results-data .right {
338     text-align: right;
339 }
340
341 #results-data .pad-left {
342     padding-left: 1em;
343 }
344
345 #results-data .pad-right {
346     padding-right: .25em;
347 }
348
349 #results-data .small {
350     font-size: .8em;
351 }
352
353 #results-tables td.noisy-results {
354     color: rgb(255, 104, 104);
355 }
356
357 #results-tables div {
358     direction: ltr;
359     display: flex;
360     flex-direction: row;
361 }
362
363 #test-graph {
364     flex: 1 0 calc(100% - 40px);
365 }
366
367 #test-graph h1 {
368     margin-bottom: 0;
369 }
370
371 #test-graph header {
372     position: relative;
373     width: 100%;
374 }
375
376 #test-graph header button {
377     position: absolute;
378     top: 1.5em;
379     left: 0;
380     border-width: 1px;
381     font-size: 1em;
382     padding: .5em 1em;
383 }
384
385 #test-graph-data {
386     flex: 1 1 auto;
387     align-self: stretch;
388     z-index: 1;
389 }
390
391 #test-graph nav {
392     position: absolute;
393     top: 1.5em;
394     right: 0;
395     font-size: .7em;
396     width: 28em;
397 }
398
399 #test-graph nav ul {
400     margin: 0 30px 1em 0;
401     padding: 0;
402     list-style: none;
403 }
404
405 #test-graph nav li {
406     padding: .1em 0;
407 }
408
409 #test-graph nav li > span {
410     float: right;
411 }
412
413 #test-graph nav.hide-data span {
414     display: none;
415 }
416
417 /* -------------------------------------------------------------------------- */
418 /*                           Graph Section                                    */
419 /* -------------------------------------------------------------------------- */
420
421 #test-graph-data {
422     font: 10px sans-serif;
423     color: rgb(235, 235, 235);
424 }
425
426 #test-graph-data > svg {
427     fill: none;
428     overflow: visible;
429 }
430
431 .axis path,
432 .axis line {
433     fill: none;
434     stroke: #999999;
435     shape-rendering: crispEdges;
436 }
437
438 .axis text {
439     fill: #999;
440 }
441
442 .yLeft.axis text {
443     fill: #7add49;
444 }
445 .yLeft.axis path,
446 .yLeft.axis line {
447     stroke: #7add49;
448 }
449 .yRight.axis text {
450     fill: #fa4925;
451 }
452 .yRight.axis path,
453 .yRight.axis line {
454     stroke: #fa4925;
455 }
456
457 .axis.complexity .tick line {
458     stroke: rgba(200, 200, 200, .6);
459     stroke-width: 2px;
460 }
461
462 .axis.complexity .domain,
463 .axis.complexity text {
464     stroke: transparent;
465     fill: transparent;
466 }
467
468 .marker line {
469     stroke: #5493D6;
470 }
471
472 .marker text {
473     fill: #999;
474 }
475
476 .mean.complexity line {
477     stroke: hsla(100, 69%, 58%, .8);
478     stroke-width: 2px;
479 }
480
481 .mean.complexity polygon {
482     fill: hsla(100, 69%, 58%, .05);
483 }
484
485 .target-fps {
486     stroke: rgba(250, 73, 37, .4);
487     stroke-width: 1px;
488     stroke-dasharray: 10, 10;
489 }
490
491 .mean.fps line {
492     stroke: hsla(10, 96%, 56%, .8);
493     stroke-width: 2px;
494 }
495
496 .mean.fps polygon {
497     fill: hsla(10, 96%, 56%, .1);
498 }
499
500 #regressions line {
501     stroke: rgba(200, 200, 200, .8);
502     stroke-width: 2px;
503 }
504
505 #regressions circle {
506     fill: rgba(200, 200, 200, .8);
507 }
508
509 .cursor line {
510     stroke: rgb(250, 250, 250);
511     stroke-width: 1px;
512 }
513
514 .cursor circle,
515 .cursor text {
516     fill: rgb(250, 250, 250);
517 }
518
519 #complexity path {
520     stroke: rgba(122, 221, 73, .7);
521     stroke-width: 2px;
522 }
523
524 #complexity circle {
525     fill: rgb(122, 221, 73);
526 }
527
528 #filteredFPS path {
529     stroke: hsla(30, 96%, 56%, .7);
530     stroke-width: 1px;
531 }
532
533 #filteredFPS circle {
534     fill: hsl(30, 96%, 56%);
535 }
536
537 #rawFPS path {
538     stroke: rgba(250, 73, 37, .7);
539     stroke-width: 1px;
540 }
541
542 #rawFPS circle {
543     fill: rgb(250, 73, 37);
544 }
545
546 #complexity-graph .regression line {
547     stroke: rgba(253, 253, 253, .8);
548     stroke-width: 2px;
549 }
550
551 #complexity-graph .regression circle {
552     fill: rgba(253, 253, 253, .8);
553 }
554
555 #complexity-graph .regression polygon {
556     fill: rgba(253, 253, 253, .05);
557 }
558
559 #complexity-graph .raw.series line {
560     stroke: hsl(30, 96%, 56%);
561     stroke-width: 1px;
562 }
563
564 #complexity-graph .raw.regression line {
565     stroke: rgba(30, 96%, 86%, .6);
566 }
567
568 #complexity-graph .raw.regression polygon {
569     stroke: rgba(30, 96%, 86%, .05);
570 }
571
572 #complexity-graph .average.series circle {
573     fill: hsl(170, 96%, 56%);
574 }
575
576 #complexity-graph .average.series line {
577     stroke: hsla(170, 96%, 56%, .2);
578     stroke-width: 2px;
579 }
580
581 #complexity-graph .bootstrap .bar {
582     fill: hsla(260, 56%, 66%, .4);
583 }
584
585 #complexity-graph .bootstrap .median line {
586     stroke: hsla(300, 56%, 66%, .8);
587     stroke-width: 2px;
588 }
589
590 #complexity-graph .bootstrap .median circle {
591     fill: hsla(300, 56%, 66%, .8);
592 }
593
594 #complexity-graph .bootstrap .median polygon {
595     fill: hsla(300, 56%, 66%, .05);
596 }