[iOS Sim Debug] ASSERTION FAILED: m_downloads.isEmpty() Layout Test http/tests/websoc...
[WebKit-https.git] / PerformanceTests / JetStream2 / JetStream.css
1 /*
2  * Copyright (C) 2018 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24 */
25
26 html {
27     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
28     font-size: 62.5%;
29     font-synthesis: none;
30 }
31
32 body {
33     margin: 0;
34     font-size: 1.6rem;
35     font-weight: 400;
36     line-height: 1.4;
37     background-repeat: no-repeat;
38     background-position: center -5vw;
39     background-size: 100vw;
40     padding-bottom: 0px;
41     background-image: url('clouds.svg');
42 }
43
44 ::selection {
45     background-color: #34AADC;
46     color: white;
47 }
48
49 main {
50     display: block;
51     max-width: 1180px;
52     margin: auto;
53     text-align: center;
54 }
55
56 img {
57     -webkit-user-select: none;
58     -webkit-user-drag: none;
59 }
60
61 .logo {
62     box-sizing: border-box;
63     width: 100%;
64     -webkit-touch-callout: none;
65     -webkit-user-select: none;
66     -moz-user-select: none;
67     -ms-user-select: none;
68     user-select: none;
69     perspective: 600;
70 }
71
72 .logo .logo-image {
73     display: block;
74     box-sizing: border-box;
75     background-repeat: no-repeat;
76     background-position: center;
77     background-image: url('JetStream2Logo.svg');
78     color: transparent;
79     animation: swingin 350ms ease-out forwards;
80     will-change: transform, opacity;
81     height: 75px;
82 }
83
84 #jetstreams {
85     background-image: url('jetstreams.svg');
86     background-repeat: no-repeat;
87     background-size: contain;
88     background-position: center;
89     padding: 2rem 0;
90     margin: -2rem 0;
91 }
92
93 #jetstreams svg {
94     width: 100%;
95     max-height: 120px;
96 }
97
98 #magic {
99     position: absolute;
100     top: -900px;
101     left: -900px;
102     width: 300px;
103     height: 300px;
104     display: none;
105 }
106
107 .summary {
108     text-align: center;
109 }
110
111 .summary + .summary {
112     padding-top: 5px;
113     margin-top: 5px;
114 }
115
116 .summary:empty {
117     display: none;
118 }
119
120 article, .summary {
121     max-width: 70rem;
122     margin: 0 auto 1rem;
123     opacity: 0;
124     animation: fadein 0.5s ease-in-out forwards;
125     animation-delay: 200ms;
126 }
127
128 h1 {
129     color: black;
130     text-align: center;
131 }
132
133
134 h2, h3, h4, h5, h6 {
135      color: #2C98D1;
136      text-align: left;
137 }
138
139
140 h4, h5, h6 {
141     margin-bottom: 0;
142 }
143
144 p {
145     text-align: left;
146     color: #555555;
147     margin: 0 0 3rem 0;
148 }
149
150 h5, h6 {
151     font-size: 1.6rem;
152 }
153
154 h6 {
155     color: #444444;
156 }
157
158 dt {
159     margin-top: 10px;
160     font-weight: bold;
161     text-align: left;
162 }
163
164 dd {
165     text-align: left;
166     padding: 10px 20px;
167     margin: 0;
168 }
169
170 a:link,
171 a:visited {
172     color: #34AADC;
173 }
174
175 a:hover,
176 a:active {
177     color: #0086BF;
178 }
179
180 #status {
181     margin: 2rem 0rem;
182 }
183
184 #status label,
185 a.button {
186     display: inline-block;
187     font-weight: 500;
188     text-decoration: none;
189     font-size: 2rem;
190     background-color: rgb(52,170,220);
191     background-image: linear-gradient(180deg, rgba(134,217,255,1) -80%, rgba(52,170,220,1) 100%);
192     color: rgb(255,255,255);
193     border: 1px solid rgb(52,170,220);
194     border-radius: 2px;
195     padding: 0.3rem 9rem 0.5rem;
196     -webkit-touch-callout: none;
197     -webkit-user-select: none;
198     -moz-user-select: none;
199     -ms-user-select: none;
200     user-select: none;
201 }
202
203 a.button {
204     animation: fadein 500ms ease-in forwards, scaledown 500ms ease-in forwards;
205     opacity: 0;
206 }
207
208 #status label,
209 .button:hover {
210     background-image: none;
211 }
212
213 #status.loading {
214     position: absolute;
215     top: 0;
216     left: 0;
217     margin: 48vh 0 0;
218     width: 100%;
219     line-height: 1.2;
220     font-size: 4rem;
221     font-style: italic;
222     font-weight: 500;
223     letter-spacing: -0.10rem;
224     color: transparent;
225     background-image: linear-gradient(132deg, #FFFFFF 0%, #FFFFFF 2%, #86D9FF 42%, #8BDAFF 84%, #FFFFFF 98%, #FFFFFF 100%);
226     -webkit-background-clip: text;
227     animation: shine 2s ease-in-out infinite;
228     animation-delay: 2s;
229     background-size: 1200px 100%;
230     background-repeat: no-repeat;
231     -webkit-touch-callout: none;
232     -webkit-user-select: none;
233     -moz-user-select: none;
234     -ms-user-select: none;
235     user-select: none;
236 }
237
238 #status.error {
239     max-width: 70rem;
240     margin: 0 auto 1rem;
241 }
242
243 .error h2, .error p {
244     color: #d24a59;
245     margin-bottom: 0;
246     text-align: center;
247     font-weight: 500;
248 }
249
250 .error h2 {
251     font-size: 5rem;
252     letter-spacing: -0.1rem;
253     line-height: 1;
254 }
255
256 #result-summary:empty {
257     display: none;
258 }
259
260 #result-summary {
261     margin-top: 20px;
262 }
263
264 #result-summary label {
265     color: #6c6c71;
266 }
267
268 #result-summary .score {
269     font-weight: bold;
270     font-size: 4rem;
271     line-height: 1;
272     color: #34AADC;
273     font-weight: 500;
274 }
275
276 #result-summary .score .interval {
277     display: block;
278     font-weight: normal;
279 }
280
281 #results {
282     display: flex;
283     flex-wrap: wrap;
284     justify-content: space-around;
285     animation: fadein 500ms ease-out forwards;
286     opacity: 0;
287 }
288
289 .benchmark {
290     position: relative;
291     flex: 1;
292     max-width: 20%;
293     min-width: 200px;
294     text-align: left;
295     color: #8E8E93;
296     font-size: 1.6rem;
297     margin: 0 1.6rem 3rem 0;
298
299 }
300
301 .benchmark h3, .benchmark h4, .benchmark .result, .benchmark label {
302     color: transparent;
303     background: linear-gradient(160deg, rgba(249,249,249,1) 0%, rgba(238,238,238,1) 100%);
304     border-radius: 3px;
305 }
306
307 .benchmark-running h4, .benchmark-running .result, .benchmark-running label {
308     color: #86D9FF;
309     background-color: #86D9FF;
310     background-image: none;
311 }
312
313 .benchmark-done h3, .benchmark-done h4, .benchmark-done .result, .benchmark-done label {
314     background-color: transparent;
315     background-image: none;
316     -webkit-touch-callout: revert;
317     -webkit-user-select: text;
318     -moz-user-select: text;
319     -ms-user-select: text;
320     user-select: text;
321 }
322
323 .benchmark h3 {
324     font-weight: 400;
325     font-size: 1.6rem;
326     margin: 0;
327 }
328
329 .benchmark-running h3 {
330     background-color: transparent;
331     background-image: none;
332     color: #34AADC;
333 }
334
335 .benchmark-done h3 {
336     color: #6c6c71;
337 }
338
339 .benchmark h3 a,
340 .benchmark h3 a:link,
341 .benchmark h3 a:active,
342 .benchmark h3 a:hover,
343 .benchmark h3 a:visited {
344     color: inherit;
345     text-decoration: none;
346 }
347
348 .benchmark-done h3 a:hover {
349     color: #34AADC;
350     text-decoration: underline;
351 }
352
353 .benchmark h4 {
354     margin: 0.3rem 0;
355     line-height: 1;
356     font-weight: 400;
357     font-size: 2.4rem;
358 }
359
360 .benchmark-done h4 {
361     color: #34AADC;
362     background-color: none;
363 }
364
365 .benchmark p,
366 .benchmark-done p {
367     margin: 0;
368 }
369
370 .benchmark .result {
371     display: inline-block;
372     margin-right: 1.6rem;
373     line-height: 1.3;
374     font-size: 1.3rem;
375     font-weight: bold;
376 }
377
378 .benchmark-done .result {
379     color: #4A4A4A;
380 }
381
382 .benchmark label {
383     display: block;
384 }
385
386 .benchmark-done label {
387     color: #8E8E93;
388     font-weight: 400;
389 }
390
391 @keyframes fadein {
392     from {
393         opacity: 0;
394     }
395     to {
396         opacity: 1;
397     }
398 }
399
400 @keyframes scaledown {
401     from {
402         transform: scale(1.3,1.3);
403     }
404     to {
405         transform: scale(1,1);
406     }
407 }
408
409 @keyframes shine {
410     0% {
411         background-position: -1200px center;
412     }
413     100% {
414         background-position: 100vw center;
415     }
416 }
417
418 @keyframes swingin {
419     from {
420         opacity: 0;
421         transform: rotateY(-85deg) translateZ(200px);
422     }
423     to {
424         opacity: 1;
425         transform: rotateY(0deg) translateZ(0px);
426     }
427 }
428
429 @media (max-width: 415px) {
430     body {
431         background-position: center 4rem;
432     }
433
434     .logo .logo-image {
435         height: 60px;
436     }
437
438     #jetstreams {
439         background-size: 200%;
440     }
441
442
443     article, .summary {
444         padding-top: 10rem;
445         margin: 0 1rem;
446     }
447
448     a.button {
449         padding: 0.3rem 6rem 0.5rem;
450     }
451 }