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