Date input values should not overlap with menu list dropdown button on iOS
[WebKit-https.git] / Source / WebCore / css / html.css
1 /*
2  * The default style sheet used to render HTML.
3  *
4  * Copyright (C) 2000 Lars Knoll (knoll@kde.org)
5  * Copyright (C) 2003-2011, 2014 Apple Inc. All rights reserved.
6  *
7  * This library is free software; you can redistribute it and/or
8  * modify it under the terms of the GNU Library General Public
9  * License as published by the Free Software Foundation; either
10  * version 2 of the License, or (at your option) any later version.
11  *
12  * This library is distributed in the hope that it will be useful,
13  * but WITHOUT ANY WARRANTY; without even the implied warranty of
14  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
15  * Library General Public License for more details.
16  *
17  * You should have received a copy of the GNU Library General Public License
18  * along with this library; see the file COPYING.LIB.  If not, write to
19  * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
20  * Boston, MA 02110-1301, USA.
21  *
22  */
23
24 @namespace "http://www.w3.org/1999/xhtml";
25
26 html {
27     display: block;
28 }
29
30 /* children of the <head> element all have display:none */
31 head, link, meta, script, style, title {
32     display: none;
33 }
34
35 /* generic block-level elements */
36
37 body {
38     display: block;
39     margin: 8px;
40 }
41
42 p {
43     display: block;
44     -webkit-margin-before: 1__qem;
45     -webkit-margin-after: 1__qem;
46     -webkit-margin-start: 0;
47     -webkit-margin-end: 0;
48 }
49
50 address, article, aside, div, footer, header, hgroup, layer, main, nav, section {
51     display: block;
52 }
53
54 marquee {
55     display: inline-block;
56     overflow: -webkit-marquee;
57 }
58
59 blockquote {
60     display: block;
61     -webkit-margin-before: 1__qem;
62     -webkit-margin-after: 1em;
63     -webkit-margin-start: 40px;
64     -webkit-margin-end: 40px;
65 }
66
67 figcaption {
68     display: block;
69 }
70
71 figure {
72     display: block;
73     -webkit-margin-before: 1em;
74     -webkit-margin-after: 1em;
75     -webkit-margin-start: 40px;
76     -webkit-margin-end: 40px;
77 }
78
79 q {
80     display: inline;
81 }
82
83 q::before {
84     content: open-quote;
85 }
86
87 q::after {
88     content: close-quote;
89 }
90
91 center {
92     display: block;
93     /* special centering to be able to emulate the html4/netscape behaviour */
94     text-align: -webkit-center;
95 }
96
97 hr {
98     display: block;
99     -webkit-margin-before: 0.5em;
100     -webkit-margin-after: 0.5em;
101     -webkit-margin-start: auto;
102     -webkit-margin-end: auto;
103     border-style: inset;
104     border-width: 1px;
105 }
106
107 video {
108     object-fit: contain;
109 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
110     -webkit-tap-highlight-color: transparent;
111 #endif
112 }
113
114 /* heading elements */
115
116 h1 {
117     display: block;
118     font-size: 2em;
119     -webkit-margin-before: 0.67__qem;
120     -webkit-margin-after: 0.67em;
121     -webkit-margin-start: 0;
122     -webkit-margin-end: 0;
123     font-weight: bold;
124 }
125
126 :matches(article, aside, nav, section) h1 {
127     font-size: 1.5em;
128     -webkit-margin-before: 0.83__qem;
129     -webkit-margin-after: 0.83em;
130 }
131
132 :matches(article, aside, nav, section) :matches(article, aside, nav, section) h1 {
133     font-size: 1.17em;
134     -webkit-margin-before: 1__qem;
135     -webkit-margin-after: 1em;
136 }
137
138 :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) h1 {
139     font-size: 1.00em;
140     -webkit-margin-before: 1.33__qem;
141     -webkit-margin-after: 1.33em;
142 }
143
144 :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) h1 {
145     font-size: .83em;
146     -webkit-margin-before: 1.67__qem;
147     -webkit-margin-after: 1.67em;
148 }
149
150 :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) :matches(article, aside, nav, section) h1 {
151     font-size: .67em;
152     -webkit-margin-before: 2.33__qem;
153     -webkit-margin-after: 2.33em;
154 }
155
156 h2 {
157     display: block;
158     font-size: 1.5em;
159     -webkit-margin-before: 0.83__qem;
160     -webkit-margin-after: 0.83em;
161     -webkit-margin-start: 0;
162     -webkit-margin-end: 0;
163     font-weight: bold;
164 }
165
166 h3 {
167     display: block;
168     font-size: 1.17em;
169     -webkit-margin-before: 1__qem;
170     -webkit-margin-after: 1em;
171     -webkit-margin-start: 0;
172     -webkit-margin-end: 0;
173     font-weight: bold;
174 }
175
176 h4 {
177     display: block;
178     -webkit-margin-before: 1.33__qem;
179     -webkit-margin-after: 1.33em;
180     -webkit-margin-start: 0;
181     -webkit-margin-end: 0;
182     font-weight: bold;
183 }
184
185 h5 {
186     display: block;
187     font-size: .83em;
188     -webkit-margin-before: 1.67__qem;
189     -webkit-margin-after: 1.67em;
190     -webkit-margin-start: 0;
191     -webkit-margin-end: 0;
192     font-weight: bold;
193 }
194
195 h6 {
196     display: block;
197     font-size: .67em;
198     -webkit-margin-before: 2.33__qem;
199     -webkit-margin-after: 2.33em;
200     -webkit-margin-start: 0;
201     -webkit-margin-end: 0;
202     font-weight: bold;
203 }
204
205 /* tables */
206
207 table {
208     display: table;
209     border-collapse: separate;
210     border-spacing: 2px;
211     border-color: gray;
212 }
213
214 thead {
215     display: table-header-group;
216     vertical-align: middle;
217     border-color: inherit;
218 }
219
220 tbody {
221     display: table-row-group;
222     vertical-align: middle;
223     border-color: inherit;
224 }
225
226 tfoot {
227     display: table-footer-group;
228     vertical-align: middle;
229     border-color: inherit;
230 }
231
232 /* for tables without table section elements (can happen with XHTML or dynamically created tables) */
233 table > tr {
234     vertical-align: middle;
235 }
236
237 col {
238     display: table-column;
239 }
240
241 colgroup {
242     display: table-column-group;
243 }
244
245 tr {
246     display: table-row;
247     vertical-align: inherit;
248     border-color: inherit;
249 }
250
251 td, th {
252     display: table-cell;
253     vertical-align: inherit;
254 }
255
256 th {
257     font-weight: bold;
258 }
259
260 caption {
261     display: table-caption;
262     text-align: -webkit-center;
263 }
264
265 /* lists */
266
267 ul, menu, dir {
268     display: block;
269     list-style-type: disc;
270     -webkit-margin-before: 1__qem;
271     -webkit-margin-after: 1em;
272     -webkit-margin-start: 0;
273     -webkit-margin-end: 0;
274     -webkit-padding-start: 40px;
275 }
276
277 ol {
278     display: block;
279     list-style-type: decimal;
280     -webkit-margin-before: 1__qem;
281     -webkit-margin-after: 1em;
282     -webkit-margin-start: 0;
283     -webkit-margin-end: 0;
284     -webkit-padding-start: 40px;
285 }
286
287 li {
288     display: list-item;
289     text-align: -webkit-match-parent;
290 }
291
292 ul ul, ol ul {
293     list-style-type: circle;
294 }
295
296 ol ol ul, ol ul ul, ul ol ul, ul ul ul {
297     list-style-type: square;
298 }
299
300 dd {
301     display: block;
302     -webkit-margin-start: 40px;
303 }
304
305 dl {
306     display: block;
307     -webkit-margin-before: 1__qem;
308     -webkit-margin-after: 1em;
309     -webkit-margin-start: 0;
310     -webkit-margin-end: 0;
311 }
312
313 dt {
314     display: block;
315 }
316
317 ol ul, ul ol, ul ul, ol ol {
318     -webkit-margin-before: 0;
319     -webkit-margin-after: 0;
320 }
321
322 /* form elements */
323
324 form {
325     display: block;
326     margin-top: 0__qem;
327 }
328
329 label {
330     cursor: default;
331 }
332
333 legend {
334     display: block;
335     -webkit-padding-start: 2px;
336     -webkit-padding-end: 2px;
337     border: none;
338 }
339
340 fieldset {
341     display: block;
342     -webkit-margin-start: 2px;
343     -webkit-margin-end: 2px;
344     -webkit-padding-before: 0.35em;
345     -webkit-padding-start: 0.75em;
346     -webkit-padding-end: 0.75em;
347     -webkit-padding-after: 0.625em;
348     border: 2px groove ThreeDFace;
349     min-width: -webkit-min-content;
350 }
351
352 button {
353     -webkit-appearance: button;
354 }
355
356 /* Form controls don't go vertical. */
357 input, textarea, keygen, select, button, isindex, meter, progress {
358     -webkit-writing-mode: horizontal-tb !important;
359 }
360
361 input, textarea, keygen, select, button, isindex {
362     margin: 0__qem;
363 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
364     font: -webkit-small-control;
365 #endif
366     color: initial;
367     letter-spacing: normal;
368     word-spacing: normal;
369     line-height: normal;
370     text-transform: none;
371     text-indent: 0;
372     text-shadow: none;
373     display: inline-block;
374     text-align: start;
375 }
376
377 input[type="hidden"] {
378     display: none;
379 }
380
381 input,
382 input:matches([type="password"], [type="search"]),
383 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
384 textarea,
385 input[type="range"],
386 #endif
387 isindex {
388     -webkit-appearance: textfield;
389     background-color: white;
390 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
391     border-radius: 5px;
392     font: 11px Helvetica, -webkit-pictograph;
393     border: 1px solid #4c4c4c;
394     padding: 0.2em 0.5em 0.3em 0.5em;
395 #else
396     border: 2px inset;
397     padding: 1px;
398 #endif
399     -webkit-rtl-ordering: logical;
400     -webkit-user-select: text;
401     cursor: auto;
402 }
403
404 input[type="search"] {
405     -webkit-appearance: searchfield;
406     box-sizing: border-box;
407 }
408
409 input::-webkit-textfield-decoration-container {
410     display: flex;
411     align-items: center;
412     content: none !important;
413 }
414
415 input[type="search"]::-webkit-textfield-decoration-container {
416     direction: ltr;
417 }
418
419 input::-webkit-clear-button {
420     -webkit-appearance: searchfield-cancel-button;
421     display: inline-block;
422     flex: none;
423     margin-left: 2px;
424 }
425
426 input[type="search"]::-webkit-search-cancel-button {
427     -webkit-appearance: searchfield-cancel-button;
428     display: block;
429     flex: none;
430     align-self: flex-start;
431     margin: auto 0;
432 }
433
434 input[type="search"]::-webkit-search-decoration {
435     -webkit-appearance: searchfield-decoration;
436     display: block;
437     flex: none;
438     align-self: flex-start;
439     margin: auto 0;
440 }
441
442 input[type="search"]::-webkit-search-results-decoration {
443     -webkit-appearance: searchfield-results-decoration;
444     display: block;
445     flex: none;
446     align-self: flex-start;
447     margin: auto 0;
448 }
449
450 input[type="search"]::-webkit-search-results-button {
451     -webkit-appearance: searchfield-results-button;
452     display: block;
453     flex: none;
454 }
455
456 #if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
457 datalist {
458     display: none;
459 }
460 #endif
461
462 #if defined(ENABLE_INPUT_TYPE_DATE) && ENABLE_INPUT_TYPE_DATE
463 input[type="date"] {
464     align-items: center;
465     -webkit-appearance: menulist-button;
466     display: -webkit-inline-flex;
467     overflow: hidden;
468 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
469     width: 10em;
470 #endif
471 }
472 #endif
473 #if defined(ENABLE_INPUT_TYPE_DATETIME_INCOMPLETE) && ENABLE_INPUT_TYPE_DATETIME_INCOMPLETE
474 input[type="datetime"] {
475     align-items: center;
476     -webkit-appearance: menulist-button;
477     display: -webkit-inline-flex;
478     overflow: hidden;
479 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
480     width: 10em;
481 #endif
482 }
483 #endif
484 #if defined(ENABLE_INPUT_TYPE_DATETIMELOCAL) && ENABLE_INPUT_TYPE_DATETIMELOCAL
485 input[type="datetime-local"] {
486     align-items: center;
487     -webkit-appearance: menulist-button;
488     display: -webkit-inline-flex;
489     overflow: hidden;
490 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
491     width: 10em;
492 #endif
493 }
494 #endif
495 #if defined(ENABLE_INPUT_TYPE_MONTH) && ENABLE_INPUT_TYPE_MONTH
496 input[type="month"] {
497     align-items: center;
498     -webkit-appearance: menulist-button;
499     display: -webkit-inline-flex;
500     overflow: hidden;
501 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
502     width: 10em;
503 #endif
504 }
505 #endif
506 #if defined(ENABLE_INPUT_TYPE_TIME) && ENABLE_INPUT_TYPE_TIME
507 input[type="time"] {
508     align-items: center;
509     -webkit-appearance: menulist-button;
510     display: -webkit-inline-flex;
511     overflow: hidden;
512 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
513     width: 10em;
514 #endif
515 }
516 #endif
517 #if defined(ENABLE_INPUT_TYPE_WEEK) && ENABLE_INPUT_TYPE_WEEK
518 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
519 input[type="week"] {
520     align-items: center;
521     -webkit-appearance: menulist-button;
522     display: -webkit-inline-flex;
523     overflow: hidden;
524     width: 10em;
525 }
526 #endif
527 #endif
528
529 input::-webkit-date-and-time-value {
530 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
531     margin-right: 18px;
532 #else
533     margin: 1px 24px 1px 4px;
534     white-space: pre;
535 #endif
536 }
537
538 input::-webkit-inner-spin-button {
539     -webkit-appearance: inner-spin-button;
540     display: block;
541     position: relative;
542     cursor: default;
543     /* This height property is ignored for input type "number" and others which
544      * use RenderTextControlSingleLine as renderer which sets height of spin
545      * button in layout(). */
546     height: 1.5em;
547     vertical-align: top;
548     flex: none;
549     -webkit-user-select: none;
550 }
551
552 input::-webkit-auto-fill-button {
553     -webkit-mask-image: -webkit-image-set(url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAMCAYAAAC9QufkAAAAAXNSR0IB2cksfwAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAADyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE1LTA0LTAzVDE2OjA2OjI1PC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8eG1wOkNyZWF0ZURhdGU+MjAxNS0wNC0wM1QxNjowMzoxNjwveG1wOkNyZWF0ZURhdGU+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4xNTwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4xMjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoz37ZdAAAA5ElEQVQoFY2RsQ5BQRBFd9EgEYXv8QlaEqVGpfUPao3oKXyEQiJI1ERESaGmwnPu2k2QJ2uS82Z2du7s7jyTJInBWnCABeygoXwM6kwN1GELFo7wgOo/4gmFEovzWzyMiTMUlyFYJQT4wlucGko8T90xZv0j/5EusVpCuLr8FPK6NraHPmT8Oks8gI2bKEEOZhAauEJf3PX5Eb4ImpEG2gni0NWJvwdFYRvuoIHeoOUa++56+wpSxb6myf4J6qG5VWCt1ckPvHsksf531HSiDJ1VV9n15eJfJ+YkvWcMF+jFZa+KJ554xIc+jempAAAAAElFTkSuQmCC") 1x, url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYCAYAAADtaU2/AAAAAXNSR0IB2cksfwAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAADyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE1LTA0LTAzVDE2OjA2OjIxPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8eG1wOkNyZWF0ZURhdGU+MjAxNS0wNC0wM1QxNjowMzoyNTwveG1wOkNyZWF0ZURhdGU+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyPC90aWZmOllSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4zMDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj4yNDwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgpGMDB3AAAB8UlEQVRIDbVWO07DQBS0QSJUNJQcAloOQMEZ6InSUMEBkFJEQihQkQKJklQUlFBQQoH4SHAKJDokAgIz4+wLs5u15RjypOF9dvaN197dkCS/NodwC7gG3hxuXI1jUcuyLKkDa7aE4B7IHM7hCcs5Rs6Y1RHlHBpXo6JXeXX45xLOxB8QN2QsD+sKz2B2E1iRhqnEsxIvI96U/M8hv6mtyjxXehGpk+tZ3RVzdQOgcPN4KkPuvNbse2mtSsxXPYl9TkIu41L4rowQjD0Fee2UwqcTzA65/TRNB0CzSg/ygHegT34D4FGxjVXkHx0XbmQfiIzfKtto4LWEy3m58XLQs2zNzPPByAltGwXj0EfFUecbUd4O8pFxZ98CSrC4bNfvypxvxBu6cubAl3DaRSfBxNRjXtxckw5GjU+RXJweUNGOPRTqnrWRWQP1HkkTaRSK98CLioYr5vV4BqigxarlxSbsmu0XzO8qLxRmw/WCiRyLmjYEgTfhEWAPTM88VV4ozDP9HEyyBijHLdKQ4l2AR+YAGBMNhcFJVgETU8+xqIXCVXNtxm9cdJyU58VVhUKe/khwB+55XaeYqDC/zdoUtbzWFDPj7fQCLFjB+Vf4xaA2SvkK65iumLvwJNLkOFL79xJXfQhwlQTjsnu61r+2fEs/b4ZbzrEPMzEAAAAASUVORK5CYII=") 2x);
554     -webkit-mask-size: 15px 12px;
555     width: 15px;
556     height: 12px;
557     margin-left: 3px;
558     margin-right: 2px;
559     background-color: black;
560     flex: none;
561     -webkit-user-select: none;
562 }
563
564 input::-webkit-auto-fill-button:hover {
565     background-color: rgb(0, 122, 255);
566 }
567
568 input::-webkit-auto-fill-button:active {
569     background-color: rgb(0, 60, 219);
570 }
571
572 input::-webkit-caps-lock-indicator {
573     -webkit-appearance: caps-lock-indicator;
574     content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17"><path fill="black" fill-opacity="0.4" d="M12.5 0.5A 4 4 0 0 1 16.5 4.5L 16.5 12.5A 4 4 0 0 1 12.5 16.5L 4.5 16.5A 4 4 0 0 1 0.5 12.5L 0.5 4.5A 4 4 0 0 1 4.5 0.5L 12.5 0.5M 8.5 2L 4 7L 6.25 7L 6.25 10.25L 10.75 10.25L 10.75 7L 13 7L 8.5 2M 10.75 12L 6.25 12L 6.25 14.25L 10.75 14.25L 10.75 12"/></svg>');
575     align-self: stretch;
576     flex: none;
577     -webkit-user-select: none;
578 }
579
580 keygen, select {
581     border-radius: 5px;
582 }
583
584 keygen::-webkit-keygen-select {
585     margin: 0px;
586 }
587
588 textarea {
589     -webkit-appearance: textarea;
590 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
591     background-color: white;
592     border: 1px solid;
593     -webkit-rtl-ordering: logical;
594     -webkit-user-select: text;
595 #else
596     -webkit-nbsp-mode: space;
597     -webkit-line-break: after-white-space;
598 #endif
599     flex-direction: column;
600     resize: auto;
601     cursor: auto;
602     padding: 2px;
603     white-space: pre-wrap;
604     word-wrap: break-word;
605 }
606
607 ::-webkit-input-placeholder {
608     -webkit-text-security: none;
609     color: darkGray;
610     pointer-events: none !important;
611 }
612
613 input::-webkit-input-placeholder, isindex::-webkit-input-placeholder {
614     white-space: pre;
615     word-wrap: normal;
616     overflow: hidden;
617 }
618
619 input[type="password"] {
620     -webkit-text-security: disc !important;
621 }
622
623 input:matches([type="hidden"], [type="image"], [type="file"]) {
624     -webkit-appearance: initial;
625     padding: initial;
626     background-color: initial;
627     border: initial;
628 }
629
630 input[type="file"] {
631     align-items: baseline;
632     color: inherit;
633     text-align: start !important;
634 }
635
636 input:-webkit-autofill {
637 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
638     background-color: #F7EC87 !important;
639 #else
640     background-color: #FAFFBD !important;
641 #endif
642     background-image: none !important;
643     color: #000000 !important;
644 }
645
646 input:matches([type="radio"], [type="checkbox"]) {
647     margin: 3px 2px;
648 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
649     border: 1px solid #4c4c4c;
650     box-sizing: border-box;
651 #else
652     padding: initial;
653     background-color: initial;
654     border: initial;
655 #endif
656 }
657
658 input:matches([type="button"], [type="submit"], [type="reset"]) {
659     -webkit-appearance: push-button;
660     white-space: pre;
661 }
662
663 input[type="file"]::-webkit-file-upload-button {
664     -webkit-appearance: push-button;
665     white-space: nowrap;
666     margin: 0;
667     font-size: inherit;
668 }
669
670 input:matches([type="button"], [type="submit"], [type="reset"]), input[type="file"]::-webkit-file-upload-button, button {
671     align-items: flex-start;
672     text-align: center;
673     cursor: default;
674     color: ButtonText;
675 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
676     padding: 2px 6px 3px 6px;
677     border: 2px outset ButtonFace;
678     background-color: ButtonFace;
679 #else
680     padding: 0 1.0em;
681     border: 1px solid #4c4c4c;
682     /* We want to be as close to background-color:transparent as possible without actually being transparent. */
683     background-color: rgba(255, 255, 255, 0.01);
684     font: 11px Helvetica;
685 #endif
686     box-sizing: border-box;
687 }
688
689 input:matches([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]::-webkit-file-upload-button:active, button:active {
690     color: ActiveButtonText;
691 }
692
693 input[type="range"] {
694     -webkit-appearance: slider-horizontal;
695     padding: initial;
696     border: initial;
697     margin: 2px;
698     color: #909090;
699 }
700
701 input[type="range"]::-webkit-slider-container, input[type="range"]::-webkit-media-slider-container {
702     flex: 1;
703     box-sizing: border-box;
704     display: flex;
705     align-contents: center;
706 }
707
708 input[type="range"]::-webkit-slider-runnable-track {
709     flex: 1;
710     align-self: center;
711
712     box-sizing: border-box;
713     display: block;
714 }
715
716 input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-media-slider-thumb {
717     -webkit-appearance: sliderthumb-horizontal;
718     box-sizing: border-box;
719     display: block;
720 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
721     background-color: white;
722     border: 1px solid rgb(66, 66, 66);
723     padding: 0px;
724 #endif
725 }
726
727 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
728 input[type="range"]::-webkit-slider-thumb:active {
729     background-color: black;
730 }
731
732 input:disabled, textarea:disabled {
733     opacity: 0.4;
734 }
735
736 input[readonly], textarea[readonly] {
737     border-color: rgb(188, 188, 188);
738 }
739
740 textarea::-webkit-input-placeholder {
741     text-indent: 2px;
742 }
743 #endif
744
745 input:matches([type="button"], [type="submit"], [type="reset"]):disabled,
746 input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
747 select:disabled, keygen:disabled, optgroup:disabled, option:disabled,
748 select[disabled]>option {
749     color: GrayText;
750 }
751
752 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
753 input:matches([type="button"], [type="submit"], [type="reset"]):active, input[type="file"]:active::-webkit-file-upload-button, button:active {
754     border-style: inset;
755 }
756
757 input:matches([type="button"], [type="submit"], [type="reset"]):active:disabled,
758 input[type="file"]:active:disabled::-webkit-file-upload-button, button:active:disabled {
759     border-style: outset;
760 }
761 #endif
762
763 area, param {
764     display: none;
765 }
766
767 input[type="checkbox"] {
768     -webkit-appearance: checkbox;
769 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
770     box-sizing: border-box;
771 #else
772     border-radius: 5px;
773     width: 16px;
774     height: 16px;
775     padding: 0px;
776     /* We want to be as close to background:transparent as possible without actually being transparent */
777     background-color: rgba(255, 255, 255, 0.01);
778 #endif
779 }
780
781 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
782 input[type="radio"] {
783     -webkit-appearance: radio;
784     border-radius: 8px;
785     width: 16px;
786     height: 16px;
787     padding: 0px;
788     /* We want to be as close to background:transparent as possible without actually being transparent */
789     background-color: rgba(255, 255, 255, 0.01);
790 }
791
792 input:matches([type="checkbox"], [type="radio"]):checked {
793     background: rgba(0, 0, 0, 0.8);
794     border-color: rgba(255, 255, 255, 0.0);
795 }
796
797 input:matches([type="checkbox"], [type="radio"]):checked:disabled {
798     opacity: 0.4;
799     background: rgba(0, 0, 0, 0.8);
800 }
801 #endif
802
803 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
804 input[type="radio"] {
805     -webkit-appearance: radio;
806     box-sizing: border-box;
807 }
808 #endif
809
810 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
811 select:focus {
812     border-color: rgb(17, 46, 135);
813 }
814 #endif
815
816 #if defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
817
818 input[type="color"] {
819     -webkit-appearance: square-button;
820     width: 44px;
821     height: 23px;
822 }
823
824 input[type="color"]::-webkit-color-swatch-wrapper {
825     display: flex;
826     padding: 4px 2px;
827     box-sizing: border-box;
828     width: 100%;
829     height: 100%;
830 }
831
832 input[type="color"]::-webkit-color-swatch {
833     background-color: #000000;
834     border: 1px solid #777777;
835     flex: 1;
836 }
837
838 #if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
839
840 input[type="color"][list] {
841     -webkit-appearance: menulist;
842     width: 88px;
843     height: 23px;
844 }
845
846 input[type="color"][list]::-webkit-color-swatch-wrapper {
847     padding-left: 8px;
848     padding-right: 24px;
849 }
850
851 input[type="color"][list]::-webkit-color-swatch {
852     border-color: #000000;
853 }
854
855 #endif // defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
856
857 #endif // defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
858
859 select {
860     box-sizing: border-box;
861 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
862     -webkit-appearance: menulist-button;
863     letter-spacing: normal;
864     word-spacing: normal;
865     line-height: normal;
866     border: 1px solid #4c4c4c;
867     /* We want to be as close to background:transparent as possible without actually being transparent */
868     background-color: rgba(255, 255, 255, 0.01);
869     font: 11px Helvetica;
870     padding: 0 0.4em 0 0.4em;
871 #else
872     -webkit-appearance: menulist;
873     border: 1px solid;
874     color: black;
875     background-color: white;
876 #endif
877     align-items: center;
878     white-space: pre;
879     -webkit-rtl-ordering: logical;
880     cursor: default;
881 }
882
883 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
884 select:matches([size], [multiple], [size][multiple]) {
885     -webkit-appearance: listbox;
886     align-items: flex-start;
887     border: 1px inset gray;
888     border-radius: initial;
889     white-space: initial;
890 }
891
892 select:matches([size="0"], [size="1"]) {
893     -webkit-appearance: menulist;
894     align-items: center;
895     border: 1px solid;
896     border-radius: 5px;
897     white-space: pre;
898 }
899 #endif
900
901 optgroup {
902     font-weight: bolder;
903 }
904
905 option {
906     font-weight: normal;
907 }
908
909 output {
910     display: inline;
911 }
912
913 /* form validation message bubble */
914
915 ::-webkit-validation-bubble {
916     display: inline-block;
917     z-index: 2147483647;
918     position: absolute;
919     opacity: 0.95;
920     line-height: 0;
921     margin: 0;
922     -webkit-text-security: none;
923     transition: opacity 05.5s ease;
924 }
925
926 ::-webkit-validation-bubble-message {
927     display: flex;
928     position: relative;
929     top: -4px;
930     font: message-box;
931     color: black;
932     min-width: 50px;
933     max-width: 200px;
934     border: solid 2px #400;
935     background: -webkit-gradient(linear, left top, left bottom, from(#f8ecec), to(#e8cccc));
936     padding: 8px;
937     border-radius: 8px;
938     -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.6),
939         inset -2px -2px 1px #d0c4c4,
940         inset 2px 2px 1px white;
941     line-height: normal;
942     white-space: normal;
943     z-index: 2147483644;
944 }
945
946 ::-webkit-validation-bubble-text-block {
947     flex: 1;
948 }
949
950 ::-webkit-validation-bubble-heading {
951     font-weight: bold;
952 }
953
954 ::-webkit-validation-bubble-arrow {
955     display: inline-block;
956     position: relative;
957     left: 32px;
958     width: 16px;
959     height: 16px;
960     background-color: #f8ecec;
961     border-width: 2px 0 0 2px;
962     border-style: solid;
963     border-color: #400;
964     box-shadow: inset 2px 2px 1px white;
965     -webkit-transform-origin: 0 0;
966     transform: rotate(45deg);
967     z-index: 2147483645;
968 }
969
970 ::-webkit-validation-bubble-arrow-clipper {
971     display: block;
972     overflow: hidden;
973     height: 16px;
974 }
975
976 #if defined(ENABLE_METER_ELEMENT) && ENABLE_METER_ELEMENT
977 /* meter */
978
979 meter {
980     -webkit-appearance: meter;
981     box-sizing: border-box;
982     display: inline-block;
983     height: 1em;
984     width: 5em;
985     vertical-align: -0.2em;
986 }
987
988 meter::-webkit-meter-inner-element {
989     -webkit-appearance: inherit;
990     box-sizing: inherit;
991     height: 100%;
992     width: 100%;
993 }
994
995 meter::-webkit-meter-bar {
996     background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc));
997     height: 100%;
998     width: 100%;
999     box-sizing: border-box;
1000 }
1001
1002 meter::-webkit-meter-optimum-value {
1003     background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
1004     height: 100%;
1005     box-sizing: border-box;
1006 }
1007
1008 meter::-webkit-meter-suboptimum-value {
1009     background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
1010     height: 100%;
1011     box-sizing: border-box;
1012 }
1013
1014 meter::-webkit-meter-even-less-good-value {
1015     background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44));
1016     height: 100%;
1017     box-sizing: border-box;
1018 }
1019 #endif
1020
1021 /* progress */
1022
1023 progress {
1024     -webkit-appearance: progress-bar;
1025     box-sizing: border-box;
1026     display: inline-block;
1027     height: 1em;
1028     width: 10em;
1029     vertical-align: -0.2em;
1030 }
1031
1032 progress::-webkit-progress-inner-element {
1033     -webkit-appearance: inherit;
1034     box-sizing: inherit;
1035     height: 100%;
1036     width: 100%;
1037 }
1038
1039 progress::-webkit-progress-bar {
1040     background-color: gray;
1041     height: 100%;
1042     width: 100%;
1043     box-sizing: border-box;
1044 }
1045
1046 progress::-webkit-progress-value {
1047     background-color: green;
1048     height: 100%;
1049     width: 50%; /* should be removed later */
1050     box-sizing: border-box;
1051 }
1052
1053 /* inline elements */
1054
1055 u, ins {
1056     text-decoration: underline;
1057 }
1058
1059 strong, b {
1060     font-weight: bold;
1061 }
1062
1063 i, cite, em, var, address, dfn {
1064     font-style: italic;
1065 }
1066
1067 tt, code, kbd, samp {
1068     font-family: monospace;
1069 }
1070
1071 pre, xmp, plaintext, listing {
1072     display: block;
1073     font-family: monospace;
1074     white-space: pre;
1075     margin: 1__qem 0;
1076 }
1077
1078 mark {
1079     background-color: yellow;
1080     color: black;
1081 }
1082
1083 big {
1084     font-size: larger;
1085 }
1086
1087 small {
1088     font-size: smaller;
1089 }
1090
1091 s, strike, del {
1092     text-decoration: line-through;
1093 }
1094
1095 sub {
1096     vertical-align: sub;
1097     font-size: smaller;
1098 }
1099
1100 sup {
1101     vertical-align: super;
1102     font-size: smaller;
1103 }
1104
1105 nobr {
1106     white-space: nowrap;
1107 }
1108
1109 /* states */
1110
1111 :focus {
1112     outline: auto;
1113 }
1114
1115 /* Read-only text fields do not show a focus ring but do still receive focus */
1116 html:focus, body:focus, input[readonly]:focus, applet:focus, embed:focus, iframe:focus, object:focus {
1117     outline: none;
1118 }
1119
1120 input:matches([type="button"], [type="checkbox"], [type="file"], [type="hidden"], [type="image"], [type="radio"], [type="reset"], [type="search"], [type="submit"]):focus,
1121 input[type="file"]:focus::-webkit-file-upload-button {
1122     outline-offset: 0;
1123 }
1124
1125 a:any-link {
1126     color: -webkit-link;
1127     text-decoration: underline;
1128     cursor: auto;
1129 }
1130
1131 a:any-link:active {
1132     color: -webkit-activelink;
1133 }
1134
1135 /* HTML5 ruby elements */
1136
1137 ruby, rt {
1138     text-indent: 0; /* blocks used for ruby rendering should not trigger this */
1139 }
1140
1141 rt {
1142     line-height: normal;
1143     -webkit-text-emphasis: none;
1144 }
1145
1146 ruby > rt {
1147     display: block;
1148     font-size: -webkit-ruby-text;
1149     text-align: start;
1150 }
1151
1152 ruby > rp {
1153     display: none;
1154 }
1155
1156 /* other elements */
1157
1158 noframes {
1159     display: none;
1160 }
1161
1162 frameset, frame {
1163     display: block;
1164 }
1165
1166 frameset {
1167     border-color: inherit;
1168 }
1169
1170 iframe {
1171     border: 2px inset;
1172 }
1173
1174 details {
1175     display: block;
1176 }
1177
1178 summary {
1179     display: block;
1180 }
1181
1182 summary::-webkit-details-marker {
1183     display: inline-block;
1184     width: 0.66em;
1185     height: 0.66em;
1186     margin-right: 0.4em;
1187 }
1188
1189 #if defined(ENABLE_TEMPLATE_ELEMENT) && ENABLE_TEMPLATE_ELEMENT
1190 template {
1191     display: none;
1192 }
1193 #endif
1194
1195 bdi, output {
1196     unicode-bidi: -webkit-isolate;
1197 }
1198
1199 bdo {
1200     unicode-bidi: bidi-override;
1201 }
1202
1203 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
1204 applet, embed, object, img {
1205     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1206 }
1207 :any-link img {
1208     -webkit-tap-highlight-color: inherit;
1209 }
1210 #endif
1211
1212 #if defined(ENABLE_ATTACHMENT_ELEMENT) && ENABLE_ATTACHMENT_ELEMENT
1213 attachment {
1214     -webkit-appearance: attachment;
1215 }
1216 #endif
1217
1218 /* page */
1219
1220 @page {
1221     /* FIXME: Define the right default values for page properties. */
1222     size: auto;
1223     margin: auto;
1224     padding: 0px;
1225     border-width: 0px;
1226 }
1227
1228 /* noscript is handled internally, as it depends on settings. */
1229