2c3d0b995443f4b3602db3d7dddfe7781dcbd520
[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, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 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 {
411     line-height: normal !important;
412 }
413
414 input[type="hidden"] {
415     display: none
416 }
417
418 input,
419 input[type="password"],
420 input[type="search"],
421 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
422 textarea,
423 input[type="range"],
424 #endif
425 isindex {
426     -webkit-appearance: textfield;
427     background-color: white;
428 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
429     border-radius: 5px;
430     font: 11px Helvetica, -webkit-pictograph;
431     border: 1px solid #4c4c4c;
432     padding: 0.2em 0.5em 0.3em 0.5em;
433 #else
434     border: 2px inset;
435     padding: 1px;
436 #endif
437     -webkit-rtl-ordering: logical;
438     -webkit-user-select: text;
439     cursor: auto;
440 }
441
442 input[type="search"] {
443     -webkit-appearance: searchfield;
444     box-sizing: border-box;
445 }
446
447 input::-webkit-textfield-decoration-container {
448     display: -webkit-flex;
449     -webkit-align-items: center;
450     content: none !important;
451 }
452
453 input[type="search"]::-webkit-textfield-decoration-container {
454     direction: ltr;
455 }
456
457 input::-webkit-clear-button {
458     -webkit-appearance: searchfield-cancel-button;
459     display: inline-block;
460     -webkit-flex: none;
461     margin-left: 2px;
462 }
463
464 input[type="search"]::-webkit-search-cancel-button {
465     -webkit-appearance: searchfield-cancel-button;
466     display: block;
467     -webkit-flex: none;
468     -webkit-align-self: flex-start;
469     margin: auto 0;
470 }
471
472 input[type="search"]::-webkit-search-decoration {
473     -webkit-appearance: searchfield-decoration;
474     display: block;
475     -webkit-flex: none;
476     -webkit-align-self: flex-start;
477     margin: auto 0;
478 }
479
480 input[type="search"]::-webkit-search-results-decoration {
481     -webkit-appearance: searchfield-results-decoration;
482     display: block;
483     -webkit-flex: none;
484     -webkit-align-self: flex-start;
485     margin: auto 0;
486 }
487
488 input[type="search"]::-webkit-search-results-button {
489     -webkit-appearance: searchfield-results-button;
490     display: block;
491     -webkit-flex: none;
492 }
493
494 #if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
495 datalist {
496     display: none;
497 }
498 #endif
499
500 #if defined(ENABLE_INPUT_TYPE_DATE) && ENABLE_INPUT_TYPE_DATE
501 input[type="date"] {
502     -webkit-align-items: center;
503     -webkit-appearance: menulist-button;
504     display: -webkit-inline-flex;
505     overflow: hidden;
506 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
507     width: 10em;
508 #endif
509 }
510 #endif
511 #if defined(ENABLE_INPUT_TYPE_DATETIME_INCOMPLETE) && ENABLE_INPUT_TYPE_DATETIME_INCOMPLETE
512 input[type="datetime"] {
513     -webkit-align-items: center;
514     -webkit-appearance: menulist-button;
515     display: -webkit-inline-flex;
516     overflow: hidden;
517 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
518     width: 10em;
519 #endif
520 }
521 #endif
522 #if defined(ENABLE_INPUT_TYPE_DATETIMELOCAL) && ENABLE_INPUT_TYPE_DATETIMELOCAL
523 input[type="datetime-local"] {
524     -webkit-align-items: center;
525     -webkit-appearance: menulist-button;
526     display: -webkit-inline-flex;
527     overflow: hidden;
528 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
529     width: 10em;
530 #endif
531 }
532 #endif
533 #if defined(ENABLE_INPUT_TYPE_MONTH) && ENABLE_INPUT_TYPE_MONTH
534 input[type="month"] {
535     -webkit-align-items: center;
536     -webkit-appearance: menulist-button;
537     display: -webkit-inline-flex;
538     overflow: hidden;
539 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
540     width: 10em;
541 #endif
542 }
543 #endif
544 #if defined(ENABLE_INPUT_TYPE_TIME) && ENABLE_INPUT_TYPE_TIME
545 input[type="time"] {
546     -webkit-align-items: center;
547     -webkit-appearance: menulist-button;
548     display: -webkit-inline-flex;
549     overflow: hidden;
550 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
551     width: 10em;
552 #endif
553 }
554 #endif
555 #if defined(ENABLE_INPUT_TYPE_WEEK) && ENABLE_INPUT_TYPE_WEEK
556 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
557 input[type="week"] {
558     -webkit-align-items: center;
559     -webkit-appearance: menulist-button;
560     display: -webkit-inline-flex;
561     overflow: hidden;
562     width: 10em;
563 }
564 #endif
565 #endif
566
567 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
568 input::-webkit-date-and-time-value {
569     margin: 1px 24px 1px 4px;
570     white-space: pre;
571 }
572 #endif
573
574 input::-webkit-inner-spin-button {
575     -webkit-appearance: inner-spin-button;
576     display: block;
577     position: relative;
578     cursor: default;
579     /* This height property is ignored for input type "number" and others which
580      * use RenderTextControlSingleLine as renderer which sets height of spin
581      * button in layout(). */
582     height: 1.5em;
583     vertical-align: top;
584     -webkit-flex: none;
585     -webkit-user-select: none;
586 }
587
588 #if defined(ENABLE_INPUT_SPEECH) && ENABLE_INPUT_SPEECH
589 input::-webkit-input-speech-button {
590     -webkit-appearance: -webkit-input-speech-button;
591     display: block;
592     vertical-align: top;
593     -webkit-flex: none;
594     -webkit-align-self: flex-start;
595     margin: auto 0;
596 }
597 #endif
598
599 keygen, select {
600     border-radius: 5px;
601 }
602
603 keygen::-webkit-keygen-select {
604     margin: 0px;
605 }
606
607 textarea {
608     -webkit-appearance: textarea;
609 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
610     background-color: white;
611     border: 1px solid;
612     -webkit-rtl-ordering: logical;
613     -webkit-user-select: text;
614 #else
615     -webkit-nbsp-mode: space;
616     -webkit-line-break: after-white-space;
617 #endif
618     -webkit-flex-direction: column;
619     resize: auto;
620     cursor: auto;
621     padding: 2px;
622     white-space: pre-wrap;
623     word-wrap: break-word;
624 }
625
626 ::-webkit-input-placeholder {
627     -webkit-text-security: none;
628     color: darkGray;
629     display: block !important;
630     pointer-events: none !important;
631 }
632
633 input::-webkit-input-placeholder, isindex::-webkit-input-placeholder {
634     white-space: pre;
635     word-wrap: normal;
636     overflow: hidden;
637 }
638
639 input[type="password"] {
640     -webkit-text-security: disc !important;
641 }
642
643 input[type="hidden"], input[type="image"], input[type="file"] {
644     -webkit-appearance: initial;
645     padding: initial;
646     background-color: initial;
647     border: initial;
648 }
649
650 input[type="file"] {
651     -webkit-align-items: baseline;
652     color: inherit;
653     text-align: start !important;
654 }
655
656 input:-webkit-autofill {
657 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
658     background-color: #F7EC87 !important;
659 #else
660     background-color: #FAFFBD !important;
661 #endif
662     background-image:none !important;
663     color: #000000 !important;
664 }
665
666 input[type="radio"], input[type="checkbox"] {
667     margin: 3px 2px;
668 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
669     border: 1px solid #4c4c4c;
670     box-sizing: border-box;
671 #else
672     padding: initial;
673     background-color: initial;
674     border: initial;
675 #endif
676 }
677
678 input[type="button"], input[type="submit"], input[type="reset"] {
679     -webkit-appearance: push-button;
680     white-space: pre
681 }
682
683 input[type="file"]::-webkit-file-upload-button {
684     -webkit-appearance: push-button;
685     white-space: nowrap;
686     margin: 0;
687     font-size: inherit;
688 }
689
690 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
691     -webkit-align-items: flex-start;
692     text-align: center;
693     cursor: default;
694     color: ButtonText;
695 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
696     padding: 2px 6px 3px 6px;
697     border: 2px outset ButtonFace;
698     background-color: ButtonFace;
699 #else
700     padding: 0 1.0em;
701     border: 1px solid #4c4c4c;
702     /* We want to be as close to background-color:transparent as possible without actually being transparent. */
703     background-color: rgba(255, 255, 255, 0.01);
704     font: 11px Helvetica;
705 #endif
706     box-sizing: border-box
707 }
708
709 input[type="range"] {
710     -webkit-appearance: slider-horizontal;
711     padding: initial;
712     border: initial;
713     margin: 2px;
714     color: #909090;
715 }
716
717 input[type="range"]::-webkit-slider-container, input[type="range"]::-webkit-media-slider-container {
718     -webkit-flex: 1;
719     box-sizing: border-box;
720     display: -webkit-flex;
721     -webkit-align-contents: center;
722 }
723
724 input[type="range"]::-webkit-slider-runnable-track {
725     -webkit-flex: 1;
726     -webkit-align-self: center;
727
728     box-sizing: border-box;
729     display: block;
730 }
731
732 input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-media-slider-thumb {
733     -webkit-appearance: sliderthumb-horizontal;
734     box-sizing: border-box;
735     display: block;
736 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
737     background-color: white;
738     border: 1px solid rgb(66, 66, 66);
739     padding: 0px;
740 #endif
741 }
742
743 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
744 input[type="range"]::-webkit-slider-thumb:active {
745     background-color: black;
746 }
747
748 input:disabled, textarea:disabled {
749     opacity: 0.4;
750 }
751
752 input[readonly], textarea[readonly] {
753     border-color: rgb(188, 188, 188);
754 }
755
756 textarea::-webkit-input-placeholder {
757     text-indent: 2px;
758 }
759 #endif
760
761 input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled,
762 input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
763 select:disabled, keygen:disabled, optgroup:disabled, option:disabled,
764 select[disabled]>option {
765     color: GrayText
766 }
767
768 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
769 input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active {
770     border-style: inset
771 }
772
773 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 {
774     border-style: outset
775 }
776 #endif
777
778 area, param {
779     display: none
780 }
781
782 input[type="checkbox"] {
783     -webkit-appearance: checkbox;
784 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
785     box-sizing: border-box;
786 #else
787     border-radius: 5px;
788     width: 16px;
789     height: 16px;
790     padding: 0px;
791     /* We want to be as close to background:transparent as possible without actually being transparent */
792     background-color: rgba(255, 255, 255, 0.01);
793 #endif
794 }
795
796 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
797 input[type="radio"] {
798     -webkit-appearance: radio;
799     border-radius: 8px;
800     width: 16px;
801     height: 16px;
802     padding: 0px;
803     /* We want to be as close to background:transparent as possible without actually being transparent */
804     background-color: rgba(255, 255, 255, 0.01);
805 }
806
807 input[type="checkbox"]:checked, input[type="radio"]:checked {
808     background:rgba(0, 0, 0, 0.8);
809     border-color:rgba(255, 255, 255, 0.0);
810 }
811
812 input[type="checkbox"]:checked:disabled, input[type="radio"]:checked:disabled {
813     opacity:0.4;
814     background:rgba(0, 0, 0, 0.8);
815 }
816 #endif
817
818 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
819 input[type="radio"] {
820     -webkit-appearance: radio;
821     box-sizing: border-box;
822 }
823 #endif
824
825 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
826 select:focus {
827     border-color: rgb(17, 46, 135);
828 }
829 #endif
830
831 #if defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
832
833 input[type="color"] {
834     -webkit-appearance: square-button;
835     width: 44px;
836     height: 23px;
837 }
838
839 input[type="color"]::-webkit-color-swatch-wrapper {
840     display:-webkit-flex;
841     padding: 4px 2px;
842     box-sizing: border-box;
843     width: 100%;
844     height: 100%
845 }
846
847 input[type="color"]::-webkit-color-swatch {
848     background-color: #000000;
849     border: 1px solid #777777;
850     -webkit-flex: 1;
851 }
852
853 #if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
854
855 input[type="color"][list] {
856     -webkit-appearance: menulist;
857     width: 88px;
858     height: 23px;
859 }
860
861 input[type="color"][list]::-webkit-color-swatch-wrapper {
862     padding-left: 8px;
863     padding-right: 24px;
864 }
865
866 input[type="color"][list]::-webkit-color-swatch {
867     border-color: #000000;
868 }
869
870 #endif // defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
871
872 #endif // defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
873
874 select {
875     box-sizing: border-box;
876 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
877     -webkit-appearance: menulist-button;
878     letter-spacing: normal;
879     word-spacing: normal;
880     line-height: normal;
881     border: 1px solid #4c4c4c;
882     /* We want to be as close to background:transparent as possible without actually being transparent */
883     background-color: rgba(255, 255, 255, 0.01);
884     font: 11px Helvetica;
885     padding: 0 0.5em 0 0.5em;
886 #else
887     -webkit-appearance: menulist;
888     border: 1px solid;
889     color: black;
890     background-color: white;
891 #endif
892     -webkit-align-items: center;
893     white-space: pre;
894     -webkit-rtl-ordering: logical;
895     cursor: default;
896 }
897
898 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
899 select[size],
900 select[multiple],
901 select[size][multiple] {
902     -webkit-appearance: listbox;
903     -webkit-align-items: flex-start;
904     border: 1px inset gray;
905     border-radius: initial;
906     white-space: initial;
907 }
908
909 select[size="0"],
910 select[size="1"] {
911     -webkit-appearance: menulist;
912     -webkit-align-items: center;
913     border: 1px solid;
914     border-radius: 5px;
915     white-space: pre;
916 }
917 #endif
918
919 optgroup {
920     font-weight: bolder;
921 }
922
923 option {
924     font-weight: normal;
925 }
926
927 output {
928     display: inline;
929 }
930
931 /* form validation message bubble */
932
933 ::-webkit-validation-bubble {
934     display: inline-block;
935     z-index: 2147483647;
936     position: absolute;
937     opacity: 0.95;
938     line-height: 0;
939     margin: 0;
940     -webkit-text-security: none;
941     -webkit-transition: opacity 05.5s ease;
942 }
943
944 ::-webkit-validation-bubble-message {
945     display: -webkit-flex;
946     position: relative;
947     top: -4px;
948     font: message-box;
949     color: black;
950     min-width: 50px;
951     max-width: 200px;
952     border: solid 2px #400;
953     background: -webkit-gradient(linear, left top, left bottom, from(#f8ecec), to(#e8cccc));
954     padding: 8px;
955     border-radius: 8px;
956     -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.6),
957         inset -2px -2px 1px #d0c4c4,
958         inset 2px 2px 1px white;
959     line-height: normal;
960     white-space: normal;
961     z-index: 2147483644;
962 }
963
964 ::-webkit-validation-bubble-text-block {
965     -webkit-flex: 1;
966 }
967
968 ::-webkit-validation-bubble-heading {
969     font-weight: bold;
970 }
971
972 ::-webkit-validation-bubble-arrow {
973     display: inline-block;
974     position: relative;
975     left: 32px;
976     width: 16px;
977     height: 16px;
978     background-color: #f8ecec;
979     border-width: 2px 0 0 2px;
980     border-style: solid;
981     border-color: #400;
982     box-shadow: inset 2px 2px 1px white;
983     -webkit-transform-origin: 0 0;
984     -webkit-transform: rotate(45deg);
985     z-index: 2147483645;
986 }
987
988 ::-webkit-validation-bubble-arrow-clipper {
989     display: block;
990     overflow: hidden;
991     height: 16px;
992 }
993
994 #if defined(ENABLE_METER_ELEMENT) && ENABLE_METER_ELEMENT
995 /* meter */
996
997 meter {
998     -webkit-appearance: meter;
999     box-sizing: border-box;
1000     display: inline-block;
1001     height: 1em;
1002     width: 5em;
1003     vertical-align: -0.2em;
1004 }
1005
1006 meter::-webkit-meter-inner-element {
1007     -webkit-appearance: inherit;
1008     box-sizing: inherit;
1009     height: 100%;
1010     width: 100%;
1011 }
1012
1013 meter::-webkit-meter-bar {
1014     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));
1015     height: 100%;
1016     width: 100%;
1017     box-sizing: border-box;
1018 }
1019
1020 meter::-webkit-meter-optimum-value {
1021     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));
1022     height: 100%;
1023     box-sizing: border-box;
1024 }
1025
1026 meter::-webkit-meter-suboptimum-value {
1027     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));
1028     height: 100%;
1029     box-sizing: border-box;
1030 }
1031
1032 meter::-webkit-meter-even-less-good-value {
1033     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));
1034     height: 100%;
1035     box-sizing: border-box;
1036 }
1037 #endif
1038
1039 #if defined(ENABLE_PROGRESS_ELEMENT) && ENABLE_PROGRESS_ELEMENT
1040 /* progress */
1041
1042 progress {
1043     -webkit-appearance: progress-bar;
1044     box-sizing: border-box;
1045     display: inline-block;
1046     height: 1em;
1047     width: 10em;
1048     vertical-align: -0.2em;
1049 }
1050
1051 progress::-webkit-progress-inner-element {
1052     -webkit-appearance: inherit;
1053     box-sizing: inherit;
1054     height: 100%;
1055     width: 100%;
1056 }
1057
1058 progress::-webkit-progress-bar {
1059     background-color: gray;
1060     height: 100%;
1061     width: 100%;
1062     box-sizing: border-box;
1063 }
1064
1065 progress::-webkit-progress-value {
1066     background-color: green;
1067     height: 100%;
1068     width: 50%; /* should be removed later */
1069     box-sizing: border-box;
1070 }
1071 #endif
1072
1073 /* inline elements */
1074
1075 u, ins {
1076     text-decoration: underline
1077 }
1078
1079 strong, b {
1080     font-weight: bold
1081 }
1082
1083 i, cite, em, var, address, dfn {
1084     font-style: italic
1085 }
1086
1087 tt, code, kbd, samp {
1088     font-family: monospace
1089 }
1090
1091 pre, xmp, plaintext, listing {
1092     display: block;
1093     font-family: monospace;
1094     white-space: pre;
1095     margin: 1__qem 0
1096 }
1097
1098 mark {
1099     background-color: yellow;
1100     color: black
1101 }
1102
1103 big {
1104     font-size: larger
1105 }
1106
1107 small {
1108     font-size: smaller
1109 }
1110
1111 s, strike, del {
1112     text-decoration: line-through
1113 }
1114
1115 sub {
1116     vertical-align: sub;
1117     font-size: smaller
1118 }
1119
1120 sup {
1121     vertical-align: super;
1122     font-size: smaller
1123 }
1124
1125 nobr {
1126     white-space: nowrap
1127 }
1128
1129 /* states */
1130
1131 :focus { 
1132     outline: auto 5px -webkit-focus-ring-color
1133 }
1134
1135 /* Read-only text fields do not show a focus ring but do still receive focus */
1136 html:focus, body:focus, input[readonly]:focus { 
1137     outline: none
1138 }
1139
1140 applet:focus, embed:focus, iframe:focus, object:focus {
1141     outline: none
1142 }
1143   
1144 input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
1145     outline-offset: -2px
1146 }
1147
1148 input[type="button"]:focus,
1149 input[type="checkbox"]:focus,
1150 input[type="file"]:focus,
1151 input[type="hidden"]:focus,
1152 input[type="image"]:focus,
1153 input[type="radio"]:focus,
1154 input[type="reset"]:focus,
1155 input[type="search"]:focus,
1156 input[type="submit"]:focus,
1157 input[type="file"]:focus::-webkit-file-upload-button {
1158     outline-offset: 0
1159 }
1160     
1161 a:-webkit-any-link {
1162     color: -webkit-link;
1163     text-decoration: underline;
1164     cursor: auto;
1165 }
1166
1167 a:-webkit-any-link:active {
1168     color: -webkit-activelink
1169 }
1170
1171 /* HTML5 ruby elements */
1172
1173 ruby, rt {
1174     text-indent: 0; /* blocks used for ruby rendering should not trigger this */
1175 }
1176
1177 rt {
1178     line-height: normal;
1179     -webkit-text-emphasis: none;
1180 }
1181
1182 ruby > rt {
1183     display: block;
1184     font-size: 50%;
1185     text-align: start;
1186 }
1187
1188 ruby > rp {
1189     display: none;
1190 }
1191
1192 /* other elements */
1193
1194 noframes {
1195     display: none
1196 }
1197
1198 frameset, frame {
1199     display: block
1200 }
1201
1202 frameset {
1203     border-color: inherit
1204 }
1205
1206 iframe {
1207     border: 2px inset
1208 }
1209
1210 details {
1211     display: block
1212 }
1213
1214 summary {
1215     display: block
1216 }
1217
1218 summary::-webkit-details-marker {
1219     display: inline-block;
1220     width: 0.66em;
1221     height: 0.66em;
1222     margin-right: 0.4em;
1223 }
1224
1225 #if defined(ENABLE_TEMPLATE_ELEMENT) && ENABLE_TEMPLATE_ELEMENT
1226 template {
1227     display: none
1228 }
1229 #endif
1230
1231 bdi, output {
1232     unicode-bidi: -webkit-isolate;
1233 }
1234
1235 bdo {
1236     unicode-bidi: bidi-override;
1237 }
1238
1239 /* page */
1240
1241 @page {
1242     /* FIXME: Define the right default values for page properties. */
1243     size: auto;
1244     margin: auto;
1245     padding: 0px;
1246     border-width: 0px;
1247 }
1248
1249 /* noscript is handled internally, as it depends on settings. */
1250