Add new benchmark tests.
[WebKit-https.git] / PerformanceTests / Animometer / resources / runner / animometer.css
1 /* Outer harness */
2 html,body {
3     height: 100%;
4     margin: 0px;
5     padding: 0px;
6 }
7
8 body {
9     background-color: rgb(241, 241, 241);
10     color: rgb(96, 96, 96);
11     font-family: -apple-system, "Helvetica Neue", Helvetica, Verdana, sans-serif;
12 }
13
14 main {
15     width: 100%;
16     height: 100%;
17
18     display: flex;
19     align-items: center;
20     justify-content: flex-start;
21     flex-flow: column;
22 }
23
24 hr {
25     flex: 1 0 20px;
26     width: 1px;
27     border: 0;
28     margin: 0;
29 }
30
31 section {
32     box-sizing: border-box;
33     width: 100%;
34     display: none;
35 }
36
37 section.selected {
38     display: initial;
39 }
40
41 h1 {
42     font-size: 3em;
43     text-align: center;
44     font-weight: 600;
45     margin: 10vh 0;
46     flex: 0 1 1em;
47 }
48
49 button {
50     flex: 0 0 auto;
51     display: block;
52     font-size: 1.5em;
53     margin-bottom: 10vh;
54     border: 2px solid rgb(96, 96, 96);
55     color: rgb(96, 96, 96);
56     background: transparent;
57     border-radius: 10px;
58     padding: .5em 2em;
59 }
60
61 button:hover {
62     background-color: rgba(0, 0, 0, .1);
63     cursor: pointer;
64 }
65
66 button:active {
67     color: inherit;
68     background-color: rgba(0, 0, 0, .2);
69 }
70
71
72 @media screen and (min-device-width: 768px) {
73     section {
74         padding: 0 20px;
75     }
76
77     section.selected {
78         display: flex;
79         align-items: center;
80         justify-content: flex-start;
81         flex-flow: column;
82     }
83 }
84
85 @media screen and (max-device-width: 414px) {
86     h1 {
87         font-size: 2.5em;
88     }
89
90     hr {
91         flex: 0 0 0;
92     }
93
94     section {
95         box-sizing: border-box;
96         width: 100%;
97         height: 100%;
98         align-self: stretch;
99         padding: 0 5px;
100     }
101 }
102
103 /* Intro section */
104 #intro.selected {
105     flex: 1 0 auto;
106 }
107
108 #intro p {
109     flex: 1 1 auto;
110     padding: 0 0 10vh 0;
111     font-size: 2em;
112 }
113
114 @media screen and (min-device-width: 768px) {
115     #intro p {
116         max-width: 800px;
117         margin: 0;
118     }
119 }
120
121 @media screen and (max-device-width: 414px) {
122     #intro.selected {
123         display: flex;
124         align-items: center;
125         justify-content: flex-start;
126         flex-flow: column;
127     }
128
129     #intro p {
130         padding-left: 20px;
131         padding-right: 20px;
132         font-size: 1.5em;
133     }
134 }
135
136 /* Running test section */
137 #test-container.selected {
138     display: flex;
139
140     align-items: center;
141     justify-content: center;
142 }
143
144 .frame-container > iframe {
145     width: 1200px;
146     height: 600px;
147     border: 0;
148     margin: 0 auto;
149 }
150
151 @media screen and (min-device-width: 1800px) {
152     .frame-container > iframe {
153         width: 1600px;
154         height: 800px;
155     }
156 }
157
158 @media screen and (max-device-width: 414px) {
159     #test-container {
160         padding: 0;
161     }
162
163     .frame-container {
164         width: 100%;
165         height: 100%;
166         overflow: hidden;
167     }
168
169     .frame-container > iframe {
170         width: 100%;
171         height: 100%;
172     }
173 }
174
175 @media screen and (max-device-width: 1024px) {
176     .frame-container > iframe {
177         width: 900px;
178     }
179 }
180
181 /* Results section */
182 #results {
183     text-align: center;
184 }
185
186 #results.selected {
187     flex: 1 0 auto;
188 }
189
190 .score {
191     font-size: 5em;
192     font-weight: bold;
193     margin: 0;
194 }
195
196 #results-tables {
197     direction: rtl;
198
199     display: flex;
200
201     align-items: center;
202     justify-content: center;
203
204     margin: 3em 0;
205 }
206
207 #results table {
208     direction: ltr;
209     border-spacing: 0;
210 }
211
212 #results th {
213     padding: .5em 0;
214 }
215
216 #results tr td {
217     padding: .25em 0;
218 }
219
220 #results-header td, #results-header th {
221     text-align: left;
222 }
223 #results-header tr td {
224     padding-right: 1em;
225 }
226 #results-score td, #results-score th {
227     text-align: right;
228 }
229
230 @media screen and (max-device-width: 414px) {
231     #results.selected {
232         padding: 0 20px;
233         display: flex;
234         align-items: center;
235         justify-content: flex-start;
236         flex-flow: column;
237     }
238
239     .score {
240         font-size: 3em;
241     }
242 }