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