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