[Yosemite] Button text doesn't go white while pushing the button, like it does for...
[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="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]::-webkit-file-upload-button:active, button:active {
694     color: ActiveButtonText;
695 }
696
697 input[type="range"] {
698     -webkit-appearance: slider-horizontal;
699     padding: initial;
700     border: initial;
701     margin: 2px;
702     color: #909090;
703 }
704
705 input[type="range"]::-webkit-slider-container, input[type="range"]::-webkit-media-slider-container {
706     -webkit-flex: 1;
707     box-sizing: border-box;
708     display: -webkit-flex;
709     -webkit-align-contents: center;
710 }
711
712 input[type="range"]::-webkit-slider-runnable-track {
713     -webkit-flex: 1;
714     -webkit-align-self: center;
715
716     box-sizing: border-box;
717     display: block;
718 }
719
720 input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-media-slider-thumb {
721     -webkit-appearance: sliderthumb-horizontal;
722     box-sizing: border-box;
723     display: block;
724 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
725     background-color: white;
726     border: 1px solid rgb(66, 66, 66);
727     padding: 0px;
728 #endif
729 }
730
731 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
732 input[type="range"]::-webkit-slider-thumb:active {
733     background-color: black;
734 }
735
736 input:disabled, textarea:disabled {
737     opacity: 0.4;
738 }
739
740 input[readonly], textarea[readonly] {
741     border-color: rgb(188, 188, 188);
742 }
743
744 textarea::-webkit-input-placeholder {
745     text-indent: 2px;
746 }
747 #endif
748
749 input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled,
750 input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
751 select:disabled, keygen:disabled, optgroup:disabled, option:disabled,
752 select[disabled]>option {
753     color: GrayText
754 }
755
756 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
757 input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active {
758     border-style: inset
759 }
760
761 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 {
762     border-style: outset
763 }
764 #endif
765
766 area, param {
767     display: none
768 }
769
770 input[type="checkbox"] {
771     -webkit-appearance: checkbox;
772 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
773     box-sizing: border-box;
774 #else
775     border-radius: 5px;
776     width: 16px;
777     height: 16px;
778     padding: 0px;
779     /* We want to be as close to background:transparent as possible without actually being transparent */
780     background-color: rgba(255, 255, 255, 0.01);
781 #endif
782 }
783
784 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
785 input[type="radio"] {
786     -webkit-appearance: radio;
787     border-radius: 8px;
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 }
794
795 input[type="checkbox"]:checked, input[type="radio"]:checked {
796     background:rgba(0, 0, 0, 0.8);
797     border-color:rgba(255, 255, 255, 0.0);
798 }
799
800 input[type="checkbox"]:checked:disabled, input[type="radio"]:checked:disabled {
801     opacity:0.4;
802     background:rgba(0, 0, 0, 0.8);
803 }
804 #endif
805
806 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
807 input[type="radio"] {
808     -webkit-appearance: radio;
809     box-sizing: border-box;
810 }
811 #endif
812
813 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
814 select:focus {
815     border-color: rgb(17, 46, 135);
816 }
817 #endif
818
819 #if defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
820
821 input[type="color"] {
822     -webkit-appearance: square-button;
823     width: 44px;
824     height: 23px;
825 }
826
827 input[type="color"]::-webkit-color-swatch-wrapper {
828     display:-webkit-flex;
829     padding: 4px 2px;
830     box-sizing: border-box;
831     width: 100%;
832     height: 100%
833 }
834
835 input[type="color"]::-webkit-color-swatch {
836     background-color: #000000;
837     border: 1px solid #777777;
838     -webkit-flex: 1;
839 }
840
841 #if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
842
843 input[type="color"][list] {
844     -webkit-appearance: menulist;
845     width: 88px;
846     height: 23px;
847 }
848
849 input[type="color"][list]::-webkit-color-swatch-wrapper {
850     padding-left: 8px;
851     padding-right: 24px;
852 }
853
854 input[type="color"][list]::-webkit-color-swatch {
855     border-color: #000000;
856 }
857
858 #endif // defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
859
860 #endif // defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
861
862 select {
863     box-sizing: border-box;
864 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
865     -webkit-appearance: menulist-button;
866     letter-spacing: normal;
867     word-spacing: normal;
868     line-height: normal;
869     border: 1px solid #4c4c4c;
870     /* We want to be as close to background:transparent as possible without actually being transparent */
871     background-color: rgba(255, 255, 255, 0.01);
872     font: 11px Helvetica;
873     padding: 0 0.4em 0 0.4em;
874 #else
875     -webkit-appearance: menulist;
876     border: 1px solid;
877     color: black;
878     background-color: white;
879 #endif
880     -webkit-align-items: center;
881     white-space: pre;
882     -webkit-rtl-ordering: logical;
883     cursor: default;
884 }
885
886 #if !(defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS)
887 select[size],
888 select[multiple],
889 select[size][multiple] {
890     -webkit-appearance: listbox;
891     -webkit-align-items: flex-start;
892     border: 1px inset gray;
893     border-radius: initial;
894     white-space: initial;
895 }
896
897 select[size="0"],
898 select[size="1"] {
899     -webkit-appearance: menulist;
900     -webkit-align-items: center;
901     border: 1px solid;
902     border-radius: 5px;
903     white-space: pre;
904 }
905 #endif
906
907 optgroup {
908     font-weight: bolder;
909 }
910
911 option {
912     font-weight: normal;
913 }
914
915 output {
916     display: inline;
917 }
918
919 /* form validation message bubble */
920
921 ::-webkit-validation-bubble {
922     display: inline-block;
923     z-index: 2147483647;
924     position: absolute;
925     opacity: 0.95;
926     line-height: 0;
927     margin: 0;
928     -webkit-text-security: none;
929     -webkit-transition: opacity 05.5s ease;
930 }
931
932 ::-webkit-validation-bubble-message {
933     display: -webkit-flex;
934     position: relative;
935     top: -4px;
936     font: message-box;
937     color: black;
938     min-width: 50px;
939     max-width: 200px;
940     border: solid 2px #400;
941     background: -webkit-gradient(linear, left top, left bottom, from(#f8ecec), to(#e8cccc));
942     padding: 8px;
943     border-radius: 8px;
944     -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.6),
945         inset -2px -2px 1px #d0c4c4,
946         inset 2px 2px 1px white;
947     line-height: normal;
948     white-space: normal;
949     z-index: 2147483644;
950 }
951
952 ::-webkit-validation-bubble-text-block {
953     -webkit-flex: 1;
954 }
955
956 ::-webkit-validation-bubble-heading {
957     font-weight: bold;
958 }
959
960 ::-webkit-validation-bubble-arrow {
961     display: inline-block;
962     position: relative;
963     left: 32px;
964     width: 16px;
965     height: 16px;
966     background-color: #f8ecec;
967     border-width: 2px 0 0 2px;
968     border-style: solid;
969     border-color: #400;
970     box-shadow: inset 2px 2px 1px white;
971     -webkit-transform-origin: 0 0;
972     -webkit-transform: rotate(45deg);
973     z-index: 2147483645;
974 }
975
976 ::-webkit-validation-bubble-arrow-clipper {
977     display: block;
978     overflow: hidden;
979     height: 16px;
980 }
981
982 #if defined(ENABLE_METER_ELEMENT) && ENABLE_METER_ELEMENT
983 /* meter */
984
985 meter {
986     -webkit-appearance: meter;
987     box-sizing: border-box;
988     display: inline-block;
989     height: 1em;
990     width: 5em;
991     vertical-align: -0.2em;
992 }
993
994 meter::-webkit-meter-inner-element {
995     -webkit-appearance: inherit;
996     box-sizing: inherit;
997     height: 100%;
998     width: 100%;
999 }
1000
1001 meter::-webkit-meter-bar {
1002     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));
1003     height: 100%;
1004     width: 100%;
1005     box-sizing: border-box;
1006 }
1007
1008 meter::-webkit-meter-optimum-value {
1009     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));
1010     height: 100%;
1011     box-sizing: border-box;
1012 }
1013
1014 meter::-webkit-meter-suboptimum-value {
1015     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));
1016     height: 100%;
1017     box-sizing: border-box;
1018 }
1019
1020 meter::-webkit-meter-even-less-good-value {
1021     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));
1022     height: 100%;
1023     box-sizing: border-box;
1024 }
1025 #endif
1026
1027 /* progress */
1028
1029 progress {
1030     -webkit-appearance: progress-bar;
1031     box-sizing: border-box;
1032     display: inline-block;
1033     height: 1em;
1034     width: 10em;
1035     vertical-align: -0.2em;
1036 }
1037
1038 progress::-webkit-progress-inner-element {
1039     -webkit-appearance: inherit;
1040     box-sizing: inherit;
1041     height: 100%;
1042     width: 100%;
1043 }
1044
1045 progress::-webkit-progress-bar {
1046     background-color: gray;
1047     height: 100%;
1048     width: 100%;
1049     box-sizing: border-box;
1050 }
1051
1052 progress::-webkit-progress-value {
1053     background-color: green;
1054     height: 100%;
1055     width: 50%; /* should be removed later */
1056     box-sizing: border-box;
1057 }
1058
1059 /* inline elements */
1060
1061 u, ins {
1062     text-decoration: underline
1063 }
1064
1065 strong, b {
1066     font-weight: bold
1067 }
1068
1069 i, cite, em, var, address, dfn {
1070     font-style: italic
1071 }
1072
1073 tt, code, kbd, samp {
1074     font-family: monospace
1075 }
1076
1077 pre, xmp, plaintext, listing {
1078     display: block;
1079     font-family: monospace;
1080     white-space: pre;
1081     margin: 1__qem 0
1082 }
1083
1084 mark {
1085     background-color: yellow;
1086     color: black
1087 }
1088
1089 big {
1090     font-size: larger
1091 }
1092
1093 small {
1094     font-size: smaller
1095 }
1096
1097 s, strike, del {
1098     text-decoration: line-through
1099 }
1100
1101 sub {
1102     vertical-align: sub;
1103     font-size: smaller
1104 }
1105
1106 sup {
1107     vertical-align: super;
1108     font-size: smaller
1109 }
1110
1111 nobr {
1112     white-space: nowrap
1113 }
1114
1115 /* states */
1116
1117 :focus { 
1118     outline: auto 5px -webkit-focus-ring-color
1119 }
1120
1121 /* Read-only text fields do not show a focus ring but do still receive focus */
1122 html:focus, body:focus, input[readonly]:focus { 
1123     outline: none
1124 }
1125
1126 applet:focus, embed:focus, iframe:focus, object:focus {
1127     outline: none
1128 }
1129   
1130 input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
1131     outline-offset: -2px
1132 }
1133
1134 input[type="button"]:focus,
1135 input[type="checkbox"]:focus,
1136 input[type="file"]:focus,
1137 input[type="hidden"]:focus,
1138 input[type="image"]:focus,
1139 input[type="radio"]:focus,
1140 input[type="reset"]:focus,
1141 input[type="search"]:focus,
1142 input[type="submit"]:focus,
1143 input[type="file"]:focus::-webkit-file-upload-button {
1144     outline-offset: 0
1145 }
1146     
1147 a:-webkit-any-link {
1148     color: -webkit-link;
1149     text-decoration: underline;
1150     cursor: auto;
1151 }
1152
1153 a:-webkit-any-link:active {
1154     color: -webkit-activelink
1155 }
1156
1157 /* HTML5 ruby elements */
1158
1159 ruby, rt {
1160     text-indent: 0; /* blocks used for ruby rendering should not trigger this */
1161 }
1162
1163 rt {
1164     line-height: normal;
1165     -webkit-text-emphasis: none;
1166 }
1167
1168 ruby > rt {
1169     display: block;
1170     font-size: -webkit-ruby-text;
1171     text-align: start;
1172 }
1173
1174 ruby > rp {
1175     display: none;
1176 }
1177
1178 /* other elements */
1179
1180 noframes {
1181     display: none
1182 }
1183
1184 frameset, frame {
1185     display: block
1186 }
1187
1188 frameset {
1189     border-color: inherit
1190 }
1191
1192 iframe {
1193     border: 2px inset
1194 }
1195
1196 details {
1197     display: block
1198 }
1199
1200 summary {
1201     display: block
1202 }
1203
1204 summary::-webkit-details-marker {
1205     display: inline-block;
1206     width: 0.66em;
1207     height: 0.66em;
1208     margin-right: 0.4em;
1209 }
1210
1211 #if defined(ENABLE_TEMPLATE_ELEMENT) && ENABLE_TEMPLATE_ELEMENT
1212 template {
1213     display: none
1214 }
1215 #endif
1216
1217 bdi, output {
1218     unicode-bidi: -webkit-isolate;
1219 }
1220
1221 bdo {
1222     unicode-bidi: bidi-override;
1223 }
1224
1225 #if defined(WTF_PLATFORM_IOS) && WTF_PLATFORM_IOS
1226 applet, embed, object, img {
1227     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1228 }
1229 :-webkit-any-link img {
1230     -webkit-tap-highlight-color: inherit;
1231 }
1232 #endif
1233
1234 /* page */
1235
1236 @page {
1237     /* FIXME: Define the right default values for page properties. */
1238     size: auto;
1239     margin: auto;
1240     padding: 0px;
1241     border-width: 0px;
1242 }
1243
1244 /* noscript is handled internally, as it depends on settings. */
1245