Simple line layout: Add performance test to measure mid-word line breaking with long...
[WebKit.git] / PerformanceTests / JetStream / JetStream.css
1 body {
2     font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
3     font-size: 14px;
4     line-height: 19px;
5     background-image: url(Swoosh.png);
6     background-repeat: no-repeat;
7     background-position: center -40px;
8     background-size: 3000px auto;
9     padding-bottom: 00px;
10 }
11
12 ::selection {
13     background-color: rgb(19, 157, 215);
14     color: white;
15 }
16
17 main {
18     display: block; /* For IE11 */
19     width: 850px;
20     margin: auto;
21     text-align: center;
22     padding: 10px;
23 }
24
25 img {
26     -webkit-user-select: none;
27     -webkit-user-drag: none;
28 }
29
30 #logo {
31     width: 621px;
32     height: 96px;
33     margin-top: 40px;
34 }
35
36 #magic {
37     position: absolute;
38     top: -900px;
39     left: -900px;
40     width: 300px;
41     height: 300px;
42     display: none;
43 }
44
45 @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
46     #logo {
47         content: url(JetStream-Logo@2x.png); /* FIXME: This does not work in Firefox. */
48     }
49
50     body {
51         background-image: url(Swoosh@2x.png);
52     }
53 }
54
55 p.summary {
56     margin: 18px auto 5px;
57     background-image: -webkit-linear-gradient(right, white 70%, rgba(255, 255, 255, 0));
58     background-image: -moz-linear-gradient(right, white 70%, rgba(255, 255, 255, 0));
59     background-image: linear-gradient(to right, white 70%, rgba(255, 255, 255, 0));
60     padding: 15px 125px 0;
61     text-align: center;
62 }
63
64 p.summary + p.summary {
65     padding-top: 5px;
66     margin-top: 5px;
67 }
68
69 p.summary:empty {
70     display: none;
71 }
72
73 h1 {
74     color: rgb(19, 157, 215);
75     text-align: left;
76     margin-top: 40px;
77 }
78
79 p {
80     text-align: left;
81     text-indent: 20px;
82 }
83
84 p:first-of-type {
85     text-indent: 0;
86 }
87
88 dt {
89     margin-top: 10px;
90     font-weight: bold;
91     text-align: left;
92 }
93
94 dd {
95     text-align: left;
96     padding: 10px 20px;
97     margin: 0;
98 }
99
100 #status {
101     margin-top: 20px;
102 }
103
104 #status {
105     height: 20px;
106 }
107
108 #status a:link {
109     font-weight: bold;
110 }
111
112 #result-summary:empty {
113     display: none;
114 }
115
116 #result-summary {
117         margin-top: 20px;
118 }
119
120 #result-summary label {
121     font-weight: bold;
122 }
123
124 #result-summary .score {
125         font-weight: bold;
126     font-size: 40px;
127         line-height: 40px;
128     color: rgb(19, 157, 215);
129 }
130
131 #result-summary .score .interval {
132         display: block;
133         font-size: 16px;
134         line-height: 16px;
135         font-weight: normal;
136 }
137
138 .interval {
139     opacity: 0.75;
140 }
141
142 a:link, a:visited {
143     color: rgb(19, 157, 215);
144     text-decoration: none;
145 }
146
147 a:link:hover {
148     text-decoration: underline;
149 }
150
151 table {
152     border-spacing: 0;
153     border-collapse: collapse;
154     margin-top: 15px;
155     width: 100%;
156     table-layout: fixed;
157 }
158
159 td, th {
160     padding: 4px 8px;
161 }
162
163 th {
164     font-size: 12px;
165 }
166
167 tr:first-child > th:nth-child(odd):not(:first-child) {
168     border-left: 15px solid white;
169 }
170
171 tr:first-child > th:nth-child(odd) {
172     text-align: left;
173 }
174
175 tr:first-child > th:nth-child(even) {
176     width: px;
177 }
178
179 tr:nth-child(even):not(:first-child) {
180     background-color: rgb(230, 238, 242);
181 }
182
183 .result {
184     color: rgb(19, 157, 215);
185     white-space: nowrap;
186 }
187
188 .benchmark-name {
189     white-space: nowrap;
190     text-align: left;
191 }
192
193 .result.category,
194 .benchmark-name.category {
195     font-weight: bold;
196 }
197
198 .benchmark-name:not(.category):not(.geometric-mean) {
199     text-indent: 0.5em;
200 }
201
202 .geometric-mean {
203     font-weight: bold;
204 }
205
206 .benchmark-name:not(:first-child) {
207     border-left: 15px solid white;
208 }
209
210 .benchmark-name a:link,
211 .benchmark-name a:visited {
212     color: black;
213 }
214
215 .highlighted-result {
216     background-color: rgb(19, 157, 215);
217     color: white;
218 }