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